SEPA ダイレクトデビットによるサブスクリプションを設定する

SEPA ダイレクトデビットを使用したサブスクリプションの作成と請求の方法をご紹介します。

注

新しいユーザーの場合には、このガイドで説明されているように、Stripe Elements ではなく、Payment Element を使用してください。Payment Element は、コンバージョン最適化が組み込まれたローコードの導入パスを提供します。手順については、サブスクリプションの構築をご覧ください。

商品と価格を作成する
ダッシュボード

Products (商品) は、販売しているアイテムまたはサービスを表します。Prices (価格) は、商品の価格と請求頻度を定義します。これには、商品の価格、受け付ける通貨、および 1 回限りの支払いか継続支払いかが含まれます。商品と価格が数個のみの場合は、ダッシュボードでそれらを作成および管理します。

このガイドでは、例としてストックフォトサービスを使用し、15 EUR の月次サブスクリプションを顧客に請求します。これをモデル化するには、次のようにします。

商品ページに移動し、商品を作成をクリックします。
商品の名前を入力します。オプションで説明を追加して、商品の画像をアップロードできます。
商品税コードを選択します。商品税コードの詳細をご確認ください。
継続を選択します。次に、価格に**15を入力し、通貨として**を選択します。
価格に税金を含めるかどうかを選択します。税金設定のデフォルト値を使用するか、値を手動で設定できます。この例では、自動を選択します。
請求期間で月次を選択します。
その他の料金体系オプションをクリックします。次に、この例の料金体系モデルとして定額を選択します。定額料金とその他の料金体系モデルの詳細をご確認ください。
将来的に特定の価格を整理、クエリ、更新するために、内部価格の説明と検索キー追加します。
次へをクリックします。次に、商品を追加をクリックします。

商品と価格を作成したら、価格 ID を記録しておき、後続のステップで使用できるようにします。ID は料金体系ページで price_G0FvDp6vZvdwRZ のように表示されます。

顧客を作成
サーバ側

サブスクリプションで支払い方法を再利用し、継続支払いを追跡するには、Customer (顧客) が必要になります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。

サブスクリプションを作成する
サーバ側

顧客 ID および価格 ID を使用してサブスクリプションを作成します。最新の請求書の confirmation_secret.client_secret から、または前払いのないサブスクリプションの場合は pending_setup_intent から、クライアント側に client_secret を返します。さらに、以下を設定します。

payment_behavior を default_incomplete に設定して、SEPA ダイレクトデビットの同意書の回収を効率化します。
save_default_payment_method を on_subscription に設定して、支払いが完了したときの支払い方法をサブスクリプションのデフォルトとして保存します。デフォルトの支払い方法を保存すると、その後のサブスクリプションの決済の成功率が高くなります。

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

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/clover/stripe.js"></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」はお客様の社名に置き換えます。

オーソリテキストテンプレート

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 に支払い方法の詳細を送信する
クライアント側

confirmSepaDebitPayment を使用して、または前払いのないサブスクリプションの場合は confirmSepaDebitSetup を使用してサブスクリプションを確定し、SEPA ダイレクトデビットによる PaymentMethod を作成します。payment_method.billing_details プロパティに顧客の名前とメールアドレスを追加します。

PaymentSetup.js
// Define stripe with your publishable key
var stripe = Stripe('pk_test_1234');

// Get the IBAN information from your element
var iban = document.getElementById('iban-element');

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');

