Stripe Checkout を使って、静的ページにサクッと決済機能を導入する方法を整理します。
導入手順
Stripe のアカウントを作成し、管理画面にログインします。
開発環境でテストする場合は、「テストデータを表示」をオンにします。
※ 本番モードとテストモードでは、Checkoutのコードスニペットや商品のSKUが異なる点、注意してください。
1. 商品の作成
商品ページ で商品を作成します。都度決済・定期決済のどちらでもOKです。
2. Checkout コードの取得
作成した商品の詳細ページに移動し、「Checkout で使用」から成功時のURLとキャンセル時のURLをセットして、コードスニペットをコピーします。
そのコードスニペットを任意の静的ページに貼り付ければ、決済機能の導入は完了です。
これであっという間に、都度決済でも、定期決済でも受け付けられます。
3. Checkout のカスタマイズ
同コードスニペットでは、stripe.redirectToCheckout という JavaScript ライブラリを利用して、簡単な決済機能の導入を実現しています。
バックエンドなしでも簡単に導入できる一方、バックエンドなしだとカスタマイズできることは少ないです。
一応、client_reference_id フィールドを使えば、任意の値を渡すことができます。なお、この値はユニークでないといけないようです。
client_reference_id
A unique string to reference the Checkout session. This can be a customer ID, a cart ID, or similar. It is included in the checkout.session.completed webhook and can be used to fulfill the purchase.
client_reference_id を付与する場合のコード例は次のとおりです。 billingAddressCollection, submitType, locale も明記しています。
// `client_reference_id` を必ずユニークにする
const date = new Date(),
timestamp = Math.floor( date.getTime() / 1000 ).toString(),
randomStr = Math.random().toString(32).substring(2)
stripe.redirectToCheckout({
items: [{sku: 'sku_xxxxxxxxxxxx', quantity: 1}],
clientReferenceId: 'SOME_VALUE' + '_' + timestamp + '_' + randomStr,
billingAddressCollection: 'required',
submitType: 'pay',
locale: 'ja',
// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: 'YOUR_SUCCESS_URL',
cancelUrl: 'YOUR_CANCEL_URL',
})
税率は適用できない
僕の調べた限り、静的ページのみで Stripe Checkout を利用する場合、税率の適用はできません。なので、Stripe の管理画面で消費税率の設定をしても、商品もしくはプランの本体価格のみでの決済になります。
4. 独自メールドメインの設定（任意）
顧客へのメール通知を xxx@stripe.com からではなく、独自メールドメインから行いたい場合、次の設定が必要です。
管理画面 > 設定 > メールで、ドメインを追加します。
表示されるDNSレコード（TXT・CNAME）の値を独自ドメインのDNSに追加します。
設定は以上です。
なお、TXT レコードは所有権確認用ですが、上記設定後にこの値を変更すると、Stripe から
Urgent: There’s a problem with your custom email domain
We'll no longer be able to send emails from your custom domain in 2 days
というメールが届きます。
なので、別のサービスの所有権確認などで、TXT レコードの値を変更する必要がある場合は、その対応が終わった後すみやかに、Stripe が求める値に戻さないといけません。