コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
導入を開始
Payment scenarios
対面支払い
Other Stripe products

注

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

将来の支払いを設定する

支払いの詳細を保存し、後で顧客に請求する方法をご紹介します。

Setup Intents API を使用すると、初回の支払いなしで顧客の支払いの詳細を保存することができます。これは、今すぐ顧客をアカウント登録して支払いを設定し、将来顧客がオフラインのときに請求する場合に役立ちます。

この組み込みを使用して、継続支払いを設定したり、または顧客がサービスを受け取った後など、最終金額が後で決定される 1 回限りの支払いを作成したりします。

Card-present transactions

Card-present transactions, such as collecting card details through Stripe Terminal, use a different process for saving the payment method. For details, see the Terminal documentation.

法令遵守

顧客の支払いの詳細を保存する際、適用されるすべての法律、規制、ネットワークの規則に準拠する責任はお客様にあります。これらの要件は通常、以降の購入時の決済フローでの顧客の支払い方法を提示する、顧客がお客様のウェブサイトやアプリを使用していないときに請求するなど、将来に備えて顧客の支払い方法を保存する場合に適用されます。支払い方法の保存をどのように計画しているかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。

支払い方法を保存する場合、規約に記載された特定の用途にのみ使用できます。顧客がオフラインであるときに支払い方法に請求して、以降の購入に備えたオプションとして保存する場合は、この特定の用途について顧客から明示的に同意を収集する必要があります。たとえば、同意を収集するために「今後の使用に備えて支払い方法を保存する」チェックボックスを使用します。

顧客がオフラインのときに請求するには、規約に以下の内容を含める必要があります。

  • 指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始することをお客様に許可するという、顧客からお客様への同意
  • 予期される支払い時期と支払い頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。
  • 支払い金額の決定方法
  • 支払い方法をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー

これらの規約に関する顧客の書面による同意の記録を必ず保管してください。

注

手動でのサーバー側の確定を使用する必要がある場合、または実装で支払い方法を別途提示する必要がある場合は、代替方法のガイドをご覧ください。

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'

支払い方法を有効にする

支払い方法の設定を表示して、サポートする支払い方法を有効にします。SetupIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。

By default, Stripe enables cards and other prevalent payment methods that can help you reach more customers, but we recommend turning on additional payment methods that are relevant for your business and customers. See Payment method support for product and payment method support, and our pricing page for fees.

Customer を作成する
サーバ側

将来の支払いに備えて支払い方法を設定するには、その手段を Customer (顧客) に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。Customer オブジェクトを使用すると、支払い方法を再利用したり、複数の支払いを追跡したりできます。

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

SetupIntent を作成する
サーバ側

注

最初に SetupIntent を作成せずに Payment Element をレンダリングする場合は、インテントを作成する前に支払いの詳細を収集するをご覧ください。

SetupIntent は、将来の支払いに備えて顧客の支払い方法を設定するという意図を示すオブジェクトです。SetupIntent には、決済プロセス中に顧客に表示される支払い方法も含まれています。ダッシュボードの設定から Stripe が支払い方法を自動的に取得できるようにすることも、手動で列挙することもできます。

支払い方法の提供にコードベースのオプションを必要とする場合を除き、自動のオプションをお勧めします。これは、Stripe で通貨、支払い方法の制約、その他のパラメーターを評価し、対応可能な支払い方法のリストが決定されるためです。この場合、コンバージョン率上昇につながり、使用通貨と顧客の所在地に最も適した支払い方法が優先的に表示されます。優先度の低い支払い方法は、オーバーフローメニューの下に隠れた状態となります。

支払い方法の一部は、将来に備えた支払いの設定には使用できません。他のユースケースではこれらの支払い方法をまだ使用することはできますが、将来の支払いを設定する際のオプションとして顧客に表示されることはありません。サポート対象について、詳細は支払い方法の導入オプションをご覧ください。

必要に応じて、automatic_payment_methods を有効にした SetupIntent を作成できます。その SetupIntent は、ダッシュボードで設定した支払い方法を使用して作成されます。最新バージョンの API では機能がデフォルトで有効になっているため、automatic_payment_methods パラメーターの指定は任意になりました。

支払い方法はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。

Command Line
curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d "automatic_payment_methods[enabled]"=true

client secret を取得する

SetupIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

main.rb
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Radar を使用する

初回の支払いなしで顧客の支払い方法を保存する場合、Radar のデフォルトでは SetupIntent に対して動作しません。デフォルトで有効にするには、Radar の設定に移動して、今後のために保存された支払い方法で Radar を使用するを有効にします。

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

Payment Element を使用してクライアント側で支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の詳細の収集を容易にします。

Payment Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。実装内容を機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。これを行わなくても実装内容のテストはできますが、本番環境で決済を受け付ける準備が整ったら、必ず HTTPS を有効化してください。

