Adaloでは決済は以下をサポートしています。
・Stripeでのクレカ決済
・アプリ内決済
今回はAdaloでのStripeでのクレジットカード決済をご紹介します。
とても簡単です。
動画で確認したい方はこちらから↓
準備：まずはStripeのアカウントを用意しよう
まずは以下のサイトにいき、Stripeアカウントを取得しましょう。
ここでは説明は割愛しますが、そこまで難しくないのでやってみてください。
MarketPlaceからStripePaymentコンポーネントを取得する
まずはAdaloのエディタの左側のプラスボタンよりコンポーネントの一覧を開く、
MarketPlaceを開きます。
「stripe」で検索すると以下のように表示されます。
こちらをINSTALLします。
インストールすると、コンポーネント一覧の下の方の「Installed」のところにStripe Paymentが表示されます。
それを任意の画面にドラッグしましょう。
するとこんな感じになります。
StripeとAdaloの連携
まず左上の青いボタン「Connect with Stripe」を押し、stripeと連携しましょう。
ボタンを押すと、stripe側の画面に飛ぶので、stripe側の指示に従ってどんどん進めましょう。
こんな画面が出たら成功です。
Adaloに戻りリロードして、以下のように「Stripe Connect Active」っと表示されれば成功です。
これでAdaloとStripeの接続ができました。
支払金額や通過を設定
次はPayment Amountのところに、支払い金額を数値で入れます。
もちろんマジックテキストでデータベースから値を入れることもできます。
お次はCurrency Typeを設定します。
デフォルトがUSDとなっているので日本の場合はJPYに変えましょう。
変え忘れると米ドル計算になっちゃうので要注意です。
完了画面への遷移
最後は、ボタン押下時の決済成功時の挙動を定義します。
After Payment is successfulの項目があるので、ここにあるADD ACTIONからリンクを張りましょう。
以下の図ではCompleteという完了画面を用意して、そこへの遷移をさせました。
こんな感じです。
とりあえず一旦これだけでStripeで決済できるようになりました！
簡単ですよね？
ただ実際のプロダクトにするにはもう少し細かく作り込む必要があると思います。
商品一覧・詳細画面があって、それを選択して購入ボタンを押すと決済画面にいき、決済完了時にはデータベースのステータスを更新して、、、などなど、色んな処理が必要になると思います。
その辺も知りたい方は以下へどうぞ！
AdaloでStripeのクレカ決済を使って簡単なECサイトを作ってみよう
こちらでもう少し細かく書いていますので、興味の有る方はどうぞ。