# Stripe決済

*Skill Level: Intermediate*

## 開始する前に

* [Stripe](https://stripe.com) アカウントを作成し、ビジネス情報と銀行口座情報を追加し、必要な検証を完了していることを確認してください。
* コンポーネントが機能するためには、**ユーザーがログインしている必要があります**。

## 手順

### Stripe支払い

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-41e7abfd9e8b83d34fc3744b5dc229a6bae939d1%2FScreenshot%202019-06-14%2013.04.11.png?alt=media)

#### Stripeコンポーネントを追加する方法

1\) 「+」ボタンをクリックして追加パネルを開きます。

2\) *Installed* までスクロールダウンします。

3\) Stripe支払いコンポーネントをチェックアウト画面にドラッグアンドドロップします。

#### Stripe支払いコンポーネントを構成する方法

1. "Connect with Stripe" ボタンをクリックし、StripeアカウントをAdaloアカウントに接続するためのプロンプトに従い、Stripe資格情報を入力して接続します。
2. Stripe支払いセクションで:
   * ユーザーに請求する金額を入力します。これは全員に同じ金額でも構いませんし、Magic Textや[Custom Formula](https://help.adalo.com/ja/component-basics/how-to-create-a-custom-math-formula)を使用して変数金額を設定することもできます。
3. 請求の説明セクションで:
   * ユーザーのクレジットカード明細に表示されるべきテキストを入力します。"Current Product Name" などの Magic Text もここで使用できます。
4. レシートメールセクションで:
   * 購入の確認メールを受け取るべきユーザーのメールアドレスを指定する必要があります。これはあなたの[Stripeダッシュボード](https://dashboard.stripe.com/)で顧客を識別する方法でもあります。
5. 送信ボタンセクションで:
   * 送信ボタンのテキストとスタイルを編集し、次の画面にリンクするなどのアクションを追加したり、Stripe情報を取得してユーザーに関連付けるためのカスタムアクションを追加したりできます。
6. テストモードセクションで:
   * Stripeテストシークレットキーとテスト公開キーを入力し、トランザクションをテストするためにオン/オフを切り替えることができます。
   * この機能を使用するためには、[テストモード](https://app.gitbook.com/o/-Lha7TPH_T7jnvspjvYs/s/-LhGHkPsv15svPIU5I7C/~/changes/Xl1LOeoZLwaoJdDTMUQY/component-basics/marketplace-components/stripe/adding-payments-using-stripe-1)を構成してください。

{% hint style="info" %}
注意: Stripeは多くの国でサポートされていますが、すべての国でサポートされているわけではありません。最新のリストは[こちら](https://stripe.com/global)をご確認ください。
{% endhint %}

### テストモード

1. コンポーネントで *テストモード* をオンにします。
2. Stripeテストシークレットキーとテスト公開キーを支払いコンポーネントに入力します。
   * [Stripe | APIキーのドキュメント](https://stripe.com/docs/keys) が、Stripeアカウントでこれを設定する手順を案内します。
3. プレビューアを開き、通常通りの支払いフローを完了します。
4. テストしたいシナリオに適した[Stripe | テストモードカード](https://stripe.com/docs/testing#cards)を選択します。
5. カード情報を入力し、「今すぐ支払う」を選択します。

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

支払いコンポーネントのテストが完了し、本番環境に移行する場合は、テストモードを無効にする必要があります。

## ヘルプ

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