Stripe.js を設定する

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

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

購入ページで次の JavaScript を使用して、Stripe のインスタンスを作成します。

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Payment Element を支払い設定ページに追加する

Payment Element を支払い設定ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。Elements インスタンスを作成する際に、前のステップからの client secret を options に渡します。

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements using the SetupIntent's client secret
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。支払い方法ごとに、フォームでは、必要な支払いの詳細のすべてを入力するように顧客に自動的に求めます。

デザインをカスタマイズする

Elements プロバイダーを作成する際に、Appearance (デザイン) オブジェクトを options に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。

Apple Pay マーチャントトークンをリクエストする

Apple Pay による決済を受け付ける場合、マーチャントトークンを返すように Apple Pay インターフェイスを設定して、加盟店が開始する取引 (MIT) を有効にすることをお勧めします。Payment Element で関連するマーチャントトークンのタイプをリクエストします。以下の例は、後払いのマーチャントトークンのリクエストを示します。

checkout.js
const paymentElement = elements.create('payment', {
  applePay: {
    deferredPaymentRequest: {
      paymentDescription: 'My deferred payment',
      managementURL: 'https://example.com/billing',
      deferredBilling: {
        amount: 2500,
        label: 'Deferred Fee',
        deferredPaymentDate: new Date('2024-01-05')
      },
    }
  },
  // Other options
});

通貨を設定する

SetupIntent を automatic_payment_methods と組み合わせて使用するときは、Elements プロバイダーの作成時に options に currency を渡して、Payment Element によって表示される支払い方法を指定できます。Payment Element は、Stripe ダッシュボードで有効になっているうちで、指定された通貨に対応する支払い方法を表示します。サポート内容について、詳細は支払い方法の導入オプションをご覧ください。

住所を収集

デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。

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

stripe.confirmSetup を使用して、Payment Element によって収集された詳細で設定を完了します。この関数に return_url を指定して、設定完了後のユーザーのリダイレクト先を指定します。まず、ユーザーを銀行のオーソリページなどの中間サイトにリダイレクトしてから、return_url にリダイレクトできます。

顧客がカード詳細を保存する場合、設定が正常に完了するとすぐに return_url にリダイレクトされます。カード支払いでリダイレクトを行わない場合は、redirect に if_required を設定できます。これにより、リダイレクトベースの支払い方法で購入する顧客のみがリダイレクトされます。

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/account/payments/setup-complete',
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

return_url は、レンダリング時に SetupIntent のステータスを表示するウェブサイト上のページと一致している必要があります。Stripe が顧客を return_url にリダイレクトするときに、以下の URL クエリーパラメーターが渡され、ステータスが確認されます。return_url を指定する際に、独自のクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセス全体を通じて持続します。

パラメーター説明
setup_intentSetupIntent の一意の識別子。
setup_intent_client_secretSetupIntent オブジェクトの client secret。

stripe.retrieveSetupIntent を使用し、setup_intent_client_secret クエリパラメーターを指定して SetupIntent を取得できます。SetupIntent の確定が正常に完了した場合、(result.setupIntent.payment_method で) 生成された PaymentMethod ID が、指定された Customer に保存されます。

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('{PUBLISHABLE_KEY}');

// Retrieve the "setup_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'setup_intent_client_secret'
);

// Retrieve the SetupIntent
stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the SetupIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (setupIntent.status) {
    case 'succeeded': {
      message.innerText = 'Success! Your payment method has been saved.';
      break;
    }

    case 'processing': {
      message.innerText = "Processing payment details. We'll update you when processing is complete.";
      break;
    }

    case 'requires_payment_method': {
      message.innerText = 'Failed to process payment details. Please try another payment method.';

      // Redirect your user back to your payment page to attempt collecting
      // payment again

      break;
    }
  }
});

注意

顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに stripe.com ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。

保存された支払い方法に後で請求する
サーバ側

法令遵守

顧客の支払いの詳細を保存する際、お客様は適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。将来の購入に備えて顧客に過去の決済手段を提供する際は、必ず、特定の将来の使用に備えて決済手段の詳細を保存することについての同意を顧客から収集した決済手段をリストアップします。顧客に関連付けられた決済手段のうち、将来の購入用の保存済みの決済手段として顧客に提示できるものと提示できないものを区別するには、allow_redisplay パラメーターを使用します。

購入者にオフセッションで請求する準備ができたら、Customer ID と PaymentMethod ID を使用して、PaymentIntent を作成します。請求する決済手段を見つけるには、顧客に関連付けられた決済手段を一覧表示します。この例ではカードが一覧表示されますが、サポートされているすべてのタイプを一覧表示できます。

Command Line
curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d type=card

