概要クレジットカード決済は、アプリ上での支払いにおいても欠かせないものとなっています。Bubbleでは、プラグインを用いることで手軽かつ安全に決済機能を実装できます。今回は大手決済サービス「Stripe」を用いた、クレジットカード決済の実装方法を解説します。完成イメージBubbleアプリにて決済ボタンを押すと、決済画面に遷移します。カード情報を入力し「支払う」を押すと、決済が完了します。プラグインをインストールするStripeプラグインをインストールします。Stripeのアカウントを作成するStripeにてアカウントを作成します。認証メールが送信されるので、メールを確認し認証します。本番環境にて決済された支払いを受け取るには、事前にビジネスプロフィールの入力が必要です。今回はスキップします。ダッシュボードにて、公開可能キーとシークレットキーを確認できます。Keyにシークレットキーを入力してください。今回はテスト環境での検証なので、developmentの欄に入力します。実際の決済を受け付けるには、Stripeアカウントの本番環境利用を申請する必要があります。詳細はこちらをご覧ください。Stripe決済を実装するBubbleにて決済機能を実装します。Buttonを1つ配置し、押下時のWorkflowを設定します。userの各パラメータを設定します。必須となる設定は、AmountとCurrencyです。Amountには金額を入力します。Currencyは通貨の単位なので、日本円の場合は「JPY」を選択します。email」とある通り、決済時にはユーザーのメールアドレスが必要となります。任意の方法でのログインも実装してください。プレビューにて決済ボタンを押すと、Stripeの決済画面が表示されます。4242」とすることで、Stripeにおけるテスト決済を実行できます。適当な有効期限、セキュリティコード、所有者名を入力し「支払う」を押下します。Bubbleアプリに戻り、決済完了ダイアログが表示されました。決済完了ダイアログは、初期設定では英語で表示される場合があります。日本語や任意の文章に変更する場合は、こちらの記事をご覧ください。