# Stripe Connect

## 開始する前に

* [Stripe](https://stripe.com) アカウントを作成し、[Stripe Connect](https://help.adalo.com/ja/component-basics/marketplace-components/stripe/marketplace-payments/set-up-your-stripe-account-for-stripe-connect) に設定し、必要な検証を完了していることを確認してください。
* コンポーネントが正しく機能するためには、**ユーザーがログインしている必要があります**。

## 手順

### Stripe Connect コンポーネントをアプリに追加する

1. "+" ボタンをクリックして追加パネルを開きます。
2. 下にスクロールして *Installed* を選択します。
3. Stripe Connect コンポーネントを希望の画面にドラッグします。できれば、商人がプロフィールを編集できる画面に配置してください。

{% hint style="warning" %}
マーケットプレイメント支払いコンポーネントを使用するアプリでは、Stripe Connect コンポーネントを**必ず**設定する必要があります。別の商人アプリを使用して商人データを収集する場合でも同様です。
{% endhint %}

### Connect コンポーネントを構成する

1. Stripeと接続するために Connect with Stripe ボタンをクリックします。
2. コンポーネントから URI をコピーします: <https://stripe-v3.adalo.com/stripecb>
3. [Stripe ダッシュボード | Connect 設定](https://dashboard.stripe.com/settings/connect) に移動します。
4. 画面下部の <img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-9ec3e61346c483a6362ba7a0ba3b6670a6e43221%2FStripe%20Add%20URI%20Button?alt=media" alt="" data-size="line"> をクリックして URI を貼り付け、保存します。

   <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e5752c952450f8a544e1cd6de70f31f92a5a3403%2FScreenshot%202024-12-04%20at%209.20.58%E2%80%AFAM.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>
5. Live モードのクライアントIDをコピーします（Live モードとテストモードでは異なります）。
6. Connect コンポーネントの ***Stripe Client ID*** の下にクライアントIDを貼り付けます。
7. [Stripe ダッシュボード | API キー](https://dashboard.stripe.com/apikeys) から Secret キーと Publishable キーを追加します。
   * テストモードAPIキーはテストモードクライアントIDとのみ動作します。
8. Stripe アカウントIDの下に：
   * マーチャントのStripeアカウントIDを後でMagicTextを使用してアクセスできるように、データベース内の保存場所を選択します。

### テストモード

1. Stripe [ダッシュボード | Connect 設定](https://dashboard.stripe.com/test/settings/connect) を開きます。
2. 画面下部までスクロールしてテストモードをオンにします。

   <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-23114126ebe8832827dcbe97524eb472c4d3ffcf%2FStripe%20Viewing%20Test%20Data%20Button?alt=media" alt=""><figcaption></figcaption></figure>
3. <img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-9ec3e61346c483a6362ba7a0ba3b6670a6e43221%2FStripe%20Add%20URI%20Button?alt=media" alt="" data-size="line"> をクリックして、AdaloリダイレクトURIを追加します。

   <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e5752c952450f8a544e1cd6de70f31f92a5a3403%2FScreenshot%202024-12-04%20at%209.20.58%E2%80%AFAM.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>
4. テストモードクライアントIDをコピーし、Connectコンポーネントの *Stripe Client ID* セクションに貼り付けます。
5. StripeテストSecretキーとテストPublishableキーをConnectコンポーネントに入力します。
   * [Stripe | APIキーのドキュメント](https://stripe.com/docs/keys) が、Stripeアカウントでの設定方法を案内します。
6. プレビューアを開いて、Stripe Connectフローを完了します。

### テストが成功した場合

Connectコンポーネントのテストが完了し、本番環境に移行する際は、Secret Key、Publishable Key、およびClient IDをライブモードの認証情報に変更する必要があります。

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿する際は、この記事へのリンクも貼り付けてください！