# 分割払いのカード決済への対応 さまざまな Stripe プロダクトで分割払いによるクレジットカード決済に対応する方法をご紹介します。 分割払いは、日本におけるクレジットカード決済の一種であり、顧客は請求書を複数回に分けて支払うことができます。売り手側は通常のカード支払いと同様に売上全額を一度に受け取れる一方、カード会社はカード保有者の信用に基づき、顧客から時間をかけて徐々に売上を回収します。 分割払いを利用できる取引とカードの種類には制限があります。[要件](https://docs.stripe.com/payments/jp-installments.md#requirements)をご確認ください。 分割払いは、さまざまな Stripe プロダクトで有効にすることができます。実装に適した手順を以下から選択してください。 # Stripe がオンラインで提供するページ > This is a Stripe がオンラインで提供するページ for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/jp-installments/accept-a-payment?payment-ui=checkout. ## Stripe Checkout での分割払い [Checkout](https://docs.stripe.com/payments/checkout.md) を使用すると、Stripe がホストする安全な支払いページを作成できます。このページにより、支払いを素早く回収できるようになります。複数のデバイスで機能するため、購入完了率の引き上げに役立ちます。Checkout では、ローコードで決済を受け付けられます。 顧客は Checkout を使用して、カード (分割払いあり / なし) や、Checkout に対応した他の決済手段で支払います。 ## Checkout のドキュメントを確認する Stripe Checkout では、分割払いを回収できます。Checkout の設定については、[クイックスタート](https://docs.stripe.com/checkout/quickstart.md)を参照してください。 ## 新しい Checkout セッションを作成する [動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用する場合、分割払いは自動的に表示されます。そうでない場合は、以下の例に示すように、分割払いを有効にして新しい Checkout セッションを作成します。自社の価格オブジェクトに置き換えてください。 > 分割払いは `payment` モードでのみ機能し、`setup` モードや `subscription` モードでは機能しません。 ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode "success_url=https://example.com/success" \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=3" \ -d mode=payment \ -d "payment_method_options[card][installments][enabled]=true" ``` ## Checkout にリダイレクトする セッションを作成したら、CheckoutSession で返された Checkout ページの URL に顧客をリダイレクトします。 ## See also - [Checkout 導入ガイド](https://docs.stripe.com/checkout/quickstart.md) - [Checkout Sessions (セッション)](https://docs.stripe.com/api/checkout/sessions.md) - [Payment Intents (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) # 高度な連携機能 > This is a 高度な連携機能 for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/jp-installments/accept-a-payment?payment-ui=elements. ## Payment Element での分割払い [Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用すると、カスタマイズ可能な支払いフォームをウェブサイトに埋め込むことができます。 顧客は Payment Element を使用して、カード (分割払いあり / なし) や、Payment Element が対応する他の決済手段で支払います。 ## Payment Element のドキュメントを確認する Payment Element を使用すると、分割払いを回収できます。Payment Element の設定については、[クイックスタート](https://docs.stripe.com/payments/quickstart.md?platform=web)を参照してください。 ## PaymentIntent を作成する [動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用する場合、分割払いは自動的に表示されます。そうでない場合は、以下の例に示すように、PaymentIntent を作成する際に分割払いを有効にします。 ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=100000 \ -d currency=jpy \ -d "payment_method_options[card][installments][enabled]=true" ``` PaymentIntent を作成したら、その [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) をクライアントに返します。 > 動的な決済手段を使用する場合は、`payment_method_options[card][installments][enabled]` を設定しないでください。動的な決済手段が有効な場合に `false` に設定すると、エラーが発生することがあります。 ## Stripe Elements を初期化する client secret を指定して Stripe Elements を初期化すると、Payment Element は分割払いが使用中であることを認識できます。 ## 支払いを完了する 顧客が支払いボタンをクリックしたら、Payment Element を指定して [confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を呼び出し、支払い完了後に Stripe がユーザーをリダイレクトする場所を示す [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を渡します。 [`processing_error`](https://docs.stripe.com/declines/codes.md#processing_error) または [`transaction_not_allowed`](https://docs.stripe.com/declines/codes.md#transaction_not_allowed) の支払い拒否が発生した場合、選択されたプランがカード発行会社によってサポートされていない可能性があります。別のプランで再試行するか、分割払いなしで再試行するよう顧客に指示します。 ## See also - [Payment Element 導入ガイド](https://docs.stripe.com/payments/quickstart.md) - [Payment Element API リファレンス](https://docs.stripe.com/js/element/payment_element) - [Payment Intents (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) # ダイレクト API > This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/jp-installments/accept-a-payment?payment-ui=direct-api. ## Payment Intents API を導入する [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) を使用して分割払いを受け付けることができます。クライアント側で支払いの詳細と分割払いプラン情報を収集し、サーバー側で支払いを完了する必要があります。 Payment Intents API を使用して分割払いを受け付ける決済システムの概要を示す図 (See full diagram at https://docs.stripe.com/payments/jp-installments/accept-a-payment) 1. [クライアント側で支払い方法の詳細を収集する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#collect-payment-method) 1. [サーバー側で分割払いプランを取得する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#retrieve-installment-plans) 1. [クライアント側で分割払いプランを選択する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#select-plan) 1. [サーバー側で PaymentIntent を確定](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#confirm-payment) ## クライアント側で支払い方法の詳細を収集する Payment Intents API は [Stripe.js および Elements](https://docs.stripe.com/payments/elements.md) と連携して、クライアント側で決済情報 (クレジットカードの詳細など) を安全に収集します。Elements を使ってみるには、ページに次のスクリプトを含めます。このスクリプトは、*PCI への準拠* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business)を維持するために、常に **js.stripe.com** から直接読み込む必要があります。バンドルに含めたり、そのコピーを自分でホストしたりすることはできません。 ```html ``` 顧客からカード情報を安全に収集するために、Elements は Stripe がホストする UI コンポーネントを決済フォームに配置します。ご自身で作成する必要はありません。これらのコンポーネントの挿入先を決定するには、一意の ID を持つ空の DOM Elements (コンテナー) を決済フォーム内に作成します。 ```html
``` 次に、[Stripe オブジェクト](https://docs.stripe.com/js.md#stripe-function)のインスタンスを作成し、最初のパラメーターとして公開可能な [API キー](https://docs.stripe.com/keys.md)を指定してから、[Elements オブジェクト](https://docs.stripe.com/js.md#stripe-elements)のインスタンスを作成します。新しく作成したオブジェクトを使用して、ページ内の関連するプレースホルダーにカード要素を[マウント](https://docs.stripe.com/js.md#element-mount)します。 ```javascript const stripe = Stripe('<>'); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element'); ``` 最後に、クライアント側で [stripe.createPaymentMethod](https://docs.stripe.com/js.md#stripe-create-payment-method) を使用してカード詳細を収集し、ユーザーが送信ボタンをクリックしたときに *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) を作成します。 ```javascript const cardholderName = document.getElementById('cardholder-name'); const form = document.getElementById('payment-form'); form.addEventListener('submit', async (ev) => { ev.preventDefault(); const {paymentMethod, error} = await stripe.createPaymentMethod( 'card', cardElement, {billing_details: {name: cardholderName.value}}, ); if (error) { // Show error in payment form } else { // Send paymentMethod.id to your server (see Step 2) const response = await fetch('/collect_details', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({payment_method_id: paymentMethod.id}), }); const json = await response.json(); // Handle server response (see Step 3) handleInstallmentPlans(json); } }); ``` ## サーバー側で分割払いプランを取得する 利用可能な分割払いプランを取得するには、要求を受信するエンドポイントをサーバーに設定します。 クライアント側で作成した [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) の ID を使用して、[新しい PaymentIntent を作成](https://docs.stripe.com/payments/payment-intents.md)します。`payment_method_options.card.installments.enabled=true` を設定して、この支払いで分割払いを使用できるようにします。利用可能なプランをクライアントに送信して、顧客が支払いに使用するプランを選択できるようにします。 > この時点では、ユーザーが分割払いで支払うかどうかがわからないため、ここでは PaymentIntent を*確定* (Confirming a PaymentIntent indicates that the customer intends to pay with the current or provided payment method. Upon confirmation, the PaymentIntent attempts to initiate a payment)しないでください (言い換えると、プロパティの[確定](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm)を設定しないでください)。 #### curl ```bash curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -d "payment_method"="pm_card_mx" \ -d "amount"=100000 \ -d "currency"="jpy" \ -d "payment_method_options[card][installments][enabled]"="true" ``` PaymentIntent オブジェクトには、`payment_method_options.card.installments.available_plans` の PaymentMethod に使用可能な分割払いプランが一覧表示されます。 ```json { "id": "pi_1FKDPTJXdud1yP2PpUXNgq0V", "object": "payment_intent", "amount": 100000, ... "payment_method_options": { "card": { "installments": { "enabled": true, "plan": null, "available_plans": [ { "count": 3, "interval": "month", "type": "fixed_count" }, { "count": 6, "interval": "month", "type": "fixed_count" }, { "count": 9, "interval": "month", "type": "fixed_count" }, { "count": 12, "interval": "month", "type": "fixed_count" }, { "count": 18, "interval": "month", "type": "fixed_count" }, { "count": 24, "interval": "month", "type": "fixed_count" } }, "request_three_d_secure": "automatic" } }, ... } ``` ## クライアント側で分割払いプランを選択する 顧客が希望の分割払いプランを選択できるようにします。 ```html ``` ```javascript const selectPlanForm = document.getElementById('installment-plan-form'); let availablePlans = []; const handleInstallmentPlans = async (response) => { if (response.error) { // Show error from server on payment form } else { // Store the payment intent ID. document.getElementById('payment-intent-id').value = response.intent_id; availablePlans = response.available_plans; // Show available installment options availablePlans.forEach((plan, idx) => { const newInput = document.getElementById('immediate-plan').cloneNode(); newInput.setAttribute('value', idx); newInput.setAttribute('id', ''); const label = document.createElement('label'); label.appendChild(newInput); label.appendChild( document.createTextNode(`${plan.count} ${plan.interval}s`), ); selectPlanForm.appendChild(label); }); document.getElementById('details').hidden = true; document.getElementById('plans').hidden = false; } }; ``` 選択したプランをサーバーに送信します。 ```javascript const confirmButton = document.getElementById('confirm-button'); confirmButton.addEventListener('click', async (ev) => { const selectedPlanIdx = selectPlanForm.installment_plan.value; const selectedPlan = availablePlans[selectedPlanIdx]; const intentId = document.getElementById('payment-intent-id').value; const response = await fetch('/confirm_payment', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ payment_intent_id: intentId, selected_plan: selectedPlan, }), }); const responseJson = await response.json(); // Show success / error response. document.getElementById('plans').hidden = true; document.getElementById('result').hidden = false; var message; if (responseJson.status === "succeeded" && selectedPlan !== undefined) { message = `Success! You made a charge with this plan:${ selectedPlan.count } ${selectedPlan.interval}`; } else if (responseJson.status === "succeeded") { message = "Success! You paid immediately!"; } else { message = "Uh oh! Something went wrong"; } document.getElementById("status-message").innerText = message; }); ``` ## サーバー側で PaymentIntent を確定する 別のサーバーエンドポイントを使用して、PaymentIntent を確認して支払いを確定し、注文のフルフィルメントを実行します。 #### curl ```bash curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \ -u <>: \ -d "payment_method_options[card][installments][plan][type]"="fixed_count" \ -d "payment_method_options[card][installments][plan][interval]"="month" \ -d "payment_method_options[card][installments][plan][count]"=3 ``` サーバーからの応答は、PaymentIntent と、結果として生じる支払いの両方でプランが選択されたことを示します。 ```json { "id": "pi_1FKDPFJXdud1yP2PMSXLlPbg", "object": "payment_intent", "amount": 100000, ... "charges": { "data": [ { "id": "ch_1FKDPHJXdud1yP2P2u79mcIX", "object": "charge", "amount": 100000, "payment_method_details": { "card": { "installments": { "plan": { "count": 3, "interval": "month", "type": "fixed_count" } }, }, ... }, ... } ], }, ... "payment_method_options": { "card": { "installments": { "enabled": true, "plan": { "count": 3, "interval": "month", "type": "fixed_count" }, "available_plans": [ ... ] } } } } ``` ## 分割払いプランを手動で削除する 分割払いプランは、一度 PaymentIntent に設定されると、削除するまで残ります。 たとえば、顧客の 1 枚目のカードを使用して分割払いで支払おうとしたときにカードが拒否され、分割払いに対応していない 2 枚目のカードを入力した場合を考えてみましょう。カードで分割払いがサポートされていないため、PaymentIntent の確定は失敗します。 分割払いプランがないことを示すため、PaymentIntent を再度確定するときに、`payment_method_options[card][installments][plan]` の設定を明示的に解除する必要があります。 # 請求書 > This is a 請求書 for when payment-ui is invoices. View the full page at https://docs.stripe.com/payments/jp-installments/accept-a-payment?payment-ui=invoices. ## Invoicing と連携する [Invoicing](https://docs.stripe.com/invoicing.md) で分割払いを受け付けることができます。 請求書には、価格、数量、税金を含む、商品およびサービスの品目リストが記載されます。請求書は、支払いを回収するためのツールとしても機能します。 顧客は Checkout を使用して、カード (分割払いあり / なし) や、Checkout に対応しているその他の決済手段で支払うことができます。 ## Invoicing で分割払いを有効にする Invoicing API または Stripe ダッシュボードを使用して、分割払いによる支払いの受け付けが可能な請求書を作成します。 さらにカスタマイズする必要がある場合は、Invoicing API を使用することをお勧めします。ノーコードで Invoicing を設定したい場合は、Stripe ダッシュボードを使用してください。 > 分割払いは、個々の請求書に対して有効にすることができますが、サブスクリプションには対応していません。 ## Invoicing API を使用して分割払いの請求書を設定する Stripe Invoicing を使用すると、分割払いによる支払いを回収できるようになります。この[連携ガイド](https://docs.stripe.com/invoicing/integration.md)を参照して、請求書を設定できます。 1. [Invoicing のドキュメントを確認する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#review-invoicing-documentation) 1. [新しい請求書を作成する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#create-new-invoice) 1. [クライアント側で分割払いプランを選択する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#select-plan) 1. [選択した分割払いプランを取得する](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#retrieve-plan) ## Invoicing のドキュメントを確認する [Invoicing API 連携ガイド](https://docs.stripe.com/invoicing/integration.md)と Invoicing API ドキュメントを確認して、汎用的な請求書を作成・送付する方法について理解を深めます。 ## 新しい請求書を作成する 次の例のように、有効な API キーと [Customer (顧客)](https://docs.stripe.com/api/customers/object.md) オブジェクトおよび [Price (価格)](https://docs.stripe.com/api/prices.md) オブジェクトを使用して新しい請求書を作成します (注:自社の有効な API キーと顧客オブジェクトを置き換える必要があります)。 > 分割払いは、`send_invoice` モードに設定された `collection_method` でのみ機能し、`charge_automatically` モードでは機能しません。 ```curl curl https://api.stripe.com/v1/invoiceitems \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d "pricing[price]={{PRICE_ID}}" ``` ```curl curl https://api.stripe.com/v1/invoices \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d collection_method=send_invoice \ -d days_until_due=30 \ -d pending_invoice_items_behavior=include \ -d "payment_settings[payment_method_options][card][installments][enabled]=true" ``` ## クライアント側で分割払いプランを選択する オンラインの請求書ページには、顧客が入力したクレジットカード番号に基づいて利用可能な分割払いのオプションが表示されます。 顧客が**分割払いで支払う**をクリックすると、デフォルトで選択されている分割払いプランのオプションがリストの先頭に表示されます。 顧客は、オンライン請求書のインターフェイスで希望の分割払いオプションを選択できます。 *サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)では、[テストカード番号](https://docs.stripe.com/payments/jp-installments/accept-a-payment.md#testing)を使用して、さまざまな動作をテストすることができます。 ## 選択した分割払いプランを取得する 選択した分割払いプランは、ダッシュボードと API の両方で利用できます。ダッシュボードで支払いをクリックし、**支払い情報**までスクロールします。分割払いを使用した場合は、プランの期間が表示されます。 選択された分割決済プランは PaymentIntent でも利用できます。ユーザーが決済を完了した後、Invoice オブジェクトから PaymentIntent の ID を取得し (例:“payment_intent”: “pi_…”)、それを使用して PaymentIntent オブジェクトを取得し、顧客が選択した分割決済プランを確認します。 ```curl curl https://api.stripe.com/v1/invoices/{{INVOICE_ID}} \ -u "<>:" ``` Payment Intent ID を使用して PaymentIntent オブジェクトを取得します。 ```curl curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}} \ -u "<>:" ``` 選択した分割払いプランが PaymentIntent オブジェクトに表示されます。 ```json { "id": "pi_...", "object": "payment_intent", "amount": 100000, ... "charges": { "data": [ { "id": "ch_...", "object": "charge", "amount": 100000, "payment_method_details": { "card": { "installments": { "plan": { "count": 3, "interval": "month", "type": "fixed_count" } }, }, ... }, ... } ], }, ... "payment_method_options": { "card": { "installments": { "enabled": true, "plan": { "count": 3, "interval": "month", "type": "fixed_count" }, "available_plans": [] } } } } ``` ## Stripe ダッシュボードを使用して分割払いの請求書を送付する Invoicing で分割払いを設定するには、[Stripe ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)の「決済手段の設定」ページにアクセスします。 請求書は、[Stripe ダッシュボード](https://dashboard.stripe.com/customers)で簡単に作成できます。 1. [顧客](https://dashboard.stripe.com/customers)ページで、**顧客を追加**をクリックして新しい顧客を作成し、通貨を **JPY - 日本円**に設定します。 1. 新しく作成した顧客をクリックして、請求書などの情報を表示します。 1. 「顧客の概要」ページで、**アクション**をクリックして**請求書を作成**を選択し、その顧客の新しい請求書を設定します。 1. 請求書の作成ページの**支払い**セクションで、カードが有効になっていて、さらに**クレジットカードの分割払いを許可する**オプションも有効になっていることを確認します。 1. **アイテム** セクションの **アイテムを検索または追加** をクリックして、商品を請求書に追加します。 1. 「請求書の作成」ページの右上隅にある**請求書をレビュー**をクリックして請求書を確定し、顧客への送付日をスケジュールします 1. 顧客の請求書のステータスは、「顧客の概要」ページの**請求書**セクションで確認できます。 顧客は請求書をメールで受け取ります。請求書には、購入の支払いを完了するための手順が記載されています。 請求書の表示方法は、メールの本文に直接掲載、PDF としてメールに添付、オンラインの請求書ページの 3 つを利用できます。 顧客の概要ページで、いつでも特定の請求書のステータスを確認することができます。 # ノーコード > This is a ノーコード for when payment-ui is payment-links. View the full page at https://docs.stripe.com/payments/jp-installments/accept-a-payment?payment-ui=payment-links. ## Payment Links との連携 Payment Links で分割払いを受け付けることができます。 [Payment Links](https://stripe.com/payments/payment-links) を使用する場合、支払いページを作成し、そのページへのリンクを顧客に伝えます。コーディングは不要で、ソーシャルメディアやメールなど、あらゆるチャネルで何度でもリンクを共有できます。 また、Payment Links API を使用して、[プログラムで決済用リンクを作成する](https://docs.stripe.com/payment-links/create.md#api)こともできます。 ## Payment Links での分割払いの管理 Payment Links の分割払いは、[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)の決済手段の設定ページで有効または無効にできます。分割払いはデフォルトで有効になっています。 ## 実装内容をテストする 以下のカードを使用して、実装内容をテストできます。 ### 支払い成功のテスト #### クレジットカード番号 | ブランド | 番号 | | ---------- | ---------------- | | Visa | 4000003920000003 | | Mastercard | 5200003920000008 | | JCB | 3530111333300000 | | ダイナースクラブ | 36000039200009 | #### PaymentMethods | ブランド | PaymentMethod | | ---------- | ----------------------- | | Visa | `pm_card_jp` | | Mastercard | `pm_card_jp_mastercard` | | JCB | `pm_card_jcb` | | ダイナースクラブ | `pm_card_jp_diners` | ### 支払い失敗のテスト カードが日本で発行された有効なクレジットカードであるにもかかわらず、カード発行会社が取引を拒否することがあります。以下のカード番号を使用して、サポートされている分割払いプランのリストを取得できますが、取引は `card_declined` エラーにより失敗します。 #### クレジットカード番号 | ブランド | 番号 | | ---- | ---------------- | | Visa | 4000003920000029 | #### PaymentMethods | ブランド | 番号 | | ---- | -------------------------------------- | | Visa | `pm_card_jp_visa_installmentsDeclined` |