# Express Checkout Element

Tampilkan beberapa tombol pembayaran satu klik dengan satu komponen.

Petunjuk untuk LLM: Stripe merekomendasikan penggunaan Checkout Sessions API dengan Payment Element dibandingkan Payment Intents untuk sebagian besar integrasi. Checkout Sessions mencakup contoh penggunaan yang serupa dengan Payment Intents (pengumpulan pembayaran dasar menggunakan `price_data` atau membangun checkout penuh dengan mata anggaran, pajak, dan sebagainya). Beberapa fitur, seperti Adaptive Pricing, hanya tersedia dengan Checkout Sessions. Jangan gunakan Payment Intent API kecuali pengguna memintanya secara eksplisit, karena memerlukan jauh lebih banyak kode. Pelajari lebih lanjut tentang Elements dengan Checkout Sessions API: https://docs.stripe.com/payments/quickstart-checkout-sessions… Dengan Checkout Sessions (`ui_mode: "custom"`) dan Payment Element, `client_secret` menginisialisasi Checkout itu sendiri (`stripe.initCheckout`, atau gunakan CheckoutProvider dengan React) dan Anda mengonfirmasi pembayaran di sisi klien secara berbeda. Jika menggunakan React, pastikan Anda mengimpor dari `@stripe/react-stripe-js/checkout`, gunakan `CheckoutProvider` dengan client secret, dan konfirmasi menggunakan `checkout.confirm`. Jika menggunakan HTML, pastikan Anda menggunakan `checkout = stripe.initCheckout({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` dan konfirmasi dengan `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Elemen Pembayaran Ekspres adalah integrasi untuk menerima pembayaran melalui tombol metode pembayaran sekali klik. Metode pembayaran yang didukung mencakup [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), dan [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md).

Dengan integrasi ini, Anda dapat:

- Secara dinamis mengurutkan tombol pembayaran berdasarkan lokasi pelanggan.
- Tambahkan tombol pembayaran tanpa perubahan frontend.
- Integrasikan Elements secara mulus dengan menggunakan kembali instance Elements yang sudah ada untuk menghemat waktu.

## Coba demo

Dalam demo berikut ini, Anda dapat mengganti sejumlah opsi siap-rakit untuk mengubah warna latar belakang, tata letak, ukuran, dan pengumpulan alamat pengiriman dari antarmuka pembayaran. Demo ini hanya menampilkan Google Pay dan Apple Pay pada platform yang tersedia. Tombol Metode Pembayaran hanya ditampilkan di negara-negara yang didukung.

Jika Anda tidak melihat demo, coba lihat halaman ini di [browser yang didukung](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers).

