コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments
決済手段
支払いインターフェイス
決済シナリオ
店頭支払い
他の Stripe プロダクト

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

今後の支払いのために SEPA ダイレクトデビット詳細を保存する

将来の SEPA ダイレクトデビット支払いに備えて支払い方法の詳細を保存する方法を紹介します。

ページをコピー

注

Stripe の債権者 ID を使用して SEPA ダイレクトデビット支払いを処理する場合は、構築済みの Checkout ページを使用して、SEPA ダイレクトデビットの詳細を保存して、以降の使用に備えることをお勧めします。

Setup Intents API を使用して事前に支払い方法の詳細を収集し、後から最終的な金額や支払い日を決定します。この機能は、次の場合に使用します。

Stripe を設定する
サーバー側

まず、Stripe アカウントが必要です。今すぐご登録ください。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Customer を作成または取得する
サーバー側

以降の支払いに SEPA ダイレクトデビットの口座を再利用するには、その口座を Customer に関連付ける必要があります。

顧客がお客様のビジネスでアカウントを作成するときに、Customer オブジェクトを作成する必要があります。Customer オブジェクトの ID を、自社の内部的な顧客の表記に関連付けることにより、保存された支払い方法の詳細を後で取得して使用できます。顧客がアカウントを作成していない場合でも、すぐに Customer オブジェクトを作成し、後でこのオブジェクトを顧客のアカウントの内部表記に関連付けることができます。

新しい Customer を作成するか、または既存の Customer を取得して、この決済情報に関連付けます。サーバーに以下のコードを含め、新しい Customer を作成します。

Command Line
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

SetupIntent を作成する
サーバー側

SetupIntent (支払い方法設定インテント) は、お客様の意図を表し、以降の支払いに使用される顧客の支払い方法を設定する手順を追跡するオブジェクトです。SEPA ダイレクトデビットの場合、これには顧客からの同意書の収集と、IBAN の妥当性の確認が含まれます。

payment_method_types を sepa_debit に設定してサーバーに SetupIntent (支払い方法設定インテント) を作成し、Customer の id を指定します。

Command Line
curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"="sepa_debit" \
  -d "customer"="{{CUSTOMER_ID}}"

支払い方法の詳細と同意書承認を収集する
クライアント側

Stripe Elements を使用してクライアントで支払い情報を収集する準備ができました。Elements は、支払いの詳細を収集するための構築済み UI コンポーネントのセットです。

Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。組み込みを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。

HTTPS を使用せずに実装をテストできます。本番環境で決済を受け付ける準備が整ったら、HTTPS を有効化します。

Stripe Elements を設定する

Stripe Elements は Stripe.js の機能として自動的に使用可能になります。支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの head にそのスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。

payment_setup.html
<head>
  <title>Submit Payment</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

次の JavaScript を使用して、支払いページに Elements のインスタンスを作成します。

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

IBAN Element を追加および設定する

Elements には、決済フォーム内の配置場所が必要です。決済フォームで一意の ID を持つ空の DOM ノード (コンテナー) を作成します。また、顧客は SEPA Direct Debit mandate (SEPA ダイレクトデビット同意書) を読み、同意する必要があります。

以下に示す定型の承認用文書を表示し、顧客が黙示的にこの同意書に署名するようにしてください。

「Rocket Rides」はお客様の社名に置き換えます。

Authorization text template

By providing your payment information and confirming this payment, you authorise (A) and Stripe, our payment service provider, to send instructions to your bank to debit your account and (B) your bank to debit your account in accordance with those instructions. As part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. Your rights are explained in a statement that you can obtain from your bank. You agree to receive notifications for future debits up to 2 days before they occur.

コピー

支払い方法を設定すると、承認済みの同意書が作成されます。これらの規約を受け入れる際、顧客は黙示的に同意書に署名したため、フォームまたはメールを通じて、顧客にこれらの規約を伝える必要があります。

