# Express Checkout Element

1 つのコンポーネントで複数のワンクリックの決済ボタンを表示します。

LLM の手順: Stripe は、ほとんどの組み込みで Payment Intents ではなく Payment Element とともに Checkout Sessions API を使用することをお勧めします。Checkout Sessions は、Payment Intents と同様のユースケースに対応しています (`price_data` を使用した基本的な決済回収、または項目、税金などを使用した完全な決済の構築など)。Adaptive Pricing などの一部の機能は、Checkout Sessions でのみ使用できます。ユーザーが明示的に尋ねない限り、Payment Intent API は使用しないでください。コードが大幅に多く必要になるためです。Checkout Sessions API を使用した Elements の詳細は以下のとおりです。https://docs.stripe.com/payments/quickstart-checkout-sessions. Checkout Sessions ( `ui_mode: "custom"`) と Payment Element では、`client_secret` が Checkout 自体を初期化し ( `stripe.initCheckout`、または CheckoutProvider を React とともに使用)、クライアント側で決済を確定します。React を使用する場合は、必ず `@stripe/react-stripe-js/checkout` からインポートし、`CheckoutProvider` を client secret とともに使用し、`checkout.confirm` を使用して確定します。HTML を使用する場合は、必ず `checkout = stripe.initCheckout({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` を使用し、`loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` で確定します。

