Meses sin intereses によるカード支払いを受け付ける

さまざまな Stripe 製品で Meses sin intereses を使用してクレジットカード支払いを受け付ける方法をご紹介します。

分割払い (Meses sin intereses) は、メキシコの消費者向けクレジットカードの機能であり、顧客は複数の請求書明細に購入を分割できます。通常の 1 回限りの支払いと同様に、手数料を差し引いた支払い額を受け取り、顧客の銀行が時間をかけて代金を回収します。

分割払いを利用できる取引とカードの種類には制限があります。要件をご確認ください。

分割払いによる支払いを受け付ける際には、標準のクレジットカード取引手数料に追加の手数料を申し受けます。

分割払いは、さまざまな Stripe 製品で有効にすることができます。お客様の実装に適した手順を以下から選択してください。

Payment Intents API を導入する

Payment Intents API を使用して分割払いを受け付けることができます。クライアント側で支払いの詳細と分割払いプラン情報を収集し、サーバー側で支払いを完了する必要があります。

クライアント側で支払い方法の詳細を収集する
サーバー側で分割払いプランを取得する
クライアント側で分割払いプランを選択する
サーバー側で PaymentIntent を確定

クライアント側で支払い方法の詳細を収集する

The Payment Intents API works with Stripe.js & Elements to securely collect payment information (for example, credit card details) on the client side. To get started with Elements, include the following script on your pages. This script must always load directly from js.stripe.com to remain PCI compliant—you can’t include it in a bundle or host a copy of it yourself.

<script src="https://js.stripe.com/v3/"></script>

To securely collect card details from your customers, Elements creates Stripe-hosted UI components for you that we place into your payment form, rather than you creating them directly. To determine where to insert these components, create empty DOM elements (containers) with unique IDs within your payment form.

index.html
<div id="details">
  <input id="cardholder-name" type="text" placeholder="Cardholder name">
  <!-- placeholder for Elements -->
  <form id="payment-form">
    <div id="card-element"></div>
    <button id="card-button">Next</button>
  </form>
</div>

次に、Stripe オブジェクトのインスタンスを作成し、最初のパラメーターとして公開可能な API キーを指定してから、Elements オブジェクトのインスタンスを作成します。新しく作成したオブジェクトを使用して、ページ内の関連するプレースホルダーにカード要素をマウントします。

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

最後に、クライアント側で stripe.createPaymentMethod を使用してカード詳細を収集し、ユーザーが送信ボタンをクリックしたときに PaymentMethod を作成します。

client.js
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 の ID を使用して、新しい PaymentIntent を作成します。payment_method_options.card.installments.enabled=true を設定して、この支払いで分割払いを使用できるようにします。利用可能なプランをクライアントに送信して、顧客が支払いに使用するプランを選択できるようにします。

注

この時点では、ユーザーが分割払いで支払うかどうかがわからないため、ここでは PaymentIntent を確定しないでください (言い換えると、プロパティの確定を設定しないでください)。

PaymentIntent オブジェクトには、payment_method_options.card.installments.available_plans の PaymentMethod に使用可能な分割払いプランが一覧表示されます。

{
  "id": "pi_1FKDPTJXdud1yP2PpUXNgq0V",
  "object": "payment_intent",
  "amount": 3099,
...
  "payment_method_options": {
    "card": {
      "installments": {
        "enabled": true,
        "plan": null,
        "available_plans": [
          {
            "count": 3,
            "interval": "month",
            "type": "fixed_count"
          },

クライアント側で分割払いプランを選択する

顧客が希望の分割払いプランを選択できるようにします。

index.html
<div id="plans" hidden>
  <form id="installment-plan-form" >
    <label><input id="immediate-plan" type="radio" name="installment_plan" value="-1" />Immediate</label>
    <input id="payment-intent-id" type="hidden" />
  </form>
  <button id="confirm-button">Confirm Payment</button>
</div>

<div id="result" hidden>
  <p id="status-message"></p>
</div>

client.js
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;
  }
};

選択したプランをサーバーに送信します。

client.js
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 を確認して支払いを確定し、注文のフルフィルメントを実行します。

サーバーからの応答は、PaymentIntent と、結果として生じる支払いの両方でプランが選択されたことを示します。

{
  "id": "pi_1FKDPFJXdud1yP2PMSXLlPbg",
  "object": "payment_intent",
  "amount": 3099,
...
  "charges": {
    "data": [
      {
        "id": "ch_1FKDPHJXdud1yP2P2u79mcIX",
        "object": "charge",
        "amount": 3099,
        "payment_method_details": {
          "card": {
            "installments": {
              "plan": {
                "count": 3,
                "interval": "month",
                "type": "fixed_count"
              }
            },

Manually remove installment plan

After an installment plan is set on a PaymentIntent, it remains until you remove it.

For example, consider the case where a customer’s card declines when trying to pay with installments on their first card, then enters a second card that doesn’t support installments. The PaymentIntent confirmation fails because the installments aren’t supported on the card.

You must explicitly unset payment_method_options[card][installments][plan] when confirming the PaymentIntent again to indicate the absence of an installment plan.

カスタム設定

Stripe ダッシュボードの支払い方法の設定ページを使用して、分割払いの設定をカスタマイズすることができます。

支払い方法の設定ページには、分割払いを有効または無効にするオプションがあります。この設定を使用すると、Payment Links や Checkout など、ノーコードの支払い方法で分割払いを有効にすることができます。

また、支払い方法の設定ページでは、提供する特定の月次プランと、各プランの最低取引金額と最高取引金額を設定することもできます。これらのプラン構成は、すべての既存の分割払いの組み込みに適用されます。

組み込みをテストする

組み込みのテストには、以下のカードを使用できます。

番号	説明
	3、6、9、12、18、24 カ月の分割払いプランが使用可能
	利用できる分割払いプランはありません。