Express Checkout Element で決済を受け付ける

単一の導入を使用して、ワンクリックの支払いボタンで決済を受け付けます。

Express Checkout Element を使用すると、一度の導入で Link、PayPal、Apple Pay、Google Pay、Amazon Pay などのワンクリックの支払いボタンによる決済を受け付けることができます。

顧客が使用するデバイスとブラウザーの組み合わせのサポート状況に応じて、表示される支払いボタンが異なります。互換性のあるデバイスでは、Google Pay と Link が自動的にサポートされます。Apple Pay と PayPal のサポートには追加のステップが必要です。

ベータ

Klarna on the Express Checkout Element is launching a limited beta in mid October. Reach out here to gain access.

Express Checkout Element を使用する際は、Intent の作成前に支払いの詳細を収集することをお勧めします。これまでに Payment Element を導入している場合に、このアプローチを行うにはStripe システムの更新が必要になる場合があります。

はじめに

ブラウザーに支払い方法を追加します。たとえば、カードを Google Pay アカウントや Safari のウォレットに追加できます。
アプリケーションは HTTPS 経由で提供します。これは、開発環境と本番環境で必須です。ngrok などのサービスを利用できます。
テスト環境と本番環境の両方でドメインを登録して確認します。
PayPal サンドボックスアカウントを作成して、実装をテストします。

Stripe を設定する
サーバ側

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

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

支払い方法を有効にする

デフォルトでは、Stripe はお客様の決済手段の設定を使用して、Express Checkout Element ででどの決済手段を有効にするかを決定します。

有効になっている決済手段を手動で上書きするには、payment_method_types 属性を使用して、有効にする決済手段をすべてリストします。

インテントを作成する前に支払いを回収する場合は、Elementsプロバイダーオプションの paymentMethodTypes 属性に決済手段のリストを作成します。
Elements をレンダリングする前にインテントを作成する場合は、インテントの payment_method_types 属性に決済手段のリストを作成します。

サポートされている決済手段

支払い方法タイプ card を使用すると、Apple Pay と Google Pay が自動的に有効になります。Link を使用する場合は、必ず card 支払い方法タイプも渡します。

支払い方法名	Payment method API パラメーター
Apple Pay	`card`
Google Pay	`card`
Link	`link, card`
PayPal	`paypal`
Amazon Pay	`amazon_pay`

Stripe Elements を設定する
クライアント側

Express Checkout 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'
);

次に、モード (支払い、設定、またはサブスクリプション)、金額および通貨を指定して Elements のインスタンスを作成します。これらの値により、顧客に表示される支払い方法が決定されます。次のステップで、より詳細な設定が可能な Elements オプションをご覧ください。

checkout.js
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);

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

Express Checkout Element を作成してマウントする
クライアント側

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

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

checkout.html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

フォームが読み込まれたら、Express Checkout Element のインスタンスを作成し、コンテナーの DOM ノードにマウントします。

checkout.js
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');

オプションready イベントをリッスンする
クライアント側

オプション支払いボタンを表示するタイミングを管理する
クライアント側

オプションボタンのスタイルを設定する
クライアント側

顧客の詳細情報を収集してラインアイテムを表示する
クライアント側

Express Checkout Element にオプションを渡すために、クリックイベントを処理します。クリックイベントを受信した後、決済ページで操作を無効にしてください。

支払人の情報を収集する

メールアドレスを収集するには、emailRequired: true を設定して、電話番号を収集するには、phoneNumberRequired: true を設定します。billingAddressRequired はデフォルトで true です。

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    emailRequired: true,
    phoneNumberRequired: true
  };
  event.resolve(options);
});

When using PayPal with the Express Checkout Element, Stripe typically only receives and exposes the country from the billing address. Because of how PayPal shares information with third-party payment processors, the confirm event payload might show billingDetails[address] fields as empty strings, except for the country field.

配送先情報を収集する

shippingAddressRequired: true を設定して、shippingRates の配列を渡します。

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    shippingAddressRequired: true,
    allowedShippingCountries: ['US'],
    shippingRates: [
      {
        id: 'free-shipping',
        displayName: 'Free shipping',
        amount: 0,
        deliveryEstimate: {
         maximum: {unit: 'day', value: 7},
         minimum: {unit: 'day', value: 5}
        }
      },
    ]
  };
  event.resolve(options);
});

shippingaddresschange イベントをリッスンして、顧客が配送先住所を選択した際にこれを検出します。このイベントを処理する場合は、resolve または reject のいずれかを呼び出す必要があります。