Express Checkout Element は、ワンクリックの決済手段ボタンによる決済を受け付けるための導入です。サポートされている決済手段は、[Link](https://docs.stripe.com/payments/link.md)、[Apple Pay](https://docs.stripe.com/apple-pay.md)、[Google Pay](https://docs.stripe.com/google-pay.md)、[PayPal](https://docs.stripe.com/payments/paypal.md)、[Klarna](https://docs.stripe.com/payments/klarna.md)、[Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md) などです。

この導入によって、以下が可能になります。

- 顧客の店舗に基づいて支払いボタンを動的に並べ替える
- フロントエンドを変更することなく支払いボタンを追加する
- 既存の Elements インスタンスを再使用して Elements をシームレスに実装することで、時間を節約する

## デモを試す

以下のデモでは、構築済みのオプションを切り替えて、支払いインターフェイスの背景の色、レイアウト、サイズ、配送先住所収集を変更できます。このデモでは、Google Pay と Apple Pay が利用可能なプラットフォームでのみ表示されています。支払い方法ボタンは、サポート対象国でのみ表示されます。

デモが表示されない場合は、このページを[サポート対象のブラウザー](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers)で表示してみてください。

| オプション               | 説明                                                                                                                                                                                                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **加盟店の所在国**         | [Stripe.js の初期化](https://docs.stripe.com/js/initializing)に使用する[公開可能キー](https://docs.stripe.com/keys.md#obtain-api-keys)を使用して設定します。国を変更するには、Express Checkout Element のマウントを解除し、公開可能キーを更新してから、Express Checkout Element を再マウントする必要があります。                                                     |
| **背景色**             | [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md) を使用して色を設定します。ボタンテーマは Appearance API から継承されますが、[Element の作成時に直接定義する](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme)こともできます。 |
| **デスクトップとモバイルのサイズ** | ドロップダウンを使用して、Express Checkout Element がマウントされる親エレメントの最大ピクセル幅を設定します。750px (デスクトップ) または 320px (モバイル) を設定できます。                                                                                                                                                                               |
| **最大列数と最大行数**       | これらの値を設定するには、[Express Checkout Element を作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)するときに、[layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) パラメーターを使用します。            |
| **オーバーフローメニュー**     | これを設定するには、[Express Checkout Element を作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)するときに、[layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) パラメーターを使用します。               |
| **配送先住所を収集する**      | 配送先情報を収集するには、Express Checkout Element の[作成](https://docs.stripe.com/js/elements_object/create_express_checkout_element)時にオプションを渡す必要があります。[顧客の詳細情報の収集と項目の表示](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event)の詳細をご覧ください。                 |

## ガイドを見ながら始めましょう

[決済ページにワンクリックウォレットを追加する](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Checkout Sessions API を使用して、Express Checkout Element との導入を構築します。

[高度な導入でワンクリックウォレットを使用](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=elements): Payment Intents API を使用して、Express Checkout Element との導入を構築します。

[Express Checkout Element に移行する](https://docs.stripe.com/elements/express-checkout-element/migration.md): Payment Request Button Element からウェブの Express Checkout Element に移行します。

## 決済手段

Express Checkout Element は、有効で、サポート対象で、設定済みのワンクリックの支払い方法を表示します。

- 一部の決済手段では、[ダッシュボードでの有効化が必要です](https://dashboard.stripe.com/settings/payment_methods)。
- 支払い方法は、顧客が対応しているブラウザーを使用し、対応している通貨で支払う場合にのみ利用可能になります。
- 一部の支払い方法には顧客による設定操作が必要です。たとえば、顧客が Google Pay を設定していない場合、Google Pay ボタンは表示されません。
- テスト環境と本番環境の両方で[ドメインを登録します](https://docs.stripe.com/payments/payment-methods/pmd-registration.md)。

Element は顧客への関連性に基づいて支払い方法を並べ替えます。

これらの動作をコントロールするには、[支払い方法をカスタマイズ](https://docs.stripe.com/elements/express-checkout-element.md#customize-payment-methods)します。

## サポートされるブラウザー

支払い方法の中には、特定のブラウザーでのみ機能するものもあります。

|                    | Apple Pay  | Google Pay | Link      | PayPal    | Amazon Pay | Klarna    |
| ------------------ | ---------- | ---------- | --------- | --------- | ---------- | --------- |
| Chrome1            | ✓ サポート対象 3 | ✓ サポート対象   | ✓ サポート対象  | ✓ サポート対象  | ✓ サポート対象   | ✓ サポート対象  |
| Edge               | ✓ サポート対象 3 | ✓ サポート対象   | ✓ サポート対象  | ✓ サポート対象  | ✓ サポート対象   | ✓ サポート対象  |
| Firefox            | ❌ サポート対象外  | ✓ サポート対象5  | ❌ サポート対象外 | ✓ サポート対象  | ✓ サポート対象   | ❌ サポート対象外 |
| Opera              | ✓ サポート対象 3 | ✓ サポート対象   | ✓ サポート対象  | ✓ サポート対象  | ✓ サポート対象   | ✓ サポート対象  |
| Safari             | ✓ サポート対象2  | ✓ サポート対象 4 | ✓ サポート対象  | ✓ サポート対象  | ✓ サポート対象   | ✓ サポート対象  |
| iOS 16 以降の Chrome  | ✓ サポート対象   | ✓ サポート対象   | ✓ サポート対象  | ✓ サポート対象  | ✓ サポート対象   | ✓ サポート対象  |
| iOS 16 以降の Firefox | ✓ サポート対象   | ✓ サポート対象   | ✓ サポート対象  | ❌ サポート対象外 | ❌ サポート対象外  | ❌ サポート対象外 |
| iOS 16 以降の Edge    | ✓ サポート対象   | ✓ サポート対象   | ❌ サポート対象外 | ❌ サポート対象外 | ❌ サポート対象外  | ❌ サポート対象外 |

1 その他の Chromium ブラウザーでサポートされている場合があります。詳しくは、[サポート対象のブラウザー](https://docs.stripe.com/js/appendix/supported_browsers)をご覧ください。

2iframe を使用する場合は、そのオリジンが上位のオリジンと一致している必要があります (Safari 17 以降で `allow="payment"` 属性を指定する場合を除く)。プロトコル、ホスト (フルドメイン名)、ポート (指定されている場合) が 2 つのページで同一である場合、そのオリジンは同一です。

3 Chromium ブラウザー (デスクトップ版) での Apple Pay 決済は、MacOS で [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) が `always` に設定されている場合にのみサポートされます。

Safari 在住のブラウザーでの 4Google Pay は、[paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) が `always` 設定されている場合にのみサポートされます。

Firefox ブラウザーでの 5Google Pay は、[paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) が `always` 設定されている場合にのみサポートされます。

> Express Checkout Element はアプリ内のウェブビューではフルサポートされていません。多くの決済手段ではポップアップ画面の表示が必要ですが、ウェブビュー内ではこれらが正しく機能しない場合があります。モバイルアプリへの組み込みについては、[iOS SDK](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) または [Android SDK](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android) のご利用をご検討ください。

## レイアウト

デフォルトでは、Express Checkout Element は複数のボタンを表示する際、利用できるスペースに応じてボタンをグリッドに配置し、必要に応じてオーバーフローメニューを表示します。

このデフォルト設定を上書きし、[レイアウト](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout)オプションを使用して、自身でグリッドレイアウトを指定できます。

## テキスト

[buttonType](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonType) を選択して、ボタンのテキストをコントロールできます。ウォレットごとに固有のタイプが提供されます。

#### Link

Link で提供できるボタンタイプは 1 種類のみで、「Pay with Link」の行動喚起と Link のロゴが表示されます。

Stripe は顧客のロケールを検出し、それを使用してボタンのテキストを地域に合わせられるようにします。[ロケール](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale)を指定することもできます。

#### Apple Pay

Apple Pay ボタンタイプは Apple Pay のロゴの横にさまざまな行動喚起を表示します。

Stripe は顧客のロケールを検出し、それを Apple に渡して、ボタンのテキストを地域に合わせられるようにします。[ロケール](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale)を指定することもできます。

以下のような Apple Pay のボタンタイプをサポートしています。

| ボタンのタイプ      | 行動喚起       |
| ------------ | ---------- |
| `plain`      | なし、ロゴのみ    |
| `add-money`  | 「で資金を追加」   |
| `book`       | 「で予約」      |
| `buy`        | 「で購入」      |
| `check-out`  | 「で決済」      |
| `contribute` | 「で寄付」      |
| `donate`     | 「で寄付」      |
| `order`      | 「で注文」      |
| `reload`     | 「で再度読み込む」  |
| `rent`       | 「で借りる」     |
| `subscribe`  | 「で登録」      |
| `support`    | 「でサポート」    |
| `tip`        | 「でチップを支払う」 |
| `top-up`     | 「でトップアップ」  |

#### Google Pay

Google Pay ボタンタイプは Google Pay のロゴの横にさまざまな行動喚起を表示します。

Stripe は顧客のロケールを検出し、それを Google Pay に渡して、ボタンのテキストを地域に合わせられるようにします。[ロケール](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale)を指定することもできます。

以下のような Google Pay のボタンタイプをサポートしています。

| ボタンのタイプ     | 行動喚起    |
| ----------- | ------- |
| `plain`     | なし、ロゴのみ |
| `book`      | 「で予約」   |
| `buy`       | 「で購入」   |
| `checkout`  | 「で支払う」  |
| `donate`    | 「で寄付」   |
| `order`     | 「で注文」   |
| `pay`       | 「支払い方法」 |
| `subscribe` | 「で登録」   |

#### PayPal

PayPal ボタンタイプは PayPal のロゴの横にさまざまな行動喚起を表示します。

Stripe は顧客のロケールを検出し、それを PayPal に渡して、ボタンのテキストを地域に合わせられるようにします。[ロケール](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale)を指定することもできます。

以下のような PayPal のボタンタイプをサポートしています。

| ボタンのタイプ    | 行動喚起    |
| ---------- | ------- |
| `paypal`   | なし、ロゴのみ |
| `checkout` | 「購入」    |
| `buynow`   | 「今すぐ購入」 |
| `pay`      | 「支払い方法」 |

#### Amazon Pay

Amazon Pay では、行動喚起を伴わない Amazon Pay ロゴを表示する 1 つのボタンタイプのみが提供されます。

#### Klarna

Klarna のボタンタイプは、Klarna のロゴの横にさまざまな行動喚起を表示します。

Stripe は顧客のロケールを検出し、それを Klarna に渡して、ボタンのテキストを地域に合わせられるようにします。[ロケール](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale)を指定することもできます。

以下のような Klarna のボタンタイプをサポートしています。

|  |
|  |
| `continue` | 「で続ける」  |
| `pay`      | 「支払い方法」 |

このサンプルコードには、対応するボタンに「購入」や「今すぐ購入」の行動喚起が含まれています。次に、ドイツ語で同じように表示するために `de` のロケールを指定しています。

```js
const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
})
const expressCheckoutElement = elements.create(
  'expressCheckout',
  expressCheckoutOptions
)
expressCheckoutElement.mount('#express-checkout-element')
```

## デザイン

支払い方法のそれぞれにロゴとブランドカラーがあるため、Express Checkout Element ボタンの見た目を完全にカスタマイズすることはできません。以下のオプションをカスタマイズできます。

- [ボタンの高さ](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonHeight)
- [Appearance](https://docs.stripe.com/elements/appearance-api.md) API と変数を使用した境界半径
- [ボタンのテーマ](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme)

> 境界線の範囲が一定のしきい値を超えると、Apple Pay ボタンのサイズは自動的に変更されます。デフォルトの境界線の範囲を変更する場合は、すべての有効な決済手段でテストしてください。

このサンプルコードでは、薄い色のテーマと 36px の境界半径で Elements グループを設定し、ボタンの高さを 50px とし、白い輪郭線バージョンの Apple Pay ボタンを使用するようにテーマを上書きします。

```js
const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {
    applePay: 'white-outline'
  }
}
const elements = stripe.elements({
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  appearance,
})
const expressCheckoutElement = elements.create(
  'expressCheckout',
  expressCheckoutOptions
)
expressCheckoutElement.mount('#express-checkout-element')
```

以下のようなテーマをサポートしています。

#### Link

Link には、薄い色と濃い色のどちらの背景でも読むことができる 1 つのボタンテーマが用意されています。

#### PayPal

PayPal にはボタンテーマがいくつかあります。[Appearance](https://docs.stripe.com/elements/appearance-api.md) API でテーマを指定する場合、Express Checkout Element は PayPal ボタン向けの互換性のあるテーマを選択します。たとえば、濃い色の背景を指定すると、視認性を高めるために薄い色のボタンテーマが選択されます。

[buttonTheme.paypal](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-paypal) オプションを使用してテーマを選択することもできます。PayPal の[ボタンスタイルガイド](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/)で、最新の画像とその使用に関するガイダンスを確認できます。Stripe は次の値をサポートしています。

|  |
|  |
| `gold`   | PayPal の金色と青のブランドカラー |
| `blue`   | PayPal の青一色のブランドカラー  |
| `silver` | 銀色の背景に PayPal ロゴ     |
| `white`  | 白い背景に PayPal ロゴ      |
| `black`  | 黒い背景に PayPal ロゴ      |

#### Apple Pay

Apple Pay にはボタンテーマがいくつかあります。[Appearance](https://docs.stripe.com/elements/appearance-api.md) API でテーマを指定する場合、Express Checkout Element は Apple Pay ボタン向けの互換性のあるテーマを選択します。たとえば、濃い色の背景を指定すると、視認性を高めるために薄い色のボタンテーマが選択されます。

[buttonTheme.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-applePay) オプションを使用してテーマを選択することもできます。Apple Pay の[ボタンスタイルガイド](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons)で、最新の画像とその使用に関するガイダンスを確認できます。Stripe は次の値をサポートしています。

|  |
|  |
| `black`         | 黒い背景に白いテキスト       |
| `white`         | 白い背景に黒いテキスト       |
| `white-outline` | 白い背景に黒いテキストと黒い境界線 |

#### Google Pay

Google Pay にはボタンテーマがいくつかあります。[Appearance](https://docs.stripe.com/elements/appearance-api.md) API でテーマを指定する場合、Express Checkout Element は Google Pay ボタン向けの互換性のあるテーマを選択します。たとえば、濃い色の背景を指定すると、視認性を高めるために薄い色のボタンテーマが選択されます。

[buttonTheme.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-googlePay) オプションを使用してテーマを選択することもできます。Google Pay の[ブランドガイドライン](https://developers.google.com/pay/api/web/guides/brand-guidelines)で、最新の画像とその使用に関するガイダンスを確認できます。Stripe は次の値をサポートしています。

|  |
|  |
| `black` | 黒い背景に白いテキスト |
| `white` | 白い背景に黒いテキスト |

#### Amazon Pay

Amazon Pay には 1 つのボタンテーマが含まれています。

#### Klarna

Klarna にはボタンテーマがいくつかあります。[Appearance](https://docs.stripe.com/elements/appearance-api.md) API でテーマを指定する場合、Express Checkout Element は Klarna ボタン向けの互換性のあるテーマを選択します。たとえば、濃い色の背景を指定すると、視認性を高めるために薄い色のボタンテーマが選択されます。

[buttonTheme.klarna](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-klarna) オプションでテーマを選択することもできます。

## 支払い方法をカスタマイズする

表示する支払い方法を指定することはできません。たとえば、顧客のデバイスが Google Pay をサポートしていない場合に Google Pay ボタンを表示することはできません。

ただし、支払い方法の動作は次のような方法でカスタマイズできます。

- [ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で支払い方法を有効または無効にできます。
- Stripe のデフォルトのロジックは関連性によって支払い方法を並べ替えますが、これを上書きできます。自分の希望の順序を設定するには、[paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethodOrder) オプションを使用します。
- レイアウトにスペースが足りない場合は、関連性の低い支払い方法がオーバーフローメニューに表示される可能性があります。[レイアウト](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout)オプションを使用することで、メニューが表示されるタイミングをカスタマイズできます。
- Apple Pay または Google Pay が表示されないようにするには、[paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) または [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) に `never` を設定します。
- Apple Pay または Google Pay が設定されていない場合でもこれらの支払い方法が表示されるようにするには、[paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) または [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) に `always` を指定します。ただし、サポートされていないプラットフォームや、対応していない通貨での支払いに、これらの支払い方法が強制的に表示されることはありません。

> [フィンランド](https://support.stripe.com/questions/payment-method-legislation-in-finland) および[スウェーデン](https://support.stripe.com/questions/payment-method-legislation-in-sweden)の規制は、これらの国での決済時に口座引き落としによる支払い方法をクレジットの支払い方法より前に提示することを義務付けています。

## 利用可能な決済手段を確認する

ready イベントをリッスンして、Express Checkout Element で表示可能なウォレットを確認します。利用可能なウォレットがない場合、顧客に別の決済オプションを提示します。

```js
() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <ExpressCheckoutElement
        onReady={({ availablePaymentMethods }) => {
          if (availablePaymentMethods) {
            setEceActive(true);
          }
        }}
      />

      {eceActive
        ? <PayAnotherWayButton />
        : <PaymentElement />
      }
    </div>
  );
}
```

または、要素に表示するメソッドがあることがわかるまで、Express Checkout Element 全体を非表示にしてください。

```js
() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <OneClickCheckoutContainer hidden={!eceActive}>
        <ExpressCheckoutElement
          onReady={({ availablePaymentMethods }) => {
            if (availablePaymentMethods) {
              setEceActive(true);
            }
          }}
        />
      </OneClickCheckoutContainer>

      <PaymentElement />
    </div>
  );
}
```

React なしで作成された場合、Element オブジェクトでも同じイベントを使用できます。

```js
const expressCheckoutElement = elements.create("expressCheckout", { ... });

expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => {
  console.log(availablePaymentMethods);
});

expressCheckoutElement.mount("#express-checkout-element");
```