Customer ID と PaymentMethod ID を取得したら、支払いの金額と通貨を使用して PaymentIntent を作成します。その他のいくつかのパラメーターを設定して、オフセッションの支払いを行います。

  • off_session を true に設定して、支払いの試行時に購入者が決済フローを実行中でないことと、カード発行会社、銀行、その他の決済機関などのパートナーからの認証リクエストに対応できないことを示します。決済フローの実行時にパートナーが認証をリクエストした場合、Stripe は前回のオンセッション取引の顧客情報を使用して免除をリクエストします。免除の条件を満していない場合は PaymentIntent からエラーが返されることがあります。
  • PaymentIntent の confirm プロパティの値を true に設定します。これにより、PaymentIntent が作成されると直ちに確定されます。
  • payment_method を PaymentMethod の ID に設定し、customer を Customer の ID に設定します。
Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

支払いが失敗すると、リクエストも 402 HTTP ステータスコードで失敗し、PaymentIntent のステータスが requires_payment_method になります。アプリケーションに戻って支払いを完了するよう (メールやアプリ内通知を送信するなどして) 顧客に通知する必要があります。

Stripe API ライブラリから発生したエラーのコードを確認します。支払いが authentication_required 拒否コードで失敗した場合には、拒否された PaymentIntent の client secret を confirmPayment とともに使用し、顧客が支払いを認証できるようにします。

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

注

stripe.confirmPayment の完了には数秒かかる場合があります。この間、フォームが再送信されないように無効化し、スピナーのような待機中のインジケーターを表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中のインジケーターを非表示にします。支払いの完了のために顧客による認証などの追加の手順が必要な場合は、Stripe.js がそのプロセスをステップごとに顧客に提示します。

利用可能額不足など、他の理由で支払いが失敗した場合、新しい支払い方法を入力する支払いページを顧客に送信します。既存の PaymentIntent を再利用し、新しい支払いの詳細を利用して支払いを再試行できます。

組み込みをテストする

テスト用の支払いの詳細とテスト用リダイレクトページを使用して、組み込みを確認できます。以下のタブをクリックすると、各支払い方法の詳細を表示できます。

支払い方法シナリオテスト方法
クレジットカードカードの設定は成功し、認証は必要ありません。クレジットカード番号 4242 4242 4242 4242 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカードこのカードは初期設定時に認証が必要であり、それ以降は支払いに成功します。クレジットカード番号 4000 0025 0000 3155 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカードこのカードは、初期設定時も、以降の支払いでも認証が必要です。クレジットカード番号 4000 0027 6000 3184 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカード設定中にカードは拒否されます。クレジットカード番号 4000 0000 0000 9995 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。

保存された SEPA デビット PaymentMethod への請求をテストする

iDEAL、Bancontact または Sofort を使用して SetupIntent が確定されると、SEPA ダイレクトデビット の PaymentMethod が生成されます。SEPA ダイレクトデビットは、通知遅延型の決済手段であり、中間の processing 状態に移行してから、数日後に succeeded または requires_payment_method の状態に移行します。

payment_method.billing_details.emailを以下の値のいずれかに設定して PaymentMethod のステータスの移行をテストします。メールアドレスの先頭に独自のカスタムのテキストを含め、その後ろにアンダースコアを付けることができます。 たとえば、test_1_generatedSepaDebitIntentsFail@example.com は、PaymentIntent とともに使用された場合に常に失敗する、SEPA ダイレクトデビットの PaymentMethod です。

メールアドレス説明
generatedSepaDebitIntentsSucceed@example.comPaymentIntent のステータスは、processing から succeeded に移行します。
generatedSepaDebitIntentsSucceedDelayed@example.comThe PaymentIntent status transitions from processing to succeeded after at least three minutes.
generatedSepaDebitIntentsFail@example.comPaymentIntent のステータスは、processing から requires_payment_method に移行します。
generatedSepaDebitIntentsFailDelayed@example.comThe PaymentIntent status transitions from processing to requires_payment_method after at least three minutes.
generatedSepaDebitIntentsSucceedDisputed@example.comPaymentIntent のステータスは、processing から succeeded に移行しますが、すぐに不審請求の申請が作成されます。

Stripe について顧客に開示する

Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、プライバシーセンターをご覧ください。

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
Stripe の製品変更ログを確認してください。
ご不明な点がございましたら、お問い合わせください。
Powered by Markdoc
このページの内容
法令遵守
Stripe を設定する
支払い方法を有効にする
Customer を作成する
SetupIntent を作成する
client secret を取得する
支払いの詳細を収集する
デザインをカスタマイズする
Apple Pay マーチャントトークンをリクエストする
通貨を設定する
住所を収集
決済ページでの Link
Stripe に支払いの詳細を送信する
保存された支払い方法に後で請求する
組み込みをテストする
保存された SEPA デビット PaymentMethod への請求をテストする
Stripe について顧客に開示する
参照情報
使用製品
Payments
Checkout
Elements