サーバーで支払いを確定する

PaymentIntent や SetupIntent を作成する前に Payment Element をレンダリングする実装を構築し、サーバーから Intent を確定します。

Payment Element を使用すると、一度の導入で複数の支払い方法を受け付けることができます。この実装では、Payment Element を表示し、PaymentIntent を作成して、サーバーから決済を確定する、カスタムの決済フローを構築します。

Stripe を設定する
サーバ側

まず、Stripe アカウントを作成するかサインインします。

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

支払い方法を有効にする

注意

この導入パスは、Automated Clearing Settlement System (ACSS) を使用する BLIK またはプレオーソリデビットに対応していません。

支払い方法の設定を表示して、サポートする支払い方法を有効にします。PaymentIntent を作成するには、少なくとも 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.

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

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

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。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>

上記のフォームが読み込まれたら、モード、金額、通貨を指定して Elements インスタンスを作成します。これらの値から、顧客に表示される支払い方法が決定されます。

次に、Payment Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。

checkout.js
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  paymentMethodCreation: 'manual',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
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 をカスタマイズできます。

住所を収集

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

オプションレイアウトをカスタマイズする
クライアント側

オプションデザインをカスタマイズする
クライアント側

オプション顧客の支払い方法を保存および取得する

オプション支払いの詳細を動的に更新する
クライアント側

オプションAdditional Elements options
クライアント側

ConfirmationToken を作成する
クライアント側

レガシーの実装で createPaymentMethod を使用する

レガシーの実装を使用している場合は、サーバーで支払いを確定するために stripe.createPaymentMethod の情報を使用することがあります。このガイドに従って Confirmation Tokens に移行することをお勧めしますが、以前のドキュメントを確認してサーバーで支払いを確定することもできます。

When the customer submits your payment form, call stripe.createConfirmationToken to create a ConfirmationToken to send to your server for additional validation or business logic before payment confirmation.

PaymentIntent を確定すると PaymentMethod が生成されます。PaymentIntent 確認レスポンスから payment_method ID を表示できます。

注意

作成された ConfirmationToken をすぐに使用して、PaymentIntent を確定する必要があります。使用しなかった場合は、12 時間後に期限切れになります。

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

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the ConfirmationToken using the details collected by the Payment Element
  // and additional shipping information
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
      return_url: 'https://example.com/order/123/complete'
    }
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
    return;
  }

  // Create the PaymentIntent
  const res = await fetch("/create-confirm-intent", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({
      confirmationTokenId: confirmationToken.id,
    }),
  });

  const data = await res.json();

  // Handle any next actions or errors. See the Handle any next actions step for implementation.
  handleServerResponse(data);
});

オプションカスタムビジネスロジックを挿入する
サーバー側

決済を作成して Stripe に送信する
サーバー側

顧客が決済フォームを送信したときに、PaymentIntent を使用して確認と決済のプロセスを円滑にします。サーバーで、amount と currency を指定して PaymentIntent を作成します。最新バージョンの API では、機能がデフォルトで有効になっているため、automatic_payment_methods パラメーターの指定が任意になりました。支払い方法はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。悪意のある顧客が金額を恣意的に選択できないようにするために、支払い金額はクライアント側ではなく、常に信頼できる環境であるサーバー側で指定してください。

クライアントから送信された ConfirmationToken を使用すると、1 件のリクエストで PaymentIntent を作成して確定できます。

app.js
const stripe = require("stripe")("sk_test_BQokikJOvBiI2HlWgH4olfQ2"
);
const express = require('express');
const app = express();

app.set('trust proxy', true);
app.use(express.json());
app.use(express.static("."));

app.post('/create-confirm-intent', async (req, res) => {
  try {
    const intent = await stripe.paymentIntents.create({
      confirm: true,
      amount: 1099,
      currency: 'usd',
      // In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
      automatic_payment_methods: {enabled: true},
      confirmation_token: req.body.confirmationTokenId, // the ConfirmationToken ID sent by your client
    });
    res.json({
      client_secret: intent.client_secret,
      status: intent.status
    });
  } catch (err) {
    res.json({
      error: err
    })
  }
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

次のアクションを処理する
クライアント側

3D セキュアによる認証や別のサイトへのリダイレクトなど、PaymentIntent で顧客による追加アクションが必要になる場合は、そのアクションを起動する必要があります。stripe.handleNextAction を使用して、顧客のアクションを処理して支払いを完了するための UI をトリガーします。

checkout.js
JavaScript
const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.status === "requires_action") {
    // Use Stripe.js to handle the required next action
    const {
      error,
      paymentIntent
    } = await stripe.handleNextAction({
      clientSecret: response.clientSecret
    });

    if (error) {
      // Show error from Stripe.js in payment form
    } else {
      // Actions handled, show success message
    }
  } else {
    // No actions needed, show success message
  }
}

オプション支払い後のイベントを処理する

参照情報

導入方法の設計

注

サーバーで支払いを確定する

PaymentIntent や SetupIntent を作成する前に Payment Element をレンダリングする実装を構築し、サーバーから Intent を確定します。

Stripe を設定するサーバ側

支払い方法を有効にする

注意

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

Stripe.js を設定する

Payment Element を決済ページに追加する

住所を収集

オプションレイアウトをカスタマイズするクライアント側

オプションデザインをカスタマイズするクライアント側