1.前提条件
paypayの開発者登録を完了し、APIkey、secretが手元にある状態
2.発生している問題
paypayの決済を行うために、paypayの開発者ドキュメントを参考に署名作成を行っていますが、うまく認証ができず詰まっています。
開発者ドキュメントではSDKをインストールするところから始めていますが、
・BubbleでSDKをインストールすることは可能なのでしょうか？
・SDKインストールが困難な場合、署名作成を自力で行い認証する必要があるが、正しい署名が作成できているか確認する方法はあるのでしょうか？
・上記以外の代替案
これらについてどなたかお教え頂けますと大変助かります。。。
なおpaypayのプラグインはありましたが、使用せずに作成したいと考えております。
3.試したこと
現状は以下のserver scriptを実行し、ハッシュ化を行いbase64でエンコードしています。
使用するエンドポイントは
https://stg-api.sandbox.paypay.ne.jp/v2/codes
で、サンドボックスの環境を使用しています。
bodyについては、ハッシュ化時にずれがないように、スペースや改行をなくしたものを使用しています。（APIのbodyと同一のものを使用）
※取得ID,リダイレクトURLを任意の値に変更して検証中です
{"merchantPaymentId":"取得ID","amount":{"amount":1000,"currency":"JPY"},"orderDescription":"テスト決済","orderItems":[{"name":"テスト商品","quantity":1,"unit_price":{"amount":1000,"currency":"JPY"}}],"redirectUrl":"リダイレクトURL","redirectType":"WEB_LINK"}
上記で作成した署名をヘッダーに設定し、APIを実行すると以下のエラーとなってしまいます。
4.実装したい機能
bubbleで決済ボタンをクリックすると、paypayの決済画面に遷移し、
決済完了後リダイレクトでbubble画面に遷移する
5.補足情報 （調べたURL/参考になりそうな事例）
ウェブペイメント（開発者ドキュメント）
https://developer.paypay.ne.jp/products/docs/webpayment
API認証（開発者ドキュメント）
https://www.paypay.ne.jp/opa/doc/jp/v1.0/webcashier#tag/API
私の知る限りでは、BubbleにSDKを直接インストールした事例は見たことがありません。おそらく、Bubbleの仕様上、SDKをインストールして使うことは難しい、もしくは不可能だと思います。
そのため、署名を生成する部分をBubbleの外部で処理する方法を検討するのが現実的です。具体的には、サーバーサイド（例えばGoogle Cloud FunctionsやAWS Lambda）で署名を作成し、その結果をBubbleに渡す構成が考えられます。
私自身も、FlutterFlowでSDKが使えず署名を作れなかったことがありましたが、その際はGoogle Cloud Functionsを使って署名を生成しました（PayPayではありませんが、同じような仕組みです。PayPayの場合は、固定値IPも必要だったはず）。
以下は、PayPayで署名を生成する場合のサンプルコードです。
このコードはNode.jsで記述されていますが、
基本的な署名の作り方を理解するために役立つと思います。
PayPay署名生成のサンプルコード（Node.js）
const crypto = require('crypto');
/**
* PayPay署名生成
*
* @param {Object} req - HTTPリクエスト
* @param {Object} res - HTTPレスポンス
*/
exports.generatePayPaySignature = (req, res) => {
try {
// 必要なデータをリクエストボディから取得
const {
method, // HTTPメソッド (GET, POSTなど)
path, // URLパス (例: /v2/payments)
query, // クエリ文字列 (例: merchant_id=123)
body, // リクエストボディ (JSON文字列)
timestamp, // 現在のタイムスタンプ (Unix時間)
apiSecret // PayPay APIのSecretキー
} = req.body;
if (!method || !path || !timestamp || !apiSecret) {
res.status(400).send("必要なパラメータが不足しています");
return;
}
// クエリ文字列が存在する場合の処理
const queryString = query ? `?${query}` : '';
const message = `${method} ${path}${queryString} ${timestamp} ${body || ''}`;
// HMAC-SHA256で署名を生成
const signature = crypto
.createHmac('sha256', apiSecret)
.update(message)
.digest('base64');
// レスポンスとして署名を返す
res.status(200).json({ signature });
} catch (error) {
console.error("署名生成エラー:", error);
res.status(500).send("内部サーバーエラー");
}
};
補足
このコードは、Google Cloud FunctionsやFirebase Functionsで動作させることを想定したものです。
実際に動作させるには、以下の手順が必要です：
- GCPまたはFirebaseでプロジェクトを作成。
- Cloud Functionsを有効化してこのコードをデプロイ。
- デプロイしたCloud FunctionのURLを取得し、BubbleからそのURLにリクエストを送ることで署名を取得します。
【参考】サーバーレス構成でPayPay決済を実装した記事が
以下にありますので、確認下さい
PayPay決済をサーバーレス(Cloud Functions for Firebase)構成で実装した
「いいね！」 1
お返事ありがとうございます！！
やはりSDKをインストールすることは難しいですよね。。
サーバーをかます形で接続検証進めたいと思います。
ありがとうございました！
「いいね！」 1
