# Bubbleでのpaypay決済の実装について（SDKの実装について）

**URL:** <https://www.nocode-faq.com/t/topic/4455>\
**Category:** bubble\
**Created:** [2025 年 1 月 28 日午前 5:20 UTC](https://www.nocode-faq.com/t/topic/4455 "2025-01-28T05:20:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hiroshi00vx](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/hiroshi00vx/32/8292_2.png) [@hiroshi00vx](https://www.nocode-faq.com/u/hiroshi00vx)\
**Post date:** [2025 年 1 月 28 日午前 5:20 UTC](https://www.nocode-faq.com/t/topic/4455/1 "2025-01-28T05:20:37Z")

</div>

### 1.前提条件

paypayの開発者登録を完了し、APIkey、secretが手元にある状態

### 2.発生している問題

paypayの決済を行うために、paypayの開発者ドキュメントを参考に署名作成を行っていますが、うまく認証ができず詰まっています。

開発者ドキュメントではSDKをインストールするところから始めていますが、

・BubbleでSDKをインストールすることは可能なのでしょうか？  
・SDKインストールが困難な場合、署名作成を自力で行い認証する必要があるが、正しい署名が作成できているか確認する方法はあるのでしょうか？  
・上記以外の代替案

これらについてどなたかお教え頂けますと大変助かります。。。

なおpaypayのプラグインはありましたが、使用せずに作成したいと考えております。

### 3.試したこと

現状は以下のserver scriptを実行し、ハッシュ化を行いbase64でエンコードしています。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/beb56cb4443924202ef0853129c7278ca54fb104.png)

使用するエンドポイントは  
[https://stg-api.sandbox.paypay.ne.jp/v2/codes](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を実行すると以下のエラーとなってしまいます。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/898ede129dfb918d54b7666ef3fd4887f7597fcc.png)

### 4.実装したい機能

bubbleで決済ボタンをクリックすると、paypayの決済画面に遷移し、  
決済完了後リダイレクトでbubble画面に遷移する

### 5.補足情報 （調べたURL/参考になりそうな事例）

ウェブペイメント（開発者ドキュメント）

> **[PayPay for Developers](https://developer.paypay.ne.jp/products/docs/webpayment)**

API認証（開発者ドキュメント）

> **[Web Cashier - PayPay Open Payment API Documentation](https://www.paypay.ne.jp/opa/doc/jp/v1.0/webcashier#tag/API)**

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2025 年 1 月 28 日午前 7:28 UTC](https://www.nocode-faq.com/t/topic/4455/2 "2025-01-28T07:28:18Z")

</div>

私の知る限りでは、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）

```auto
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で動作させることを想定したものです。

実際に動作させるには、以下の手順が必要です：

1. GCPまたはFirebaseでプロジェクトを作成。
2. Cloud Functionsを有効化してこのコードをデプロイ。
3. デプロイしたCloud FunctionのURLを取得し、BubbleからそのURLにリクエストを送ることで署名を取得します。

【参考】サーバーレス構成でPayPay決済を実装した記事が  
以下にありますので、確認下さい

[PayPay決済をサーバーレス(Cloud Functions for Firebase)構成で実装した  
 ](https://qiita.com/okamu_/items/21bc931554b900009d92)

---

<div class="post-metadata">

**Author:** ![hiroshi00vx](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/hiroshi00vx/32/8292_2.png) [@hiroshi00vx](https://www.nocode-faq.com/u/hiroshi00vx)\
**Post date:** [2025 年 1 月 28 日午後 11:47 UTC](https://www.nocode-faq.com/t/topic/4455/3 "2025-01-28T23:47:04Z")

</div>

お返事ありがとうございます！！  
やはりSDKをインストールすることは難しいですよね。。

サーバーをかます形で接続検証進めたいと思います。  
ありがとうございました！

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2025 年 1 月 29 日午前 5:29 UTC](https://www.nocode-faq.com/t/topic/4455/4 "2025-01-29T05:29:49Z")

</div>

それでいきましょうー。がんばってくださいね^^