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

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

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

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

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

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

Payment Intents API を導入する

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

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

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

Payment Intents API は Stripe.js および Elements と連携して、クライアント側で決済情報 (クレジットカードの詳細など) を安全に収集します。Elements を使ってみるには、ページに次のスクリプトを含めます。このスクリプトは、PCI への準拠を維持するために、常に js.stripe.com から直接読み込む必要があります。バンドルに含めたり、そのコピーを自分でホストしたりすることはできません。

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

顧客からカード情報を安全に収集するために、Elements は Stripe がホストする UI コンポーネントを決済フォームに配置します。ご自身で作成する必要はありません。これらのコンポーネントの挿入先を決定するには、一意の ID を持つ空の DOM Elements (コンテナー) を決済フォーム内に作成します。

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"
              }
            },

分割払いプランを手動で削除する

分割払いプランは、一度 PaymentIntent に設定されると、削除するまで残ります。

たとえば、顧客の 1 枚目のカードを使用して分割払いで支払おうとしたときにカードが拒否され、分割払いに対応していない 2 枚目のカードを入力した場合を考えてみましょう。カードで分割払いがサポートされていないため、PaymentIntent の確定は失敗します。

分割払いプランがないことを示すため、PaymentIntent を再度確定するときに、payment_method_options[card][installments][plan] の設定を明示的に解除する必要があります。

カスタム設定

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

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

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

組み込みをテストする

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

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