ホーム
アプリ開発, サイト構築ツール, ノーコード
Adalo Resource・マーケットプレイスペイメント後編(Stripe)(スクリーンとコンポーネントセクション）について

Adalo Resource・マーケットプレイスペイメント後編(Stripe)(スクリーンとコンポーネントセクション）について

皆さんこんにちは。いかがお過ごしでしょうか。この記事ではノーコードツールAdaloのAdalo Resourceを元にスクリーンとコンポーネントセクション内にあるマーケットプレイスペイメントの後編(Stripe)をお届けします。一つ前の記事はマーケットプレイスペイメントの前編をお届けしましたが、後編では「マーチャントがStripeアカウントをアプリに接続できるようにする」と「コンシューマーペイメントがマーチャントアカウントに移動する設定」を日本語で解説します。早速行ってみましょう！

この記事の目次

1 マーチャントがStripeアカウントをアプリに接続できるようにする
2 コンシューマーペイメントがマーチャントアカウントに移動する設定
3 まとめ

マーチャントがStripeアカウントをアプリに接続できるようにする

マーチャントのStripeアカウントに消費者の支払いを可能にするためにはマーチャントがStripeアカウントに接続できる画面をアプリ内に作成する必要があります。

データベースのMerchants CollectionにStripe IDプロパティを追加

最も一般的なマーケットプレイスアプリでは、Merchantsのコレクションがありますが、Merchantsコレクションがない場合は、このプロパティをUsersコレクションに追加することができます。

1) Adaloの左のツールバーで、「データベース」タブをクリックします。

2) マーチャントコレクションの検索と拡大（まだ作成していない場合は作成する）します。

3) 「プロパティの追加」をクリックし、プロパティの種類として「テキスト」を選択します。

4) 新しいプロパティに “Stripe Account Id “という名前を付けます。

マーチャントがStripeアカウントを接続するための画面の作成

1) マーチャントがプロフィールを編集する画面で、Stripe Connectコンポーネントを追加します。左ツールバーのプラスボタンをクリックします。次に、スクロールダウンしてStripe Paymentsセクションを展開し、Stripe Connectコンポーネントをクリックして画面上にドラッグします。

Stripe Connectコンポーネントの設定

1) まず、左パネルの上部にある「connect with Stripe」ボタンをクリックして、お客様のStripeアカウントをお客様のAdaloアプリに接続します。

2) Stripeアカウントでアプリの「リダイレクトURI」を設定します。

・AdaloのグレーのボックスからURIをコピーします。

・Stripeでは、Connect Settingsページに移動します。

・Integrationsセクションまでスクロールダウンし、Redirectsの行で「+ Add URI」ボタンをクリックします。

・ポップアップしたModalに、AdaloからコピーしたURIを貼り付けて、紫色の「Add URI」ボタンをクリックします。

3) Stripe Client Idを追加します。 StripeクライアントIDは、接続設定ページの、URIを追加したすぐ上にあります。これをコピーしてAdaloに貼り付けます。

4) Stripe Secret Keyを追加します。 Stripe Secret Keyは、Stripe API Keysのページで確認できます。Reveal live key token」ボタンをクリックして、これをコピーしてAdaloに貼り付けます。

5) マーチャントのStripe Account Idをデータベースのどこに保存するか、ドロップダウンを開いて、Current Merchant > Stripe Account Idを選択します。

コンシューマーペイメントがマーチャントアカウントに移動する設定

1) チェックアウト画面で、Stripe PaymentコンポーネントまたはACH Paymentコンポーネントを追加します。左のツールバーのプラスボタンをクリックし、下にスクロールしてStripe Paymentsセクションを展開し、標準のStripe PaymentコンポーネントまたはACH Paymentコンポーネントをドラッグして追加します。