サブスクリプションは、ユーザーが商品を利用するために継続的に支払う料金体系モデルです。この導入ガイドでは、Payment Element をレンダリングして、サブスクリプションを作成し、顧客のブラウザーから決済を確定できるカスタムの決済フローを作成する方法をご紹介します。
注意
この導入パスは、Automated Clearing Settlement System (ACSS) を使用する BLIK またはプレオーソリデビットに対応していません。
支払い方法の設定を表示して、サポートする支払い方法を有効にします。PaymentIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。
多くの顧客から決済を受け付けられるよう、Stripe では、カードやその他一般的な決済手段がデフォルトで有効になっていますが、ビジネスや顧客に適した追加の決済手段を有効にすることをお勧めします。プロダクトと決済手段のサポートについては決済手段のサポートを、手数料については料金体系ページをご覧ください。
サブスクリプションの場合、請求書設定と、サポートされる支払い方法を設定します。不一致や誤りがないように、請求書設定は Payment Element 設定と一致している必要があります。
Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。
Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。
構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を有効にしてください。
Stripe.js を設定する
Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。
購入ページで次の JavaScript を使用して、Stripe のインスタンスを作成します。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
Payment Element を決済ページに追加する
Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。
<form id="payment-form">
<div id="payment-element">
</div>
<button id="submit">Submit</button>
<div id="error-message">
</div>
</form>
上記のフォームが読み込まれたら、モード、金額、通貨を指定して Elements インスタンスを作成します。これらの値から、顧客に表示される支払い方法が決定されます。
次に、Payment Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。
注
Payment Element に渡される amount は、顧客がすぐに請求される内容を反映している必要があります。サブスクリプションの初回の分割払いのほか、サブスクリプションにトライアル期間が設定されている場合には 0 が示される場合があります。
const options = {
mode: 'subscription',
amount: 1099,
currency: 'usd',
appearance: {},
};
const elements = stripe.elements(options);
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。このフォームでは、顧客が選択した支払い方法で必要な決済の詳細のすべてが自動的に収集されます。
Elements プロバイダーを作成する際に Appearance (デザイン) オブジェクト を options に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。
住所を収集
デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。
ダッシュボードまたは Stripe CLI で商品とその価格を作成します。
この例では、「基本」と「プレミアム」という 2 つのサービスレベルオプションがある固定価格のサービスを使用しています。サービスレベルオプションごとに、1 つの商品と 1 つの継続価格を作成する必要があります (初期費用のような 1 回限りの支払いを追加する場合は、1 回限りの価格で 3 つ目の商品を作成します。わかりやすくするために、この例には 1 回限りの支払いを含めていません)。
この例では、各商品が 1 カ月間隔で請求されます。基本商品の価格は 5 USD で、プレミアム商品の価格は 15 USD です。
商品を追加ページに移動し、2 つの商品を作成します。商品ごとに 1 つの価格を追加し、それぞれに毎月の継続請求期間を設定します。
価格を作成したら、価格 ID を記録しておき、他のステップで使用できるようにします。価格 ID は、price_G0FvDp6vZvdwRZ のように表示されます。
準備が完了したら、ページ右上の本番環境にコピーボタンを使用して、サンドボックスから本番環境に商品を複製します。
Stripe では、各サブスクリプションに顧客が必要です。アプリケーションのフロントエンドで必要な顧客情報を収集し、それをバックエンドに渡します。
住所の詳細を収集する必要がある場合、Address Element を使用すると顧客の配送先住所や請求先住所を収集できます。詳細については、Address Element をご覧ください。
<form id="signup-form">
<label>
Email
<input id="email" type="text" placeholder="Email address" value="test@example.com" required />
</label>
<button type="submit">
Register
</button>
</form>
const emailInput = document.querySelector('#email');
fetch('/create-customer', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: emailInput.value,
}),
}).then(r => r.json());
サーバーで、Stripe の Customer オブジェクトを作成します。
curl https://api.stripe.com/v1/customers \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
顧客が決済フォームを送信したときに、サブスクリプションを使用して確認と決済のプロセスを円滑にします。サブスクリプションを作成するには、顧客と価格が必要です。
注
多通貨の価格を使用している場合、currency (通貨) パラメーターを使用して、サブスクリプションに使用する Price の通貨を指定します (currency パラメーターを省略すると、サブスクリプションは Price のデフォルトの通貨を使用します)。
サブスクリプションには、client secret が含まれています。 この値をクライアントに返し、Stripe.js がこれを使用して決済プロセスを安全に完了できるようにします。事前に支払いを回収しないサブスクリプション (無料トライアル期間があるサブスクリプションなど) では、pending_setup_intent からの client secret を使用します。
Stripe.api_key = 'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
stripe.confirmPayment、または stripe.confirmSetup を使用し、Payment Element の詳細を指定してサブスクリプションを確定します。confirm 関数に return_url を指定して、確定後に Stripe が顧客をリダイレクトする場所を示します。支払い方法によっては、顧客が return_url にリダイレクトされる前に発行会社/銀行のオーソリページなどの中間サイトにリダイレクトされます。 redirect を if_required に設定すると、リダイレクトベースの支払い方法で購入する顧客のみをリダイレクトできます。
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (submitBtn.disabled) {
return;
}
submitBtn.disabled = true;
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
const res = await fetch('/create-subscription', {
method: "POST",
});
const {type, clientSecret} = await res.json();
const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
const {error} = await confirmIntent({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
handleError(error);
} else {
}
});
導入を完成するには、以下を実行します。
- Webhook をリッスンする
- サービスへのアクセスを提供する
- 顧客によるサブスクリプションのキャンセルを許可する
詳細については、サブスクリプションの実装を構築するをご覧ください。