《Bubble》クレジットカード決済の実装方法（プラグイン）

プラグイン

クレジットカード決済ができるプラグインを２つ紹介します。

１．Stripe

https://manual.bubble.io/core-resources/bubble-made-plugins/stripe

Bubbleが作成したプラグインになります。「Stripe」を用いた決済サービスです。bubbleでのクレジットカード決済のプラグインとしておそらく一番利用されています。

２．PAY.JP

https://bubble.io/plugin/payjp-1660540896929x933598484698234900

弊社が作成したプラグインになります。「PAY.JP」を用いた決済サービスです。リファレンスが日本語であることや、決済手数料が他社より安いという特徴があります。

*日本円での決済の場合 Visa、Mastercard の場合 30 日以内、American Express の場合は 7 日以内

1．Stripeを用いた実装方法

完成イメージ

Bubbleアプリにて決済ボタンを押すと、決済画面に遷移します。

カード情報を入力し「支払う」を押すと、決済が完了します。

１．プラグインをインストール

Stripeプラグインをインストールします。

２． Stripeのアカウントを作成する

Stripeにてアカウントを作成します。

認証メールが送信されるので、メールを確認し認証します。

本番環境にて決済された支払いを受け取るには、事前にビジネスプロフィールの入力が必要です。

今回はスキップします。

開発者向けAPIキーのページで公開可能キーとシークレットキーを確認できます。

Bubbleのプラグインページにて、Publishable Keyに公開可能キーを、Secret Keyにシークレットキーを入力してください。

今回はテスト環境での検証なので、developmentの欄に入力します。

３．決済を実装する

Bubbleにて決済機能を実装します。

Buttonを1つ配置し、押下時のWorkflowを設定します。

Charge the current userの各パラメータを設定します。

必須となる設定は、AmountとCurrencyです。

Amountには金額を入力します。Currencyは通貨の単位なので、日本円の場合は「JPY」を選択します。

また、Payer emailに「Current User’s email」とある通り、決済時にはユーザーのメールアドレスが必要となります。

任意の方法でのログインを実装するか、Run asしてこのページを開くなどしてログインしている状態にしてください。

以上で実装完了です。

プレビューにて決済ボタンを押すと、Stripeの決済画面が表示されます。

カード番号は「4242 4242 4242 4242」とすることで、Stripeにおけるテスト決済を実行できます。適当な有効期限、セキュリティコード、所有者名を入力し「支払う」を押下します。

Bubbleアプリに戻り、決済完了ダイアログが表示されました。

2．PAY.JPを用いた実装方法

完成イメージ

ユーザー登録→カード登録→決済

１．PAYJPアカウントを作成する

まずはPAYJPにアクセスし新規登録を行います。

メールのリンクからマイページにログインできたら、メニューの「API」をクリックしてください。

秘密鍵と公開鍵が表示されます。後で必要になりますのでコピーしておきます。

２．プラグインを設定する

pluginタブから「PAY.JP-plugin」をインストールします。

下のようなフィールドが現れます。ここで先ほどPAY.JPから得た秘密鍵、公開鍵を設定します。まず「Username」に秘密鍵、「pk」に公開鍵を設定します。

上二つの項目が本番用、下の二つの項目がテスト用です。今回は、テスト用のみ入力します。

３．ユーザーを作る

秘密鍵、公開鍵の設定が終わったらようやくプラグインを実行していきます。

まず、bubbleの「DBタブ」をクリックして「User」テーブルにフィールドを追加します。ここでは「payjp_id」とします。

「Userテーブル」にbubbleのユーザーを一人作っておきます。

次にbubbleの「Designタブ」をクリックして画面で適当なボタンを配置します。ここでは「ユーザーを登録する」ボタンを配置しました。「Start/Edit Workflow」からワークフローの画面に移ります。

bubbleワークフローの画面で、「ユーザーを登録する」ボタンにアクションを設定します。「Click here to add an action 」で「plugin」→「API PayJP Call add customer」を選択します。

