Stripe Elements でカード決済を受け付ける方法

1. 1

   本番環境で API キーを開く

   dashboard.stripe.com/apikeys を開き、サンドボックスではなく本番環境になっていることを確認します。テスト用のキーでもエラーにはならず、存在しないお金で予約が支払い済みになってしまいます。

2. 2

   公開可能なキーをコピーする

   Standard keys で Publishable key をコピーします。pk_live_ で始まるキーです。

3. 3

   シークレットキーをコピーする

   Secret key をコピーします（隠れている場合は Reveal live key をクリック）。sk_live_ で始まるキーです。他人に知られないようにしてください。このキーがあれば、あなたの名前でカードに請求できます。

1. 1

   イベントの送信先を作成する

   本番環境のまま dashboard.stripe.com/webhooks を開き、Create an event destination をクリックします。

2. 2

   Your account と Snapshot を選ぶ

   Your account と、ペイロード形式の Snapshot を選びます。Stripe が推奨する Thin イベントは TourTask では読み取れません。

3. 3

   イベントを選ぶ

   payment_intent.succeeded を選び、ほかのイベントは選びません。

4. 4

   Webhook エンドポイントを選ぶ

   Continue をクリックし、送信先のタイプとして Webhook endpoint を選びます。

5. 5

   TourTask のアドレスを入力する

   Continue をクリックし、上の TourTask のアドレスを Endpoint URL に貼り付けて、Create destination をクリックします。

6. 6

   署名シークレットをコピーする

   送信先のページで Reveal secret をクリックし、署名シークレットをコピーします。whsec_ で始まる値です。

1. 1

   Stripe Elements のカードを開く

   構成 → 支払いオプション を開き、オンライン決済 → 決済ゲートウェイ で Stripe Elements のカードをクリックします。見つからない場合は、カードの下の すべてのゲートウェイを表示 を選びます。

2. 2

   国と通貨を選ぶ

   国 で Stripe Elements アカウントとその銀行口座がある国を、通貨 で旅行者が支払う通貨を選び、追加 をクリックします。あとでどちらかを変更するには、取り除く で Stripe Elements を削除してから、もう一度追加します。

3. 3

   API 認証情報を入力する

   認証 に、それぞれの入力欄があります。
   APIキー
   公開可能なキー
   Webhook シークレット

   各欄は、欄の外をクリックすると保存されます。

4. 4

   Stripe Elements を有効化する

   すべての欄を入力したら、有効化 をクリックします。カードが アクティブ になり、旅行者は予約ページで Stripe Elements で支払えるようになります。支払いはすべてご自身の Stripe Elements アカウントへ直接入金され、TourTask があなたの資金を預かることはありません。

TourTask には Stripe Elements のテストモードがなく、Stripe の規約では実際のカードによるテスト決済が禁止されています。

1. 1

   カード入力フォームを開く

   ご自身の予約ページでツアーを予約し、カード払いを選ぶと、Stripe のカード入力フォームが表示されます。支払わずにページを閉じます。

2. 2

   テスト予約をキャンセルする

   TourTask でその予約を開き、予約をキャンセルするをクリックします。

3. 3

   最初の支払いを確認する

   旅行者がカードで支払うと、予約は支払い済みと表示され、支払いが Stripe ダッシュボードに表示されます。

4. 4

   Webhook を確認する

   Stripe で送信先の Event deliveries タブを開くと、payment_intent.succeeded が Delivered と表示されています。

Apple Pay と Google Pay はそれぞれ独立したゲートウェイで、Stripe Elements と同じ 2 つのキーを使って同じように設定します。それぞれ専用のアドレスに専用の Webhook エンドポイントが必要で、そのエンドポイントの署名シークレットを各ゲートウェイの Webhook シークレットに入力します。