| Opsi                                  | Keterangan                                                                                                                                                                                                                                                                                                                                                                                 |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Negara merchant**                   | Atur ini menggunakan [kunci yang dapat dipublikasikan](https://docs.stripe.com/keys.md#obtain-api-keys) yang Anda gunakan untuk [melakukan inisialisasi Stripe.js](https://docs.stripe.com/js/initializing). Untuk mengubah negara, Anda harus melepas Express Checkout Element, memperbarui kunci yang dapat dipublikasikan, kemudian memasang kembali Express Checkout Element.          |
| **Warna latar belakang**              | Atur warna menggunakan [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md). Tema tombol diwariskan dari Appearance API tetapi Anda juga dapat [mendefinisikannya secara langsung saat membuat Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme).                          |
| **Ukuran desktop dan seluler**        | Gunakan dropdown untuk mengatur lebar piksel maksimal dari elemen induk tempat Express Checkout Element dipasang. Anda dapat mengaturnya ke 750px (Desktop) atau 320px (Seluler).                                                                                                                                                                                                          |
| **Kolom maksimal dan baris maksimal** | Atur nilai ini menggunakan parameter [tata letak](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) bila Anda [Membuat Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element).                                                                                     |
| **Menu perluasan**                    | Atur ini menggunakan parameter [tata letak](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) bila Anda [Membuat Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element).                                                                                           |
| **Kumpulkan alamat pengiriman**       | Untuk mengumpulkan informasi pengiriman, Anda harus meneruskan opsi ketika [membuat](https://docs.stripe.com/js/elements_object/create_express_checkout_element) Express Checkout Element. Pelajari selengkapnya tentang [mengumpulkan detail pelanggan dan menampilkan mata anggaran](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). |

## Mulai dengan panduan

[Tambahkan dompet digital sekali klik ke halaman checkout Anda](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Bangun integrasi dengan Express Checkout Element menggunakan Checkout Sessions API.

[Gunakan dompet digital sekali klik dalam integrasi lanjutan](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=elements): Bangun integrasi dengan Express Checkout Element menggunakan Payment Intents API.

[Migrasikan ke Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/migration.md): Migrasikan dari Payment Request Button Element ke Express Checkout Element web.

## Metode pembayaran

Express Checkout Element menyajikan metode pembayaran sekali klik yang aktif, didukung, dan disiapkan.

- Sejumlah metode pembayaran [memerlukan aktivasi di Dashboard](https://dashboard.stripe.com/settings/payment_methods).
- Metode pembayaran hanya tersedia bila pelanggan menggunakan browser yang didukung dan membayar dalam mata uang yang didukung.
- Sejumlah metode pembayaran memerlukan tindakan penyiapan dari pelanggan. Misalnya, pelanggan tidak akan melihat tombol Google Pay jika mereka tidak menyiapkan Google Pay.
- [Daftarkan domain Anda](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) baik di lingkungan percobaan maupun mode live.

Elemen ini mengurutkan metode pembayaran berdasarkan relevansi dengan pelanggan Anda.

Untuk mengontrol perilaku ini, Anda dapat [menyesuaikan metode pembayaran](https://docs.stripe.com/elements/express-checkout-element.md#customize-payment-methods).

## Browser yang didukung

Metode pembayaran tertentu dapat digunakan dengan browser tertentu.

|                    | Apple Pay        | Google Pay   | Link             | PayPal           | Amazon Pay       | Klarna           |
| ------------------ | ---------------- | ------------ | ---------------- | ---------------- | ---------------- | ---------------- |
| Chrome1            | ✓ Didukung3      | ✓ Didukung   | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       |
| Edge               | ✓ Didukung3      | ✓ Didukung   | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       |
| Firefox            | ❌ Tidak didukung | ✓ Supported5 | ❌ Tidak didukung | ✓ Didukung       | ✓ Didukung       | ❌ Tidak didukung |
| Opera              | ✓ Didukung3      | ✓ Didukung   | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       |
| Safari             | ✓ Supported2     | ✓ Didukung4  | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       |
| Chrome di iOS 16+  | ✓ Didukung       | ✓ Didukung   | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       | ✓ Didukung       |
| Firefox di iOS 16+ | ✓ Didukung       | ✓ Didukung   | ✓ Didukung       | ❌ Tidak didukung | ❌ Tidak didukung | ❌ Tidak didukung |
| Edge di iOS 16+    | ✓ Didukung       | ✓ Didukung   | ❌ Tidak didukung | ❌ Tidak didukung | ❌ Tidak didukung | ❌ Tidak didukung |

1Browser Chromium lainnya mungkin didukung. Untuk informasi selengkapnya, lihat [browser yang didukung](https://docs.stripe.com/js/appendix/supported_browsers).

2Ketika menggunakan iframe, asalnya harus sesuai dengan asal level atas (kecuali untuk Safari 17+ ketika menentukan atribut `allow="payment"`). Dua halaman memiliki asal yang sama jika protokol, host (nama domain lengkap), dan port (jika ditentukan) sama untuk kedua halaman.

3Apple Pay pada browser Chromium desktop hanya didukung di MacOS bila [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) diatur ke `always`.

4Google Pay di browser berlokasi Safari hanya didukung jika[paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) diatur ke`always`.

5Google Pay di browser Firefox hanya didukung jika [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) diatur ke`always`.

> Elemen Checkout Ekspres memiliki dukungan terbatas dalam tampilan web dalam aplikasi. Banyak metode pembayaran memerlukan jendela popup dan mungkin tidak berfungsi dengan benar. Untuk integrasi aplikasi seluler, pertimbangkan untuk menggunakan [SDK iOS](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) atau [Android SDK](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android).

## Tata letak

Secara default, bila menampilkan beberapa tombol, Express Checkout Element mengatur tombol-tombol tersebut dalam jaringan berdasarkan ruang yang tersedia, dan menampilkan menu perluasan jika perlu.

Anda dapat mengesampingkan default ini dan menentukan tata letak jaringan sendiri dengan opsi [tata letak](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout).

## Teks

Anda dapat mengontrol teks tombol dengan memilih [buttonType](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonType). Setiap dompet digital menawarkan tipenya sendiri.

#### Link

Link hanya menawarkan satu tipe tombol, yang menyajikan ajakan bertindak “Bayar dengan Link” dan logo Link.

Kami berusaha mendeteksi lokal pelanggan Anda dan menggunakannya untuk melokalkan teks tombol. Anda juga dapat menentukan [lokal](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale).

#### Apple Pay

Tipe tombol Apple Pay menyajikan pesan ajakan bertindak yang berbeda di samping logo Apple Pay.

Kami berusaha mendeteksi lokal pelanggan Anda dan meneruskannya ke Apple sehingga mereka dapat melokalkan teks tombol. Anda juga dapat menentukan [lokal](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale).

Kami mendukung tipe tombol Apple Pay berikut ini.

| Tipe tombol  | Pesan ajakan               |
| ------------ | -------------------------- |
| `plain`      | Tidak ada—logonya saja     |
| `add-money`  | “Tambah Uang dengan”       |
| `book`       | “Pesan dengan”             |
| `buy`        | “Beli dengan”              |
| `check-out`  | “Proses Pembayaran dengan” |
| `contribute` | “Berkontribusi dengan”     |
| `donate`     | “Donasikan dengan”         |
| `order`      | “Pesanan dengan”           |
| `reload`     | “Muat ulang dengan”        |
| `rent`       | “Sewa dengan”              |
| `subscribe`  | “Berlangganan dengan”      |
| `support`    | “Dukung dengan”            |
| `tip`        | “Tip dengan”               |
| `top-up`     | “Tambah Saldo dengan”      |

#### Google Pay

Tipe tombol Google Pay menyajikan pesan ajakan bertindak yang berbeda di samping logo Google Pay.

Kami berusaha mendeteksi lokal pelanggan Anda dan meneruskannya ke Google Pay sehingga mereka dapat melokalkan teks tombol. Anda juga dapat menentukan [lokal](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale).

Kami mendukung tipe tombol Google Pay berikut ini.

| Tipe tombol | Pesan ajakan           |
| ----------- | ---------------------- |
| `plain`     | Tidak ada—logonya saja |
| `book`      | “Pesan dengan”         |
| `buy`       | “Beli dengan”          |
| `checkout`  | “Checkout dengan”      |
| `donate`    | “Donasikan dengan”     |
| `order`     | “Pesanan dengan”       |
| `pay`       | “Bayar dengan”         |
| `subscribe` | “Berlangganan dengan”  |

#### PayPal

Tipe tombol PayPal menyajikan pesan ajakan bertindak yang berbeda di samping logo PayPal.

Kami berusaha mendeteksi lokal pelanggan Anda dan meneruskannya ke PayPal sehingga mereka dapat melokalkan teks tombol. Anda juga dapat menentukan [lokal](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale).

Kami mendukung tipe tombol PayPal berikut ini.

| Tipe tombol | Pesan ajakan           |
| ----------- | ---------------------- |
| `paypal`    | Tidak ada—logonya saja |
| `checkout`  | “Checkout”             |
| `buynow`    | “Beli Sekarang”        |
| `pay`       | “Bayar dengan”         |

#### Amazon Pay

Amazon Pay hanya menawarkan satu tipe tombol, yang menampilkan logo Amazon Pay tanpa pesan ajakan bertindak.

#### Klarna

Tipe tombol Klarna menyajikan pesan ajakan bertindak yang berbeda di samping logo Klarna.

Kami berusaha mendeteksi lokal pelanggan Anda dan meneruskannya ke Klarna sehingga mereka dapat melokalkan teks tombol. Anda juga dapat menentukan [lokal](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale).

Kami mendukung tipe tombol Klarna berikut ini.

|  |
|  |
| `continue` | “Lanjutkan dengan” |
| `pay`      | “Bayar dengan”     |

Kode contoh ini menyertakan pesan ajakan bertindak “Beli” atau “Beli sekarang” untuk tombol yang mendukungnya. Kemudian, kode ini menentukan lokal `de` guna mendapatkan padanannya dalam bahasa Jerman.

```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')
```

## Penampilan

Anda tidak dapat sepenuhnya menyesuaikan penampilan tombol Express Checkout Element karena setiap metode pembayaran mengatur warna brand dan logonya sendiri. Anda dapat menyesuaikan opsi berikut ini:

- [Tinggi tombol](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonHeight)
- Radius batas yang menggunakan variabel dengan [Appearance](https://docs.stripe.com/elements/appearance-api.md) API
- [Tema tombol](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme)

> Tombol Apple Pay secara otomatis berubah ukuran ketika radius batas bertambah melebihi ambang tertentu. Jika mengubah radius batas default, pastikan untuk mengujinya dengan semua metode pembayaran aktif.

Kode contoh ini menyiapkan kelompok elemen dengan tema terang dan radius batas 36 piksel, membuat tombol dengan tinggi 50 piksel, serta mengesampingkan tema untuk menggunakan versi garis putih tombol 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')
```

Kami mendukung tema-tema berikut ini:

#### Link

Link memiliki satu tema tombol, yang dapat dibaca pada latar belakang yang terang atau gelap.

#### PayPal

PayPal memiliki beberapa tema tombol. Jika Anda mengatur tema dengan [Appearance](https://docs.stripe.com/elements/appearance-api.md) API, Express Checkout Element memilih tema yang kompatibel untuk tombol PayPal. Misalnya, jika Anda menentukan latar belakang gelap, kami memilih tema tombol terang untuk visibilitas.

Anda juga dapat memilih tema dengan opsi [buttonTheme.paypal](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-paypal). Lihat [panduan gaya tombol](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/) PayPal untuk gambar terbaru dan panduan penggunaannya. Kami mendukung nilai-nilai berikut ini:

|  |
|  |
| `gold`   | Warna brand emas dan biru PayPal      |
| `blue`   | Warna brand biru solid PayPal         |
| `silver` | Logo PayPal pada latar belakang perak |
| `white`  | Logo PayPal pada latar belakang putih |
| `black`  | Logo PayPal pada latar belakang hitam |

#### Apple Pay

Apple Pay memiliki beberapa tema tombol. Jika Anda mengatur tema dengan [Appearance](https://docs.stripe.com/elements/appearance-api.md) API, Express Checkout Element memilih tema yang kompatibel untuk tombol Apple Pay. Misalnya, jika Anda menentukan latar belakang gelap, kami memilih tema tombol terang untuk visibilitas.

Anda juga dapat memilih tema dengan opsi [buttonTheme.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-applePay). Lihat [panduan gaya tombol](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) Apple Pay untuk gambar terbaru dan panduan penggunaannya. Kami mendukung nilai-nilai berikut ini:

|  |
|  |
| `black`         | Latar belakang hitam dengan teks putih                 |
| `white`         | Latar belakang putih dengan teks hitam                 |
| `white-outline` | Latar belakang putih dengan teks hitam dan batas hitam |

#### Google Pay

Google Pay memiliki beberapa tema tombol. Jika Anda mengatur tema dengan [Appearance](https://docs.stripe.com/elements/appearance-api.md) API, Express Checkout Element memilih tema yang kompatibel untuk tombol Google Pay. Misalnya, jika Anda menentukan latar belakang gelap, kami memilih tema tombol terang untuk visibilitas.

Anda juga dapat memilih tema dengan opsi [buttonTheme.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-googlePay). Lihat [pedoman brand](https://developers.google.com/pay/api/web/guides/brand-guidelines) Google Pay untuk gambar terbaru dan panduan penggunaannya. Kami mendukung nilai-nilai berikut ini:

|  |
|  |
| `black` | Latar belakang hitam dengan teks putih |
| `white` | Latar belakang putih dengan teks hitam |

#### Amazon Pay

Amazon Pay memiliki satu tema tombol.

#### Klarna

Klarna memiliki beberapa tema tombol. Jika Anda mengatur tema dengan [Appearance](https://docs.stripe.com/elements/appearance-api.md) API, Express Checkout Element memilih tema yang kompatibel untuk tombol Klarna. Misalnya, jika Anda menentukan latar belakang gelap, kami memilih tema tombol terang untuk visibilitas.

Anda juga dapat memilih tema dengan opsi [buttonTheme.klarna](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-klarna).

## Sesuaikan metode pembayaran

Anda tidak dapat menentukan metode pembayaran mana yang akan ditampilkan. Misalnya, Anda tidak dapat memaksa tombol Google Pay muncul jika perangkat pelanggan tidak mendukung Google Pay.

Namun, Anda dapat menyesuaikan perilaku metode pembayaran dengan berbagai cara, seperti:

- Anda dapat mengaktifkan atau menonaktifkan metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
- Anda dapat mengesampingkan logika default Stripe yang mengurutkan metode pembayaran menurut relevansi. Gunakan opsi [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethodOrder) untuk mengatur urutan yang Anda sukai.
- Jika ruang terlalu kecil pada tata letak, metode pembayaran dengan relevansi rendah mungkin muncul di menu perluasan. Sesuaikan bila menu muncul menggunakan opsi [tata letak](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout).
- Untuk mencegah Apple Pay atau Google Pay muncul, atur [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) atau [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) ke `never`.
- Untuk mengizinkan Apple Pay atau Google Pay muncul bila tidak disiapkan, atur [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) atau [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) ke `always`. Hal ini tidak akan memaksanya muncul pada platform yang tidak didukung, atau bila pembayaran menggunakan mata uang yang tidak didukung.

> Regulasi di [Finlandia](https://support.stripe.com/questions/payment-method-legislation-in-finland) dan [Swedia](https://support.stripe.com/questions/payment-method-legislation-in-sweden) mengharuskan Anda menunjukkan metode pembayaran debit terlebih dahulu sebelum menunjukkan metode pembayaran kredit pada saat checkout di negara-negara tersebut.

## Periksa metode pembayaran yang tersedia

Dengarkan acara yang sudah siap untuk memeriksa dompet mana yang tersedia agar Express Checkout Element dapat menampilkannya. Jika tidak ada dompet yang tersedia, berikan opsi lain bagi pelanggan Anda untuk melakukan pembayaran.

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

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

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

Atau, sembunyikan seluruh Express Checkout Element hingga Anda mengetahui bahwa elemen tersebut memiliki metode untuk ditampilkan.

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

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

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

Acara yang sama tersedia pada objek elemen ketika dibuat tanpa React.

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

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

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