payment_setup.html
<form action="/form" method="post" id="setup-form">
  <div class="form-row inline">
    <div class="col">
      <label for="accountholder-name">
        Name
      </label>
      <input
        id="accountholder-name"
        name="accountholder-name"
        placeholder="Jenny Rosen"
        required
      />
    </div>

    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="jenny.rosen@example.com"
        required
      />
    </div>
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    -->
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <!-- Add the client_secret from the SetupIntent as a data attribute   -->
  <button id="submit-button" data-secret="{CLIENT_SECRET}">
    Set up SEPA Direct Debit
  </button>

  <!-- Display mandate acceptance text. -->
  <div id="mandate-acceptance">
    By providing your payment information and confirming this payment, you
    authorise (A) Rocket Rides and Stripe, our payment service provider
    and/or PPRO, its local service provider, to send instructions to your
    bank to debit your account and (B) your bank to debit your account in
    accordance with those instructions. As part of your rights, you are
    entitled to a refund from your bank under the terms and conditions of
    your agreement with your bank. A refund must be claimed within 8 weeks
    starting from the date on which your account was debited. Your rights
    are explained in a statement that you can obtain from your bank. You
    agree to receive notifications for future debits up to 2 days before
    they occur.
  </div>
  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

フォームが読み込まれるときに、IBAN Element のインスタンスを作成し、それを Element コンテナにマウントできます。

// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  },
};

const options = {
  style,
  supportedCountries: ['SEPA'],
  // Elements can use a placeholder as an example IBAN that reflects
  // the IBAN format of your customer's country. If you know your
  // customer's country, we recommend passing it to the Element as the
  // placeholderCountry.
  placeholderCountry: 'DE',
};

// Create an instance of the IBAN Element
const iban = elements.create('iban', options);

// Add an instance of the IBAN Element into the `iban-element` <div>
iban.mount('#iban-element');

Stripe に支払い方法の詳細を送信する
クライアント側

SetupIntent オブジェクト全体をクライアントに送信するのではなく、ステップ 3 で取得した client secret を使用します。これは、Stripe API リクエストを認証する API キーとは異なります。

ただし、client secret は設定を完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

ユーザーがフォームを送信したら、stripe.confirmSepaDebitSetup を使用して支払いを完了します。SEPA ダイレクトデビットの PaymentMethod を作成するには、payment_method パラメーターの billing_details プロパティに顧客の氏名とメールアドレスを含める必要があります。また、IBAN に国コード AD、PF、TF、GI、GB、GG、VA、IM、JE、MC、NC、BL、PM、SM、CH、WF が含まれる場合は、billing_details.address プロパティの、country と line1 のプロパティが必要です。IBAN の国コードを取得するには、IBAN Element の change イベントをリッスンします。

設定が正常に完了すると、SetupIntent の status プロパティに値 succeeded が返されます。設定が成功しなかった場合は、返された error を調査して原因を特定します。

customer が指定されているため、設定が成功すると、指定された Customer オブジェクトに PaymentMethod が関連付けられます。これにより、保存された PaymentMethod を使用することで、顧客に支払い方法の詳細を求めることなく、それ以降の支払いを回収できます。

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');
const submitButton = document.getElementById('submit-button');
const clientSecret = submitButton.dataset.secret;

form.addEventListener('submit', (event) => {
  event.preventDefault();
  stripe.confirmSepaDebitSetup(
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  );
});

構築したシステムをテストする

confirmSepaDebitSetup リクエストで以下の IBAN を使用して、自身のフォームをテストすることができます。各 IBAN に対応する支払い方法の詳細が収集されますが、支払い時にはそれぞれ異なる動作を示します。

IBAN をテストする
アカウント番号説明
IE29AIBK93115212345678PaymentIntent のステータスは、processing から succeeded に変化します。
IE24AIBK93115212345671The PaymentIntent status transitions from processing to succeeded after at least three minutes.
IE02AIBK93115212345679PaymentIntent のステータスは、processing から requires_payment_method に変化します。
IE94AIBK93115212345672The PaymentIntent status transitions from processing to requires_payment_method after at least three minutes.
IE51AIBK93115212345670PaymentIntent のステータスは、processing から succeeded に変化しますが、不審請求の申請が即座に作成されます。
IE10AIBK93115200343434支払金額がアカウントの週次支払い金額の上限を超えるため、支払いは charge_exceeds_source_limit エラーコードで失敗します。
IE69AIBK93115200121212支払い金額がアカウントの取引金額の上限を超えているため、支払いは charge_exceeds_weekly_limit エラーコードで失敗します。
IE10AIBK93115202222227支払いは insufficient_funds エラーコードで失敗します。

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc