国内初!bubble公式開発試験に合格!

【Bubble】クレジットカード決済の実装方法

概要

クレジットカード決済は、アプリ上での支払いにおいても欠かせないものとなっています。Bubbleでは、プラグインを用いることで手軽かつ安全に決済機能を実装できます。

今回は大手決済サービス「Stripe」を用いた、クレジットカード決済の実装方法を解説します。

クレジットカード決済の実装方法

完成イメージ

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

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

1. プラグインをインストールする

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

2. Stripeのアカウントを作成する

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

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

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

今回はスキップします。

ダッシュボードにて、公開可能キーとシークレットキーを確認できます。

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

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

ℹ️ 実際の決済を受け付けるには、Stripeアカウントの本番環境利用を申請する必要があります。詳細はこちらをご覧ください。

3. Stripe決済を実装する

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

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

WhenStep意味
Button 決済する is clickedPayment >
Charge the current user
操作中のユーザーが決済する

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

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

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

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

任意の方法でのログインも実装してください。

以上で実装完了です。

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

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

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

ℹ️ 決済完了ダイアログは、初期設定では英語で表示される場合があります。日本語や任意の文章に変更する場合は、こちらの記事をご覧ください。

資料請求

Swoooのサービス資料をダウンロードいただけます。開発支援をご検討の方はぜひご一読ください。

ご相談・お問い合わせ

お客様の新規事業開発やマーケティング活動における課題解決をサポートします。
お気軽にご相談ください。

料金シミュレーション

たった2分で開発費用が分かります。
簡単な質問に答えるだけでお見積りが可能です。