checkout.js
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

shippingratechange イベントをリッスンして、顧客が配送料金を選択した際にこれを検出します。このイベントを処理する場合は、resolve または reject のいずれかを呼び出す必要があります。

checkout.js
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

cancel イベントをリッスンして、顧客が決済インターフェイスを閉じた際に、これを検出します。金額を当初の金額にリセットします。

checkout.js
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});

ラインアイテムを表示する

lineItems の配列を渡します。

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    lineItems: [
      {
        name: 'Sample item',
        amount: 1000
      },
      {
        name: 'Tax',
        amount: 100
      },
      {
        name: 'Shipping cost',
        amount: 1000
      }
    ]
  };
  event.resolve(options);
});

Apple Pay インターフェイスを設定する

Apple Pay インターフェイスの設定方法をご確認ください。

加盟店が開始する取引 (MIT)

ユーザーが Apple Pay で決済する際に、Express Checkout Element click イベントで関連するマーチャントトークンのタイプをリクエストすることで、継続支払い、後払い、自動リロード支払いを設定することができます。Apple Pay マーチャントトークンを実装する際は、Apple Pay の最新ガイドラインに準拠し、将来の実装に対応できるようにすることをお勧めします。

オプションConfirmationToken を作成する
クライアント側

PaymentIntent を作成する
サーバー側

Stripe は PaymentIntent オブジェクトを使用して、顧客から支払いを回収するお客様の意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。

サーバーで金額と通貨を指定し、PaymentIntent を作成します。これは、ステップ 3 で stripe.elements インスタンスに設定した内容と一致している必要があります。請求金額は、クライアント側ではなく、常に信頼できる環境のサーバー側で指定してください。これにより、悪意のある顧客が金額を恣意的に選択できないようにします。

返される PaymentIntent には client secret が含まれています。これは、PaymentIntent オブジェクト全体を渡すことなく安全に決済プロセスを完了するために、クライアント側で使用されます。client secret をクライアント側に渡す際には、いくつかの方法を使用できます。

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

stripe.confirmPayment を使用し、Express Checkout Element からの詳細を使って支払いを完了します。

注

Amazon Pay と PayPal の場合、PaymentIntent で確定した金額と買い手が事前承認した金額が一致している必要があります。金額が一致しないと、支払いは拒否されます。

支払いの完了後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に return_url を指定します。ユーザーは、最初に中間サイトにリダイレクトされてから、return_url にリダイレクトされる場合があります。支払いが正常に完了するとすぐに return_url にリダイレクトされます。

支払いの完了後にリダイレクトを行わない場合は、redirect を if_required に設定します。これで、リダイレクトベースの支払い方法で購入する顧客のみがリダイレクトされます。

checkout.js
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

実装をテストする

本番環境に移行する前に、各支払い方法の組み込みをテストします。支払い方法のブラウザーとの互換性を判断するには、サポートされるブラウザーをご覧ください。iframe で Express Checkout Element を使用している場合、iframe で allow 属性を payment * に設定する必要があります。

注意

テスト環境の Link アカウントには実際のユーザーデータを保存しないでください。テストアカウントは公開可能キーに関連付けられているため、公開可能なものとして扱ってください。

Link は現在、クレジットカード、デビットカード、および資格要件を満たしたアメリカの銀行口座からの購入にのみ対応しています。Link では、ドメインの登録が必要です。

有効な任意のメールアドレスを使用して、Link のテスト環境のアカウントを作成できます。以下の表には、テスト環境のアカウントの認証に使用できる、固定値のワンタイムパスコードが示されています。

値	結果
以下に記載されていない任意の 6 桁の数字	成功
000001	エラー: コードが無効です
000002	エラー: コードの有効期限が切れています
000003	エラー: 最大試行回数を超えました

オプションStripe Connect で Express Checkout Element を使用する

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

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

注

Express Checkout Element で決済を受け付ける

単一の導入を使用して、ワンクリックの支払いボタンで決済を受け付けます。

ベータ

はじめに

Stripe を設定するサーバ側

支払い方法を有効にする

サポートされている決済手段

Stripe Elements を設定するクライアント側

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

Express Checkout Element を作成してマウントするクライアント側

オプションready イベントをリッスンするクライアント側

オプション支払いボタンを表示するタイミングを管理するクライアント側

オプションボタンのスタイルを設定するクライアント側

顧客の詳細情報を収集してラインアイテムを表示するクライアント側