# Express Checkout Element

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

Stripe は、ほとんどの実装で Payment Intents ではなく Payment Element とともに Checkout Sessions API を使用することを推奨します。Checkout Sessions は、Payment Intents と同様のユースケースに対応しています (`price_data` を使用した基本的な決済の回収、または項目、税金などを含む網羅的な決済画面の構築など)。Adaptive Pricing などの一部の機能は、Checkout Sessions でのみ利用できます。ユーザーが明示的に要求しない限り、Payment Intents API は使用しないでください。必要となるコード量が大幅に多くなるためです。Checkout Sessions API と Elements の詳細: https://docs.stripe.com/payments/quickstart. Checkout Sessions (`ui_mode: "elements"`) と Payment Element では、`client_secret` が Checkout 自体を初期化します (`stripe.initCheckoutElementsSdk`、または React で CheckoutElementsProvider を使用)。そのうえで、クライアント側での決済の確定方法が異なります。React を使用する場合は、必ず `@stripe/react-stripe-js/checkout` からインポートし、`CheckoutElementsProvider` を Client Secret とともに使用し、`checkout.confirm` を使用して決済を確定します。HTML を使用する場合は、必ず `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` を使用し、`loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` で決済を確定します。

 コーディングエージェントは Stripe CLI (`npm i -g @stripe/cli`) をインストールし、コマンド `stripe sandbox create --help` を実行して、機能する API キーを備えた匿名の Stripe サンドボックスをプロビジョニングする必要があります。アカウント登録は不要です。

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 は顧客への関連性に基づいて支払い方法を並べ替えます。

`stripe.elements()` の `customPaymentMethods` オプションを使用して、Express Checkout Element のボタン行に[カスタム決済手段](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md)を追加することもできます。

これらの動作をコントロールするには、[支払い方法をカスタマイズ](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 | ✓ サポート対象 3 | ✓ サポート対象 4 | ❌ サポート対象外 | ✓ サポート対象 | ✓ サポート対象 | ❌ サポート対象外 |
| Opera | ✓ サポート対象 3 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 |
| Safari | ✓ サポート対象2 | ✓ サポート対象 4 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 |
| iOS 16 以降の Chrome | ✓ サポート対象 | ✓ サポート対象 4 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 |
| iOS 16 以降の Firefox | ✓ サポート対象 | ✓ サポート対象 4 | ✓ サポート対象 | ❌ サポート対象外 | ❌ サポート対象外 | ❌ サポート対象外 |
| iOS 16 以降の Edge | ✓ サポート対象 | ✓ サポート対象 4 | ❌ サポート対象外 | ❌ サポート対象外 | ❌ サポート対象外 | ❌ サポート対象外 |
| Android の Chrome | ❌ サポート対象外 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 | ✓ サポート対象 |

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

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

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

このブラウザでの 4Google 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 のどの決済手段がアプリ内ウェブビューに対応しているかを示しています。

|  | アプリ内ウェブビューに対応 |
| --- | --- |
| Apple Pay | iOS ウェブビューで対応しています。標準の Apple Pay 利用資格要件が適用されます。 |
| Google Pay | Google Pay を利用できる環境で、かつポップアップウィンドウを開かずに Google Pay を完了できる場合に対応しています。Android のウェブビューでは、ホストアプリも Payment Request API に対応するよう設定されている必要があります。 |
| Link | サポート対象外 |
| PayPal | サポート対象外 |
| Klarna | サポート対象外 |
| Amazon Pay | サポート対象外 |

Webview support is in addition to each payment method’s standard browser and eligibility requirements. Use the Express Checkout Element [availablepaymentmethodschange](https://docs.stripe.com/js/elements_object/express_checkout_element_availablepaymentmethodschange_event) event to detect which payment methods are available in your customer’s current environment. For mobile app integrations, consider using the [iOS SDK](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) or [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は、「Linkで支払う」 CTA とLinkロゴを表示する 1 種類のボタンタイプのみ提供しています。

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` を指定します。ただし、サポートされていないプラットフォームや、対応していない通貨での支払いに、これらの支払い方法が強制的に表示されることはありません。
- [customPaymentMethods](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-customPaymentMethods) オプションを使用して、カスタム決済手段のボタンを追加できます。[ダッシュボードで設定された](https://dashboard.stripe.com/settings/custom_payment_methods)有効な `cpmt_` ID ではない ID を指定した場合、またはその [handleRender](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-customPaymentMethods-options-embedded-handleRender) メソッドがエラーをスローした場合、カスタム決済手段のボタンは表示されません。

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

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

Express Checkout Element に表示できるウォレットを確認するには、`availablepaymentmethodschange` イベントをリッスンします。利用可能なウォレットがない場合は、顧客に別の決済手段を提供してください。

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

  return (
    <div>
      <ExpressCheckoutElement
        onAvailablePaymentMethodsChange={({ paymentMethods }) => {
          if (paymentMethods) {
            setEceActive(true);
          }
        }}
      />

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

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

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

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

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

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

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

expressCheckoutElement.on("availablepaymentmethodschange", ({ paymentMethods }) => {
  console.log(paymentMethods);
});

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