同じくbubbleワークフローの画面で、Step2にアクションを追加します。「Data」→「Make changes to thing...」を選択します。

「Thing to change」に「Current User」。変更するフィールドは先ほど上で追加した「payjp_id」です。「payjp_id」の値は「Result of step1」→「body id」です。

それでは「Run as→」から実行しましょう。

「ユーザーを登録する」ボタンをクリックします。画面上は何も実行されないように見えますが「Step by Step」で確認すると処理の流れを追うことができます。

では「DBタブ」から「User」テーブルを確認してください。

フィールド「payjp_id」の値に「cus_」から始まる文字列が入っています。

先ほどワークフローでAPIを実行した後に「Result of step1」から「body id」を選択しましたが、その時の値です。APIを実行してPAYJPにユーザーを登録したことで、PAYJPから一意なIDが割り振られたのです。

PAYJP管理画面からも確認しましょう。メニューから「顧客」を選択すると「cus_」から始まる文字列が入っています。

DBに入っている「payjp_id」の値と同じ「cus_」から始まる文字列が表示されているはずです。これでwebサイトからPAPJPに接続しユーザーを登録することができました。

４．カードを作る

まずはカード作成に必要なカード情報入力フォームを配置していきます。

ここではポップアップウィンドウにカード情報入力フォームを設定します。

「Designタブ」をクリックして「Popup」を選択しポップアップウィンドウを設置してください。設置したら左メニューから「payjp form」を選択しポップアップウィンドウに配置します。

レイアウトはお好みで変更することができます。

フォームが配置できたら処理を加えていきます。

「Workflowタブ」をクリックして次のように設定します。

「Click here to add an event...」→「Elements」→「A payjp form is clicked」の順番に選択していきます。

「When payjpform is clicked」のアクションに「plugins」→「API PayJP Call add card」を設定します。

「API PayJP Call add card」のプロパティエディタに次のように設定していきます。

customer_id

STEP1で登録したUserテーブル内の「payjp_id」フィールドの値

card

payjpフォームから送られてきたtokenを保存します。「Insert Dynamic data」→「This payjpform」→「's token」

ここまで準備ができたらカード作成はほぼ完成です。画面に新しく「カードを登録する」ボタンを設置し、このポップアップウィンドウを開くように設定します。

それでは「Run as→」から実行しましょう。

クレジットカード番号の「4242 4242 4242 4242」はテスト用の番号です。

実行が完了したらPAPJPの管理画面を確認します。

カードが登録されていることがわかります。

ここでは顧客を作成してからカードを作成しましたが、「API PayJP Call add card」ではなく「API PayJP Call add customer_with_card」を選択することで、顧客作成とカード作成を同時に実行することができます。

上の「カードを作成しよう」の手順で進めて頂きワークフローで「When payjpform is clicked」のアクションで「API PayJP Call add customer_with_card」を選択してください。

この戻り値を「Response of step1」で取得し顧客ID、「cus_」から始まるIDをDBに保存してください。

⚠︎2枚目以降のカード作成は「API PayJP Call add card」を呼び出すように注意してください

５．決済を実装する

「購入する」ボタンを設置します。

[画像]

「購入する」ボタンにアクションを設定します。

「Click here to add an action 」で「plugin」→「API PayJP Call set charge」を選択します。

[画像]

「API PayJP Call set charge」のプロパティエディタに次のように設定していきます。

customer

STEP1で登録したUserテーブル内の「payjp_id」フィールドの値

amount

金額

[画像]

それでは「Run as→」から実行しましょう。

[画像]

実行が完了したらPAYJPの管理画面を確認します。

メニューから「売上」を選択します。

ステータスが「支払い済み」になっているのが確認できます。

課金IDは支払いが行われる度に発行されるIDです。webサイト上から返金する場合はこの課金IDが必要になりますのでDBに保存しておいてください。

💡今回は決済について解説しましたが、返金処理などもできます。詳しくはこちらの記事をご覧ください。