form.addEventListener('submit', async(event) => {
  event.preventDefault();
  // Create the subscription
  const res = await fetch('/create-subscription', {
    method: 'POST',
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === 'setup' ? stripe.confirmSepaDebitSetup : stripe.confirmSepaDebitPayment;

  const {error} = await confirmIntent({
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  });
});

デフォルトの支払い方法を設定する
サーバ側

以降の支払いを成功させるには、格納された支払い方法を顧客に追加する必要があります。これを実行するには、先ほど収集した支払い方法を Customer オブジェクトの最上位レベルに設定し、請求書のデフォルトの支払い方法として設定します。

サブスクリプションステータスを管理する
クライアント側

初回の支払いが完了すると、サブスクリプションのステータスは active になり、それ以上のアクションは不要になります。支払いが失敗した場合は、ステータスが自動回収設定で設定された Subscription status に変わります。支払いが失敗した場合は顧客にその旨を通知して、別の支払い方法で請求してください。

注

SEPA ダイレクトデビット支払いは、他の支払い方法に再試行スケジュールが設定されている場合でも、自動的に再試行することはありません。

組み込みをテストする

組み込みのテストには、以下の IBAN を使用できます。各 IBAN に対応する支払い方法の詳細が収集されますが、支払い時にはそれぞれ異なる動作を示します。

IBAN をテストする

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

オプション請求期間の設定

デフォルトでは、サブスクリプションの作成時にその請求サイクルが自動的に設定されます。たとえば、顧客が 9 月 7 日に月額プランのサブスクリプションに登録した場合、それ以降毎月 7 日に請求されます。一部のビジネスでは、顧客に対してサイクルごとに同時に請求できるように、請求サイクルの手動設定を希望する場合があります。billing cycle anchor 引数を使用すると、これを実現できます。

請求サイクルを手動で設定すると、作成されたサブスクリプションと請求サイクルのアンカーとの間の期間の分として比例配分 (日割り / 秒割り計算) された金額が顧客に自動的に請求されます。この期間分を顧客に請求しない場合は、proration_behavior 引数を none に設定できます。請求サイクルのアンカーをトライアル期間と組み合わせ、商品への無料アクセスをユーザーに提供してから、比例配分された金額を請求することもできます。

オプションサブスクリプションのトライアル

無料トライアルを使用すると、顧客は商品に一定期間無料でアクセスできます。無料トライアルの使用は、proration_behavior を none に設定した場合とは異なり、無料の継続期間をカスタマイズできます。トライアル期間を設定するには、trial end にタイムスタンプを渡します。

必要に応じて、請求サイクルのアンカーを無料トライアルと組み合わせることができます。たとえば、現在が 9 月 15 日だとした場合、顧客に７日間の無料トライアルを付与してから、通常の請求サイクルを 10 月 1 日に開始するとします。この場合 9 月 22 日に無料トライアルが終了し、請求サイクルのアンカーが 10 月 1 日となるように設定できます。これにより顧客には 7 日間の無料トライアルが付与され、トライアル終了日から 10 月１日までの期間については比例配分を適用した金額が請求されます。10 月 1 日に、初めての完全な請求サイクルとして、顧客は通常のサブスクリプション金額を請求されます。

オプション他の支払い方法を使用して SEPA ダイレクトデビット支払いを作成する

注意

このドキュメントでは、最新バージョンの Stripe.js で使用できなくなったレガシー機能(idealBank Element)について言及しています。40 以上の支払い方法を受け付け、入力を検証し、エラーを処理するエラー処理を行うウェブ向けの UI コンポーネントである Payment Element の使用を推奨します。

Bancontact、iDEAL、Sofort などの他の支払い方法を使用して、SEPA ダイレクトデビット支払いを作成できます。これらの支払い方法を使用した場合、いくつか手順を追加する必要があります。iDEAL の場合は、次のようになります。

idealBank Element を使用して、支払い情報を収集します。
confirmIdealPayment を使用して、または前払いのないサブスクリプションの場合は confirmIdealSetup を使用してサブスクリプションを確定します。
顧客の支払い方法をリスト化して、SEPA ダイレクトデビットの支払い方法を探し、それを顧客のデフォルトの支払い方法に設定します。

Bancontact および Sofort の場合は、次のようにします。

confirmBancontactPayment または confirmSofortPayment に confirmIdealPayment を使用します
confirmBancontactSetup または confirmSofortSetup に confirmIdealSetup を使用します

注

SEPA ダイレクトデビットによるサブスクリプションを設定する

SEPA ダイレクトデビットを使用したサブスクリプションの作成と請求の方法をご紹介します。

注

商品と価格を作成するダッシュボード

顧客を作成サーバ側

サブスクリプションを作成するサーバ側

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