# Terima pembayaran

Terima pembayaran dengan aman secara online.

## Start here: Install agent skills

Stripe recommends using official skills to integrate with the API using best practices. Follow the instructions below to learn how.

**Tip: Use curl instead of Fetch tools.** Skills are detailed 10–20 KB markdown files. Fetch tools summarize them. `curl -sL` guarantees the full content.

**Using `npx skills`**: Check if `npx` is installed on the system. If `npx` is available, run `npx skills add https://docs.stripe.com --list` to list available skills, then run `npx skills add https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` to install individual skills.

**If `npx skills` isn’t available**: You can use curl to fetch the index of available skills, what they do, and their files from `https://docs.stripe.com/.well-known/skills/index.json`. To download a skill and its related files, use curl to download them from `https://docs.stripe.com/.well-known/skills/<filepath>`.

For this article, we recommend using these skills: `stripe-best-practices`

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.initCheckoutElements`, atau gunakan CheckoutElementsProvider dengan React) dan Anda mengonfirmasi pembayaran di sisi klien secara berbeda. Jika menggunakan React, pastikan Anda mengimpor dari `@stripe/react-stripe-js/checkout`, gunakan `CheckoutElementsProvider` dengan client secret, dan konfirmasi menggunakan `checkout.confirm`. Jika menggunakan HTML, pastikan Anda menggunakan `checkout = stripe.initCheckoutElements({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();`.

Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online.

# Halaman yang di-hosting Stripe

> This is a Halaman yang di-hosting Stripe for when payment-ui is checkout and ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=stripe-hosted.

Alihkan ke halaman pembayaran yang di-hosting Stripe menggunakan [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Lihat cara membandingkan integrasi ini [dengan tipe integrasi Stripe lainnya](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

#### Upaya integrasi
Complexity: 2/5
#### Tipe integrasi

Alihkan ke halaman pembayaran yang di-hosting Stripe

#### Penyesuaian UI
Penyesuaian terbatas
- 20 font preset
- 3 radius batas preset
- Warna batas dan latar belakang custom
- Logo custom

[Cobalah](https://checkout.stripe.dev/)

Pertama, [mendaftarlah](https://dashboard.stripe.com/register) untuk akun Stripe.

Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Alihkan pelanggan Anda ke Stripe Checkout [Sisi client] [Sisi server]

Tambahkan tombol checkout ke situs web Anda yang memanggil endpoint sisi server untuk membuat [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions/create.md).

Anda juga dapat membuat Sesi Checkout untuk [pelanggan yang ada](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), sehingga memungkinkan Anda otomatis mengisi bidang Checkout dengan informasi kontak yang diketahui dan menyatukan riwayat pembelian Anda untuk pelanggan tersebut.

```html
<html>
  <head>
    <title>Buy cool new product</title>
  </head>
  <body>
    <!-- Use action="/create-checkout-session.php" if your server is PHP based. -->
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Checkout</button>
    </form>
  </body>
</html>
```

Sesi Checkout adalah representasi terprogram dari apa yang dilihat pelanggan Anda saat mereka dialihkan ke formulir pembayaran. Anda dapat mengonfigurasinya dengan opsi seperti:

- [Mata anggaran](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) untuk di-charge
- Mata uang untuk digunakan

Anda harus mengisi `success_url` dengan nilai URL halaman di situs web Anda yang dikembalikan oleh Checkout kepada pelanggan Anda setelah mereka menyelesaikan pembayaran.

> Sesi Checkout akan kedaluwarsa dalam waktu 24 jam setelah pembuatan secara default.

Setelah membuat Sesi Checkout, alihkan pelanggan Anda ke [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) yang dikembalikan di respons.

#### Ruby

```ruby
# This example sets up an endpoint using the Sinatra framework.


require 'json'
require 'sinatra'
require 'stripe'

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-checkout-session' dosession = client.v1.checkout.sessions.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',
    # These placeholder URLs will be replaced in a following step.
    success_url: 'https://example.com/success',
  })

  redirect session.url, 303
end
```

### Metode pembayaran

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya. Anda dapat mengaktifkan atau menonaktifkan metode pembayaran individual di [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Di Checkout, Stripe mengevaluasi mata uang dan batasan, lalu menyajikan metode pembayaran yang didukung secara dinamis kepada pelanggan.

Untuk melihat cara metode pembayaran Anda ditampilkan kepada pelanggan, masukkan identifikasi transaksi atau tetapkan jumlah pesanan dan mata uang di Dashboard.

Anda dapat mengaktifkan Apple Pay dan Google Pay di [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods). Secara default, Apple Pay diaktifkan dan Google Pay dinonaktifkan. Namun, dalam beberapa kasus Stripe memfilternya bahkan saat diaktifkan. Kami memfilter Google Pay jika Anda [mengaktifkan pajak otomatis](https://docs.stripe.com/tax/checkout.md) tanpa mengumpulkan alamat pengiriman.

Halaman Checkout yang di-hosting Stripe tidak perlu perubahan integrasi untuk mengaktifkan Apple Pay atau Google Pay. Stripe menangani pembayaran ini dengan cara yang sama seperti pembayaran kartu lainnya.

### Konfirmasikan endpoint Anda

Konfirmasi endpoint Anda dapat diakses dengan memulai server web (misalnya, `localhost:4242`) dan menjalankan perintah berikut:

```bash
curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""
```

Anda akan melihat respons di terminal seperti ini:

```bash
HTTP/1.1 303 See Other
Location: https://checkout.stripe.com/c/pay/cs_test_...
...
```

### Verifikasi integrasi Anda

Anda sekarang telah memiliki tombol checkout yang mengalihkan pelanggan ke Stripe Checkout.

1. Klik tombol checkout.
1. Anda akan dialihkan ke formulir pembayaran Stripe Checkout.

Jika integrasi Anda tidak berhasil:

1. Buka tab Network di alat pengembang browser Anda.
1. Klik tombol checkout dan konfirmasikan dengan mengirim permintaan XHR ke endpoint sisi server Anda (`POST /create-checkout-session`).
1. Verifikasi bahwa permintaan mengembalikan status 200.
1. Gunakan `console.log(session)` di dalam listener klik tombol Anda untuk mengonfirmasi bahwa data yang benar dikembalikan.

## Tampilkan halaman berhasil [Sisi client] [Sisi server]

Pelanggan Anda perlu melihat halaman berhasil setelah mereka berhasil menyerahkan formulir pembayaran. Hosting halaman berhasil ini di situs Anda.

Buat halaman berhasil minimal:

```html
<html>
  <head><title>Thanks for your order!</title></head>
  <body>
    <h1>Thanks for your order!</h1>
    <p>
      We appreciate your business!
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </body>
</html>
```

Berikutnya, perbarui endpoint pembuatan Sesi Checkout untuk menggunakan halaman baru ini:

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=http://localhost:4242/success.html"
```

> Jika Anda ingin menyesuaikan halaman berhasil, baca panduan [halaman berhasil custom](https://docs.stripe.com/payments/checkout/custom-success-page.md).

## Tangani kejadian pascapembayaran

Stripe mengirim kejadian [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) bila pelanggan menyelesaikan pembayaran Sesi Checkout. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima dan menangani kejadian ini, yang mungkin memicu Anda untuk:

- Kirim email konfirmasi pesanan ke pelanggan Anda.
- Catat penjualan di database.
- Mulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu pelanggan dialihkan kembali ke situs web Anda. Memicu pemenuhan hanya dari halaman penyambut Checkout Anda tidak dapat diandalkan. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Pelajari selengkapnya di [panduan pemenuhan untuk Checkout](https://docs.stripe.com/checkout/fulfillment.md) kami.

Tangani kejadian berikut ketika menagih pembayaran dengan Checkout:

| Kejadian                                                                                                                                     | Keterangan                                                                                                      | Tindakan                                                                                                                                                                                       |
| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)                             | Dikirim bila pelanggan berhasil menyelesaikan Sesi Checkout.                                                    | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka. |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Dikirim bila pembayaran yang dilakukan dengan metode pembayaran tertunda, seperti utang ACH langsung, berhasil. | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka. |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed)       | Dikirim bila pembayaran yang dilakukan dengan metode pembayaran tertunda, seperti utang langsung ACH, gagal.    | Beri tahu pelanggan tentang kegagalan tersebut dan bawa mereka kembali ke sesi untuk mencoba pembayaran lagi.                                                                                  |

## Coba integrasi Anda

Untuk mencoba integrasi formulir pembayaran yang di-hosting Stripe Anda:

1. Buat Sesi Checkout.
1. Isilah detail pembayaran dengan metode dari tabel berikut.
   - Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
   - Masukkan nomor 3 angka untuk CVC.
   - Masukkan kode pos tagihan.
1. Klik **Bayar**. Anda akan dialihkan ke `success_url`.
1. Masuk ke Dashboard dan cari pembayaran pada [halaman Transaksi](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
1. Klik pembayaran Anda untuk melihat detail selengkapnya, seperti ringkasan Checkout dengan informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk memenuhi pesanan.

Pelajari selengkapnya tentang [percobaan integrasi Anda](https://docs.stripe.com/testing.md).

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Dompet

| Metode pembayaran | Skenario                                                                                                                                                                                           | Cara mencoba                                                                                                                                                                                             |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi segera](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. |

#### Pengarahan ulang bank

| Metode pembayaran                      | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                              |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung BECS                    | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS.                                                                                                                                              | Isi formulir menggunakan nomor akun `900123456` dan BSB `000000`. PaymentIntent yang telah dikonfirmasi awalnya akan berstatus `processing`, kemudian berubah menjadi status `succeeded` setelah 3 menit. |
| Debit Langsung BECS                    | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`.                                                                                                                                   | Isi formulir menggunakan nomor akun `111111113` dan BSB `000000`.                                                                                                                                         |
| Bancontact, EPS, iDEAL, dan Przelewy24 | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.    |
| Pay by Bank                            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                      |
| Pay by Bank                            | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                        |
| BLIK                                   | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

#### Voucher

| Metode pembayaran | Skenario                                                 | Cara mencoba                                                                                           |
| ----------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Boleto, OXXO      | Pelanggan Anda membayar dengan voucher OXXO atau Boleto. | Pilih Boleto atau OXXO sebagai metode pembayaran dan serahkan pembayaran. Tutup dialog setelah muncul. |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Buat produk dan harga

Sebelum membuat Sesi Checkout, Anda dapat membuat *Produk* (Products represent what your business sells—whether that's a good or a service) dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) di muka. Gunakan produk untuk mewakili barang fisik atau tingkat layanan yang berbeda, dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) untuk mewakili harga setiap produk. Kamu bisa [mengatur Sesi Checkout Anda](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) untuk menerima tip dan donasi, atau menjual produk dan layanan dengan sistem bayar sesukanya.

Misalnya, Anda dapat membuat kaus pendek sebagai produk dengan harga 20 USD. Hal ini memungkinkan Anda memperbarui dan menambahkan harga tanpa perlu mengubah detail produk pokok. Anda dapat membuat produk dan harga dengan Dashboard Stripe atau API. Pelajari selengkapnya tentang [cara kerja produk dan harga](https://docs.stripe.com/products-prices/how-products-and-prices-work.md).

#### API

API hanya memerlukan `name` untuk membuat [Produk](https://docs.stripe.com/api/products.md). Checkout menampilkan `name`, `description`, dan `images` produk yang Anda berikan.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

Berikutnya, buat [Harga](https://docs.stripe.com/api/prices.md) untuk menentukan jumlah yang akan Anda charge untuk produk Anda. Hal ini termasuk biaya produk dan mata uang yang digunakan.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "product={{PRODUCT_ID}}" \
  -d unit_amount=2000 \
  -d currency=usd
```

#### Dashboard

> Salin produk yang dibuat di sandbox ke mode live sehingga Anda tidak perlu membuatnya lagi. Pada tampilan detail Produk di Dashboard, klik **Salin ke mode live** di sudut kanan atas. Anda hanya dapat melakukannya sekali untuk setiap produk yang dibuat di sandbox. Pembaruan selanjutnya pada produk percobaan tidak tercermin untuk produk live.

Pastikan Anda berada di sandbox dengan mengeklik **Sandbox** di dalam pemilih akun Dashboard. Berikutnya, tentukan item yang ingin Anda jual. Untuk membuat produk dan harga baru:

- Masuk ke bagian [Produk](https://dashboard.stripe.com/test/products) di Dashboard.
- Klik **Tambahkan produk**.
- Pilih **Satu kali** saat mengatur harga.

Checkout menampilkan nama, deskripsi, dan gambar produk yang Anda berikan.

Setiap harga yang dibuat memiliki ID. Saat membuat Sesi Checkout, lihat ID harga dan jumlah. Jika menjual dalam berbagai mata uang, tetapkan Harga multi-currency**. Checkout secara otomatis [menentukan mata uang lokal pelanggan](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) dan menampilkan mata uang tersebut jika Harga mendukungnya.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  --data-urlencode "success_url=https://example.com/success?session_id={CHECKOUT_SESSION_ID}"
```

## Optional: Isi dahulu data pelanggan [Sisi server]

Jika Anda sudah mengumpulkan email pelanggan dan ingin otomatis mengisinya di Sesi Checkout untuk mereka, teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ketika membuat Sesi Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "customer_email=customer@example.com" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success"
```

## Optional: Simpan detail metode pembayaran [Sisi server]

Secara default, metode pembayaran yang digunakan untuk melakukan pembayaran satu kali dengan Checkout tidak tersedia untuk digunakan di masa mendatang.

### Simpan metode pembayaran untuk men-charge di luar sesi

Anda dapat mengatur Checkout untuk menyimpan metode pembayaran yang digunakan untuk melakukan pembayaran satu kali dengan meneruskan argumen [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Ini berguna jika Anda perlu mencatat metode pembayaran secara on-file untuk digunakan sebagai biaya di masa mendatang, seperti biaya pembatalan atau biaya ketidakhadiran.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer_creation=always \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success.html" \
  -d "payment_intent_data[setup_future_usage]=off_session"
```

Jika Anda menggunakan Checkout `berlangganan` , Stripe secara otomatis menyimpan metode pembayaran untuk menagihnya untuk pembayaran berikutnya. Metode pembayaran kartu yang disimpan untuk pelanggan menggunakan salah satu `setup_future_usage` atau `berlangganan` tidak muncul untuk pembelian kembali di Checkout (selengkapnya tentang ini di bawah). Kami merekomendasikan untuk menggunakan [teks khusus](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) untuk menautkan ke ketentuan yang relevan terkait penggunaan informasi pembayaran yang disimpan.

> Hukum privasi global sangat rumit dan bervariasi. Kami merekomendasikan Anda untuk menghubungi tim hukum dan privasi sebelum mengimplementasikan [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) karena hal ini dapat berimplikasi pada kerangka kerja kepatuhan privasi yang sudah ada. Lihat [panduan yang dikeluarkan oleh European Protection Board](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf) untuk mempelajari selengkapnya tentang menyimpan detail pembayaran.

### Simpan metode pembayaran untuk mengisinya terlebih dahulu di Checkout

Secara default, Checkout menggunakan [Link](https://docs.stripe.com/payments/link/checkout-link.md) untuk memberikan opsi kepada pelanggan Anda agar dapat menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman. Jika Anda lebih suka mengelola metode pembayaran sendiri, gunakan [ saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) saat membuat Sesi Checkout untuk memungkinkan pelanggan menyimpan metode pembayaran mereka untuk pembelian berikutnya di Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer_creation=always \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success.html" \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Meneruskan parameter ini dalam mode [pembayaran](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) atau [langganan](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) menampilkan kotak centang opsional agar pelanggan dapat secara eksplisit menyimpan metode pembayarannya untuk pembelian mendatang. Bila pelanggan mencentang kotak ini, Checkout akan menyimpan metode pembayaran dengan [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout menggunakan parameter ini untuk menentukan jika metode pembayaran dapat diisikan terlebih dahulu pada pembelian mendatang. Ketika menggunakan `saved_payment_method_options.payment_method_save`, Anda tidak perlu meneruskan `setup_future_usage` untuk menyimpan metode pembayaran.

> #### Menggunakan API Akun v2 untuk mewakili pelanggan
> 
> API Akun v2 adalah GA untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Semua pengguna Stripe dapat mengaktifkan Akun v2 [di Dashboard mereka](https://dashboard.stripe.com/settings/connect/platform-setup). Namun, saat melakukan panggilan ke API Akun v2, pengguna pratinjau harus [menentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
> 
> Untuk sebagian besar contoh penggunaan, sebaiknya Anda [memodelkan pelanggan Anda sebagai objek Account yang dikonfigurasi pelanggan](https://docs.stripe.com/connect/use-accounts-as-customers.md) alih-alih menggunakan [Customer](https://docs.stripe.com/api/customers.md) objek.

Menggunakan [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) memerlukan objek untuk mewakili pelanggan Anda (baik yang dikonfigurasi pelanggan `Akun` atau `Pelanggan`). Untuk menyimpan pelanggan baru, atur Sesi Checkout [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) untuk `selalu`. Jika tidak, sesi tidak menyimpan pelanggan atau metode pembayaran.

Jika `payment_method_save` tidak diteruskan atau jika pelanggan tidak setuju untuk menyimpan metode pembayaran, Checkout masih menyimpan metode pembayaran yang dibuat dalam mode `subscription` atau menggunakan `setup_future_usage`. Metode pembayaran ini memiliki nilai `allow_redisplay` `limited`, yang mencegahnya diisi terlebih dahulu untuk pembelian kembali serta memungkinkan Anda mematuhi peraturan jaringan kartu dan peraturan proteksi data. Pelajari cara [mengubah perilaku default yang diaktifkan oleh mode ini](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) dan cara mengubah atau mengesampingkan perilaku `allow_redisplay`.

> Anda dapat menggunakan Checkout untuk menyimpan kartu dan metode pembayaran lain untuk men-charge di luar sesi, tetapi Checkout hanya mengisikan kartu tersimpan secara otomatis. Pelajari cara [mengisikan otomatis kartu tersimpan](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Untuk menyimpan metode pembayaran tanpa pembayaran awal, [gunakan Checkout dalam mode penyiapan](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout).

### Izinkan pelanggan menghapus metode pembayaran tersimpan

Untuk mengizinkan pelanggan Anda menghapus metode pembayaran tersimpan sehingga tidak muncul kembali bagi pembayaran mendatang, gunakan [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) ketika membuat Sesi Checkout.

#### Akun v2

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success.html" \
  -d "saved_payment_method_options[payment_method_remove]=enabled"
```

#### Pelanggan v1

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer={{CUSTOMER_ID}} \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "success_url=https://example.com/success.html" \
  -d "saved_payment_method_options[payment_method_remove]=enabled"
```

Pelanggan tidak dapat menghapus metode pembayaran jika terikat dengan langganan aktif dan pelanggan tidak memiliki metode pembayaran default yang tersimpan untuk pembayaran langganan serta invoice.

## Optional: Pisahkan otorisasi dan penarikan [Sisi server]

Stripe mendukung pembayaran kartu dua langkah sehingga Anda dapat terlebih dahulu mengotorisasi kartu, lalu menangkap dana nanti. Saat Stripe mengotorisasi pembayaran, penerbit kartu menjamin dana dan menahan jumlah pembayaran pada kartu pelanggan. Anda kemudian memiliki waktu tertentu untuk menangkap dana, [tergantung pada kartu](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Jika Anda tidak menangkap pembayaran sebelum otorisasi berakhir, pembayaran dibatalkan dan penerbit melepaskan dana yang ditahan.

Memisahkan otorisasi dan penangkapan pembayaran berguna jika Anda perlu melakukan tindakan tambahan antara mengkonfirmasi bahwa pelanggan mampu membayar dan mengumpulkan pembayaran mereka. Misalnya, jika Anda menjual barang dengan stok terbatas, Anda mungkin perlu mengkonfirmasi bahwa barang yang dibeli pelanggan Anda melalui Checkout masih tersedia sebelum menangkap pembayaran mereka dan menyelesaikan pembelian. Capai hal ini menggunakan alur kerja berikut:

1. Konfirmasikan bahwa Stripe mengotorisasi metode pembayaran pelanggan.
1. Periksa sistem manajemen inventaris Anda untuk mengonfirmasikan bahwa item masih tersedia.
1. Perbarui sistem manajemen inventaris Anda untuk menandai bahwa pelanggan telah membeli item.
1. Tarik pembayaran pelanggan.
1. Informasikan pelanggan Anda bila pembelian mereka berhasil di halaman konfirmasi.

Untuk menunjukkan bahwa Anda ingin memisahkan otorisasi dan penarikan, Anda harus mengatur nilai [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) ke `manual` ketika membuat Sesi Checkout. Ini menginstruksikan Stripe agar hanya mengotorisasi jumlah pada kartu pelanggan.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[capture_method]=manual" \
  --data-urlencode "success_url=https://example.com/success.html"
```

Untuk menarik pembayaran yang belum ditarik, Anda dapat menggunakan endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) atau [penarikan](https://docs.stripe.com/api/payment_intents/capture.md). Menarik pembayaran secara terprogram memerlukan akses ke PaymentIntent yang dibuat selama Sesi Checkout, yang bisa Anda dapatkan dari objek [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Manajemen akun pelanggan [Tidak ada kode]

Biarkan pelanggan [mengelola](https://docs.stripe.com/customer-management.md) akunnya sendiri dengan membagikan tautan ke *portal pelanggan* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details) Anda. Portal pelanggan memungkinkan pelanggan masuk dengan email mereka untuk mengelola langganan, memperbarui metode pembayaran, dan lain-lain.

## See also

- [Tambahkan diskon](https://docs.stripe.com/payments/checkout/discounts.md)
- [Kumpulkan pajak](https://docs.stripe.com/payments/checkout/taxes.md)
- [Kumpulkan ID pajak](https://docs.stripe.com/tax/checkout/tax-ids.md)
- [Tambahkan pengiriman](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout)
- [Sesuaikan branding Anda](https://docs.stripe.com/payments/checkout/customization.md)


# Formulir yang disematkan

> This is a Formulir yang disematkan for when payment-ui is checkout and ui is embedded-form. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=embedded-form.

Menyematkan formulir pembayaran siap-rakit pada situs Anda menggunakan [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Lihat cara membandingkan integrasi ini [dengan tipe integrasi Stripe lainnya](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

#### Upaya integrasi
Complexity: 2/5
#### Tipe integrasi

Sematkan formulir pembayaran siap-rakit di situs Anda

#### Penyesuaian UI
Penyesuaian terbatas
- 20 font preset
- 3 radius batas preset
- Warna batas dan latar belakang custom
- Logo custom

Gunakan [pengaturan branding](https://dashboard.stripe.com/settings/branding/checkout) di Dashboard Stripe untuk mencocokkan Checkout dengan desain situs Anda.

Pertama, [mendaftarlah](https://dashboard.stripe.com/register) untuk akun Stripe.

Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Buat Sesi Checkout [Sisi server]

Dari server Anda, buatlah Sesi Checkout** dan atur [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) ke `embedded_page`. Anda dapat mengonfigurasi [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) dengan [mata anggaran](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) untuk disertakan serta opsi seperti [mata uang](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency).

Anda juga dapat membuat Sesi Checkout untuk [pelanggan yang ada](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), sehingga memungkinkan Anda otomatis mengisi bidang Checkout dengan informasi kontak yang diketahui dan menyatukan riwayat pembelian Anda untuk pelanggan tersebut.

Untuk mengembalikan pelanggan ke halaman custom yang Anda hosting pada situs web, tentukan URL halaman tersebut di parameter [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Sertakan variabel templat `{CHECKOUT_SESSION_ID}` di URL untuk mengambil status sesi di halaman pengembalian. Checkout secara otomatis menggantikan variabel dengan identifikasi Sesi Checkout sebelum pengalihan.

Baca lebih lanjut tentang [cara mengonfigurasi halaman pengembalian](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-form#return-page) dan opsi lain untuk [menyesuaikan perilaku pengalihan](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form).

Setelah Anda membuat Sesi Checkout, gunakan `client_secret` yang dikembalikan sebagai respons untuk [memasang Checkout](https://docs.stripe.com/payments/accept-a-payment.md#mount-checkout).

#### Ruby

```ruby
# This example sets up an endpoint using the Sinatra framework.
require 'json'
require 'sinatra'
require 'stripe'

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-checkout-session' do
  session = client.v1.checkout.sessions.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',ui_mode: 'embedded_page',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end
```

## Pasang Checkout [Sisi klien]

#### HTML+JS

Checkout tersedia sebagai bagian dari [Stripe.js](https://docs.stripe.com/js.md). Sertakan skrip Stripe.js di halaman Anda dengan menambahkannya ke head file HTML Anda. Selanjutnya, buat node DOM kosong (kontainer) yang akan digunakan untuk pemasangan.

```html
<head>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>
```

Inisialisasikan Stripe.js dengan kunci API yang dapat diterbitkan.

Buat fungsi `fetchClientSecret` asinkron yang melakukan permintaan ke server Anda untuk membuat Sesi Checkout dan mengambil client secret. Teruskan fungsi ini ke `options` saat Anda membuat instance Checkout:

```javascript
// Initialize Stripe.js
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.createEmbeddedCheckoutPage({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}
```

#### React

Instal [react-stripe-js](https://docs.stripe.com/sdks/stripejs-react.md) dan loader Stripe.js dari npm:

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

Untuk menggunakan komponen Checkout Tersemat, buat `EmbeddedCheckoutProvider`. Panggil `loadStripe` dengan kunci API Anda yang dapat diterbitkan dan berikan `Promise` yang dikembalikan ke penyedia.

Buat fungsi `fetchClientSecret` asinkron yang melakukan permintaan ke server Anda untuk membuat Sesi Checkout dan mengambil client secret. Teruskan fungsi ini ke prop `options` yang diterima oleh penyedia.

```jsx
import * as React from 'react';
import {loadStripe} from '@stripe/stripe-js';
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout
} from '@stripe/react-stripe-js';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_123');

const App = () => {
  const fetchClientSecret = React.useCallback(() => {
    // Create a Checkout Session
    return fetch("/create-checkout-session", {
      method: "POST",
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  const options = {fetchClientSecret};

  return (
    <div id="checkout">
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={options}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  )
}
```

Checkout ditampilkan di iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS.

> Hindari penempatan Checkout dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

### Sesuaikan penampilan

Sesuaikan Checkout agar cocok dengan desain situs Anda dengan mengatur warna latar belakang, warna tombol, radius batas, dan font di [pengaturan branding](https://dashboard.stripe.com/settings/branding) akun.

Secara default, Checkout ditampilkan tanpa padding atau margin eksternal. Kami merekomendasikan penggunaan elemen kontainer seperti div untuk menerapkan margin yang Anda inginkan (misalnya, 16 piksel pada semua sisi).

## Tampilkan halaman pengembalian

Setelah pelanggan Anda mencoba melakukan pembayaran, Stripe mengalihkannya ke halaman pengembalian yang Anda hosting pada situs. Saat membuat Sesi Checkout, Anda menentukan URL halaman pengembalian di parameter [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Baca selengkapnya tentang opsi lain untuk [menyesuaikan perilaku pengalihan](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form).

Ketika menampilkan halaman pengembalian Anda, ambil status Sesi Checkout menggunakan identifikasi Sesi Checkout di URL. Tangani hasilnya sesuai dengan status sesi sebagai berikut:

- `complete`: Pembayaran berhasil. Gunakan informasi dari Sesi Checkout untuk menampilkan halaman berhasil.
- `open`: Pembayaran gagal atau dibatalkan. Pasang ulang Checkout agar pelanggan Anda dapat mencoba lagi.

#### Ruby

```ruby
require 'stripe'
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

get '/session-status' do
  session = client.v1.checkout.sessions.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
```

```javascript
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}
```

#### Metode pembayaran berbasis pengalihan

Selama pembayaran, sejumlah metode pembayaran mengalihkan pelanggan ke halaman perantara, seperti halaman otorisasi bank. Saat mereka menyelesaikan halaman tersebut, Stripe mengalihkan mereka ke halaman pengembalian.

Pelajari selengkapnya tentang [metode pembayaran berbasis pengalihan dan perilaku pengalihan](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form#redirect-based-payment-methods).

## Tangani kejadian pascapembayaran

Stripe mengirim kejadian [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) bila pelanggan menyelesaikan pembayaran Sesi Checkout. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima dan menangani kejadian ini, yang mungkin memicu Anda untuk:

- Kirim email konfirmasi pesanan ke pelanggan Anda.
- Catat penjualan di database.
- Mulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu pelanggan dialihkan kembali ke situs web Anda. Memicu pemenuhan hanya dari halaman penyambut Checkout Anda tidak dapat diandalkan. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Pelajari selengkapnya di [panduan pemenuhan untuk Checkout](https://docs.stripe.com/checkout/fulfillment.md) kami.

Tangani kejadian berikut ketika menagih pembayaran dengan Checkout:

| Kejadian                                                                                                                                     | Keterangan                                                                                                      | Tindakan                                                                                                                                                                                       |
| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)                             | Dikirim bila pelanggan berhasil menyelesaikan Sesi Checkout.                                                    | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka. |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Dikirim bila pembayaran yang dilakukan dengan metode pembayaran tertunda, seperti utang ACH langsung, berhasil. | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka. |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed)       | Dikirim bila pembayaran yang dilakukan dengan metode pembayaran tertunda, seperti utang langsung ACH, gagal.    | Beri tahu pelanggan tentang kegagalan tersebut dan bawa mereka kembali ke sesi untuk mencoba pembayaran lagi.                                                                                  |

## Coba integrasi Anda

Untuk mencoba integrasi formulir pembayaran tersemat Anda:

1. Buat Sesi Checkout tersemat dan pasang formulir pembayaran di halaman Anda.
1. Isi detail pembayaran dengan metode dari tabel di bawah ini.
   - Masukkan tanggal kedaluwarsa kartu di masa mendatang.
   - Masukkan nomor 3 angka untuk CVC.
   - Masukkan kode pos penagihan.
1. Klik **Bayar**. Anda akan dialihkan ke `return_url`.
1. Buka Dashboard dan cari pembayaran tersebut di [halaman Transaksi](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Jika pembayaran Anda berhasil, pembayaran akan muncul dalam daftar tersebut.
1. Klik pembayaran Anda untuk melihat detail selengkapnya, seperti ringkasan Checkout yang berisi informasi penagihan dan daftar item yang dibeli. Anda dapat menggunakan informasi ini untuk memproses pesanan.

Pelajari selengkapnya tentang [mencoba integrasi Anda](https://docs.stripe.com/testing.md).

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Dompet

| Metode pembayaran | Skenario                                                                                                                                                                                           | Cara mencoba                                                                                                                                                                                             |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi segera](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. |

#### Pengarahan ulang bank

| Metode pembayaran                      | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                              |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung BECS                    | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS.                                                                                                                                              | Isi formulir menggunakan nomor akun `900123456` dan BSB `000000`. PaymentIntent yang telah dikonfirmasi awalnya akan berstatus `processing`, kemudian berubah menjadi status `succeeded` setelah 3 menit. |
| Debit Langsung BECS                    | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`.                                                                                                                                   | Isi formulir menggunakan nomor akun `111111113` dan BSB `000000`.                                                                                                                                         |
| Bancontact, EPS, iDEAL, dan Przelewy24 | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.    |
| Pay by Bank                            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                      |
| Pay by Bank                            | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                        |
| BLIK                                   | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

#### Voucher

| Metode pembayaran | Skenario                                                 | Cara mencoba                                                                                           |
| ----------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Boleto, OXXO      | Pelanggan Anda membayar dengan voucher OXXO atau Boleto. | Pilih Boleto atau OXXO sebagai metode pembayaran dan serahkan pembayaran. Tutup dialog setelah muncul. |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Tambahkan metode pembayaran lainnya

Secara default, Checkout [mendukung banyak metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Anda harus mengambil langkah tambahan untuk mengaktifkan serta menampilkan beberapa metode, misalnya Apple Pay, Google Pay, dan beli sekarang, bayar nanti.

### Apple Pay dan Google Pay

Untuk menerima pembayaran dari Apple Pay dan Google Pay, Anda harus:

- Aktifkan di [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods). Apple Pay diaktifkan secara default.
- Sajikan aplikasi Anda melalui HTTPS dalam pengembangan dan produksi.
- [Daftarkan domain Anda](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- Sajikan aplikasi Anda melalui HTTPS dalam pengembangan dan produksi. Anda dapat menggunakan layanan, seperti [ngrok](https://ngrok.com/), untuk menyajikan aplikasi Anda untuk percobaan lokal.

Selain itu, Sesi Checkout hanya menampilkan tombol Apple Pay kepada pelanggan bila *semua* persyaratan berikut benar:

- Perangkat pelanggan menjalankan macOS versi 17 atau yang lebih baru atau iOS versi 17 atau yang lebih baru.
- Pelanggan menggunakan browser Safari.
- Pelanggan memiliki kartu valid yang terdaftar pada Apple Pay.

Sesi Checkout hanya menampilkan tombol Google Pay kepada pelanggan bila *semua* persyaratan berikut benar:

- Perangkat pelanggan menjalankan Chrome 61 atau yang lebih baru.
- Pelanggan memiliki kartu valid yang terdaftar pada Google Pay.

> #### Percobaan regional
> 
> Stripe Checkout tidak mendukung Apple Pay atau Google Pay untuk akun atau pelanggan Stripe di India. Jika alamat IP Anda berada di India, Anda tidak dapat mencoba integrasi Apple Pay atau Google Pay, sekalipun akun Stripe tersebut berlokasi di luar India.

## Optional: Buat produk dan harga

Sebelum membuat Sesi Checkout, Anda dapat membuat *Produk* (Products represent what your business sells—whether that's a good or a service) dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) di muka. Gunakan produk untuk mewakili barang fisik atau tingkat layanan yang berbeda, dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) untuk mewakili harga setiap produk. Kamu bisa [mengatur Sesi Checkout Anda](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) untuk menerima tip dan donasi, atau menjual produk dan layanan dengan sistem bayar sesukanya.

Misalnya, Anda dapat membuat kaus pendek sebagai produk dengan harga 20 USD. Hal ini memungkinkan Anda memperbarui dan menambahkan harga tanpa perlu mengubah detail produk pokok. Anda dapat membuat produk dan harga dengan Dashboard Stripe atau API. Pelajari selengkapnya tentang [cara kerja produk dan harga](https://docs.stripe.com/products-prices/how-products-and-prices-work.md).

#### API

API hanya memerlukan `name` untuk membuat [Produk](https://docs.stripe.com/api/products.md). Checkout menampilkan `name`, `description`, dan `images` produk yang Anda berikan.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

Berikutnya, buat [Harga](https://docs.stripe.com/api/prices.md) untuk menentukan jumlah yang akan Anda charge untuk produk Anda. Hal ini termasuk biaya produk dan mata uang yang digunakan.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "product={{PRODUCT_ID}}" \
  -d unit_amount=2000 \
  -d currency=usd
```

#### Dashboard

> Salin produk yang dibuat di sandbox ke mode live sehingga Anda tidak perlu membuatnya lagi. Pada tampilan detail Produk di Dashboard, klik **Salin ke mode live** di sudut kanan atas. Anda hanya dapat melakukannya sekali untuk setiap produk yang dibuat di sandbox. Pembaruan selanjutnya pada produk percobaan tidak tercermin untuk produk live.

Pastikan Anda berada di sandbox dengan mengeklik **Sandbox** di dalam pemilih akun Dashboard. Berikutnya, tentukan item yang ingin Anda jual. Untuk membuat produk dan harga baru:

- Masuk ke bagian [Produk](https://dashboard.stripe.com/test/products) di Dashboard.
- Klik **Tambahkan produk**.
- Pilih **Satu kali** saat mengatur harga.

Checkout menampilkan nama, deskripsi, dan gambar produk yang Anda berikan.

Setiap harga yang dibuat memiliki ID. Saat membuat Sesi Checkout, lihat ID harga dan jumlah. Jika menjual dalam berbagai mata uang, tetapkan Harga multi-currency**. Checkout secara otomatis [menentukan mata uang lokal pelanggan](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) dan menampilkan mata uang tersebut jika Harga mendukungnya.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return"
```

## Optional: Isi dahulu data pelanggan [Sisi server]

Jika Anda sudah mengumpulkan email pelanggan dan ingin otomatis mengisinya di Sesi Checkout untuk pelanggan, teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ketika membuat Sesi Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "customer_email=customer@example.com" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return"
```

## Optional: Simpan detail metode pembayaran [Sisi server]

Secara default, metode pembayaran yang digunakan untuk melakukan pembayaran satu kali dengan Checkout tidak tersedia untuk digunakan di masa mendatang.

### Simpan metode pembayaran untuk men-charge di luar sesi

Anda dapat mengatur Checkout untuk menyimpan metode pembayaran yang digunakan untuk melakukan pembayaran satu kali dengan meneruskan argumen [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Ini berguna jika Anda perlu mencatat metode pembayaran secara on-file untuk digunakan sebagai biaya di masa mendatang, seperti biaya pembatalan atau biaya ketidakhadiran.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer_creation=always \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "payment_intent_data[setup_future_usage]=off_session"
```

Jika Anda menggunakan Checkout `berlangganan` , Stripe secara otomatis menyimpan metode pembayaran untuk menagihnya untuk pembayaran berikutnya. Metode pembayaran kartu yang disimpan untuk pelanggan menggunakan salah satu `setup_future_usage` atau `berlangganan` tidak muncul untuk pembelian kembali di Checkout (selengkapnya tentang ini di bawah). Kami merekomendasikan untuk menggunakan [teks khusus](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) untuk menautkan ke ketentuan yang relevan terkait penggunaan informasi pembayaran yang disimpan.

> Hukum privasi global sangat rumit dan bervariasi. Kami merekomendasikan Anda untuk menghubungi tim hukum dan privasi sebelum mengimplementasikan [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) karena hal ini dapat berimplikasi pada kerangka kerja kepatuhan privasi yang sudah ada. Lihat [panduan yang dikeluarkan oleh European Protection Board](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf) untuk mempelajari selengkapnya tentang menyimpan detail pembayaran.

### Simpan metode pembayaran untuk mengisinya terlebih dahulu di Checkout

Secara default, Checkout menggunakan [Link](https://docs.stripe.com/payments/link/checkout-link.md) untuk memberikan opsi kepada pelanggan Anda agar dapat menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman. Jika Anda lebih suka mengelola metode pembayaran sendiri, gunakan [ saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) saat membuat Sesi Checkout untuk memungkinkan pelanggan menyimpan metode pembayaran mereka untuk pembelian berikutnya di Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer_creation=always \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Meneruskan parameter ini dalam mode [pembayaran](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) atau [langganan](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) menampilkan kotak centang opsional agar pelanggan dapat secara eksplisit menyimpan metode pembayarannya untuk pembelian mendatang. Bila pelanggan mencentang kotak ini, Checkout akan menyimpan metode pembayaran dengan [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout menggunakan parameter ini untuk menentukan jika metode pembayaran dapat diisikan terlebih dahulu pada pembelian mendatang. Ketika menggunakan `saved_payment_method_options.payment_method_save`, Anda tidak perlu meneruskan `setup_future_usage` untuk menyimpan metode pembayaran.

> #### Menggunakan API Akun v2 untuk mewakili pelanggan
> 
> API Akun v2 adalah GA untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Semua pengguna Stripe dapat mengaktifkan Akun v2 [di Dashboard mereka](https://dashboard.stripe.com/settings/connect/platform-setup). Namun, saat melakukan panggilan ke API Akun v2, pengguna pratinjau harus [menentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
> 
> Untuk sebagian besar contoh penggunaan, sebaiknya Anda [memodelkan pelanggan Anda sebagai objek Account yang dikonfigurasi pelanggan](https://docs.stripe.com/connect/use-accounts-as-customers.md) alih-alih menggunakan [Customer](https://docs.stripe.com/api/customers.md) objek.

Menggunakan [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) memerlukan objek untuk mewakili pelanggan Anda (baik yang dikonfigurasi pelanggan `Akun` atau `Pelanggan`). Untuk menyimpan pelanggan baru, atur Sesi Checkout [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) untuk `selalu`. Jika tidak, sesi tidak menyimpan pelanggan atau metode pembayaran.

Jika `payment_method_save` tidak diteruskan atau jika pelanggan tidak setuju untuk menyimpan metode pembayaran, Checkout masih menyimpan metode pembayaran yang dibuat dalam mode `subscription` atau menggunakan `setup_future_usage`. Metode pembayaran ini memiliki nilai `allow_redisplay` `limited`, yang mencegahnya diisi terlebih dahulu untuk pembelian kembali serta memungkinkan Anda mematuhi peraturan jaringan kartu dan peraturan proteksi data. Pelajari cara [mengubah perilaku default yang diaktifkan oleh mode ini](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) dan cara mengubah atau mengesampingkan perilaku `allow_redisplay`.

> Anda dapat menggunakan Checkout untuk menyimpan kartu dan metode pembayaran lain untuk men-charge di luar sesi, tetapi Checkout hanya mengisikan kartu tersimpan secara otomatis. Pelajari cara [mengisikan otomatis kartu tersimpan](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Untuk menyimpan metode pembayaran tanpa pembayaran awal, [gunakan Checkout dalam mode penyiapan](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout).

### Izinkan pelanggan menghapus metode pembayaran tersimpan

Untuk mengizinkan pelanggan Anda menghapus metode pembayaran tersimpan sehingga tidak muncul kembali bagi pembayaran mendatang, gunakan [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) ketika membuat Sesi Checkout.

#### Akun v2

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_remove]=enabled"
```

#### Pelanggan v1

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer={{CUSTOMER_ID}} \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_remove]=enabled"
```

Pelanggan tidak dapat menghapus metode pembayaran jika terikat dengan langganan aktif dan pelanggan tidak memiliki metode pembayaran default yang tersimpan untuk pembayaran langganan serta invoice.

## Optional: Manajemen akun pelanggan [Tidak ada kode]

Biarkan pelanggan [mengelola](https://docs.stripe.com/customer-management.md) akunnya sendiri dengan membagikan tautan ke *portal pelanggan* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details) Anda. Portal pelanggan memungkinkan pelanggan masuk dengan email mereka untuk mengelola langganan, memperbarui metode pembayaran, dan lain-lain.

## Optional: Pisahkan otorisasi dan penarikan [Sisi server]

Stripe mendukung pembayaran kartu dua langkah sehingga Anda dapat terlebih dahulu mengotorisasi kartu, lalu menangkap dana nanti. Saat Stripe mengotorisasi pembayaran, penerbit kartu menjamin dana dan menahan jumlah pembayaran pada kartu pelanggan. Anda kemudian memiliki waktu tertentu untuk menangkap dana, [tergantung pada kartu](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Jika Anda tidak menangkap pembayaran sebelum otorisasi berakhir, pembayaran dibatalkan dan penerbit melepaskan dana yang ditahan.

Memisahkan otorisasi dan penangkapan pembayaran berguna jika Anda perlu melakukan tindakan tambahan antara mengkonfirmasi bahwa pelanggan mampu membayar dan mengumpulkan pembayaran mereka. Misalnya, jika Anda menjual barang dengan stok terbatas, Anda mungkin perlu mengkonfirmasi bahwa barang yang dibeli pelanggan Anda melalui Checkout masih tersedia sebelum menangkap pembayaran mereka dan menyelesaikan pembelian. Capai hal ini menggunakan alur kerja berikut:

1. Konfirmasikan bahwa Stripe mengotorisasi metode pembayaran pelanggan.
1. Periksa sistem manajemen inventaris Anda untuk mengonfirmasikan bahwa item masih tersedia.
1. Perbarui sistem manajemen inventaris Anda untuk menandai bahwa pelanggan telah membeli item.
1. Tarik pembayaran pelanggan.
1. Informasikan pelanggan Anda bila pembelian mereka berhasil di halaman konfirmasi.

Untuk menunjukkan bahwa Anda ingin memisahkan otorisasi dan penarikan, Anda harus mengatur nilai [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) ke `manual` ketika membuat Sesi Checkout. Ini menginstruksikan Stripe agar hanya mengotorisasi jumlah pada kartu pelanggan.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[capture_method]=manual" \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return"
```

Untuk menarik pembayaran yang belum ditarik, Anda dapat menggunakan endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) atau [penarikan](https://docs.stripe.com/api/payment_intents/capture.md). Menarik pembayaran secara terprogram memerlukan akses ke PaymentIntent yang dibuat selama Sesi Checkout, yang bisa Anda dapatkan dari objek [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Pemenuhan pesanan

Pelajari cara [mendapatkan notifikasi secara terprogram](https://docs.stripe.com/checkout/fulfillment.md) setiap kali pelanggan membayar.

## See also

- [Tambahkan diskon](https://docs.stripe.com/payments/checkout/discounts.md)
- [Kumpulkan pajak](https://docs.stripe.com/payments/checkout/taxes.md)
- [Kumpulkan ID pajak](https://docs.stripe.com/tax/checkout/tax-ids.md)
- [Tambahkan pengiriman](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout)
- [Sesuaikan branding Anda](https://docs.stripe.com/payments/checkout/customization.md)


# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout.

Membuat formulir pembayaran kustom menggunakan [Stripe Elements](https://docs.stripe.com/payments/elements.md) dan [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md). Lihat bagaimana integrasi ini [dibandingkan dengan jenis integrasi Stripe lainnya](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

Checkout Sessions API menyediakan dukungan untuk perhitungan pajak, diskon, pengiriman, dan konversi mata uang, sehingga mengurangi jumlah kode kustom yang perlu Anda tulis. Ini adalah pendekatan yang direkomendasikan untuk sebagian besar integrasi. Pelajari lebih lanjut tentang [kapan harus menggunakan Checkout Sessions, bukan PaymentIntent](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran.

#### Upaya integrasi
Complexity: 3/5
#### Jenis integrasi

Gabungkan komponen UI ke dalam alur pembayaran kustom

#### Penyesuaian UI

Penyesuaian tingkat CSS dengan [Appearance API](https://docs.stripe.com/elements/appearance-api.md)

## Siapkan server [Sisi server]

Sebelum memulai, Anda perlu [mendaftar](https://dashboard.stripe.com/register) untuk akun Stripe.

Gunakan pustaka Stripe resmi untuk mengakses API dari aplikasi Anda.

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Buat Sesi Checkout [Sisi server]

Tambahkan endpoint di server Anda yang membuat [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) dan mengembalikan [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) ke frontend Anda. Sesi Checkout mewakili sesi pelanggan Anda saat mereka membayar pembelian atau langganan satu kali. Sesi Checkout kedaluwarsa 24 jam setelah pembuatan.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Siapkan frontend [Sisi client]

#### HTML + JS

Sertakan skrip Stripe.js pada halaman checkout dengan menambahkannya ke `head` file HTML Anda. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-hosting sendiri salinannya.

Pastikan Anda menggunakan versi Stripe.js terbaru. Pelajari lebih lanjut [versi Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

> Stripe menyediakan paket npm yang dapat Anda gunakan untuk memuat Stripe.js sebagai modul. Lihat [proyek di GitHub](https://github.com/stripe/stripe-js). Versi [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) atau yang lebih baru diperlukan.

Inisialisasikan stripe.js.

```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(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

#### React

Pasang [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) dan [pemuat Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dari NPM Public Registry. Anda memerlukan setidaknya versi 5.0.0 untuk React Stripe.js dan versi 8.0.0 untuk pemuat Stripe.js.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

Inisialisasikan instance `stripe` pada frontend Anda dengan kunci yang dapat dipublikasikan.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Inisialisasikan Checkout [Sisi client]

#### HTML + JS

Panggilan [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init), masuk `clientRahasia`.

`initCheckoutElementsSdk` mengembalikan [Checkout](https://docs.stripe.com/js/custom_checkout) objek yang berisi data dari Sesi Checkout dan metode untuk memperbaruinya.

Baca `total` dan `lineItems` dari [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), dan tampilkan di UI Anda. Dengan begitu, Anda dapat mengaktifkan fitur baru dengan perubahan kode minimum. Misalnya, menambahkan [manual currency prices](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) tidak memerlukan perubahan UI jika Anda menampilkan `total`.

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

Bungkus aplikasi Anda dengan komponen [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), yang meneruskan `clientSecret` dan instans `stripe`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

Akses objek [Checkout](https://docs.stripe.com/js/custom_checkout) dalam komponen formulir checkout Anda dengan menggunakan hook `useCheckout()`. `Checkout` berisi data dari Sesi Checkout dan metode untuk memperbaruinya.

Baca `total` dan `lineItems` dari objek `Checkout` dan tampilkan keduanya di UI Anda. Dengan begitu, Anda dapat mengaktifkan fitur dengan perubahan kode minimum. Misalnya, menambahkan [manual currency prices](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) tidak memerlukan perubahan UI jika Anda menampilkan `total`.

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## Kumpulkan email pelanggan [Sisi client]

#### HTML + JS

Anda harus memberikan email pelanggan yang valid saat menyelesaikan Sesi Checkout.

Petunjuk ini membuat input email dan menggunakan [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) dari objek `Checkout`.

Atau, Anda dapat:

- Teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (untuk pelanggan yang direpresentasikan sebagai objek `Account` yang dikonfigurasi pelanggan), atau [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (untuk pelanggan yang direpresentasikan sebagai objek `Customer`) saat membuat Sesi Checkout. Stripe memvalidasi email yang diberikan dengan cara ini.
- Meneruskan email yang sudah Anda validasi [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Anda harus memberikan email pelanggan yang valid saat menyelesaikan Sesi Checkout.

Petunjuk ini membuat input email dan menggunakan [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) dari objek `Checkout`.

Atau, Anda dapat:

- Teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (untuk pelanggan yang direpresentasikan sebagai objek `Account` yang dikonfigurasi pelanggan), atau [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (untuk pelanggan yang direpresentasikan sebagai objek `Customer`) saat membuat Sesi Checkout. Stripe memvalidasi email yang diberikan dengan cara ini.
- Meneruskan email yang sudah Anda validasi di [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

const EmailInput = () => {
  const checkoutState = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

## Kumpulkan detail pembayaran [Sisi client]

Kumpulkan detail pembayaran pada client dengan [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element adalah komponen UI siap-rakit yang menyederhanakan pengumpulan detail pembayaran untuk berbagai metode pembayaran.

Payment Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe harus memiliki atribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) yang ditetapkan ke `"payment *"` setara.

Alamat halaman checkout harus dimulai dengan `https://` rather daripada `http://` for integrasi Anda untuk bekerja. Anda dapat menguji integrasi tanpa menggunakan HTTPS, tetapi jangan lupa [mengaktifkannya](https://docs.stripe.com/security/guide.md#tls) saat Anda siap menerima pembayaran langsung.

#### HTML + JS

Pertama, buat elemen DOM kontainer untuk memasang [Payment Element](https://docs.stripe.com/payments/payment-element.md). Kemudian buat instance `Payment Element` menggunakan [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) dan pasang dengan memanggil [element.mount](https://docs.stripe.com/js/element/mount), yang menyediakan pemilih CSS atau elemen DOM kontainer.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Lihat [dokumen Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) untuk melihat opsi yang didukung.

Anda dapat [menyesuaikan penampilan](https://docs.stripe.com/payments/checkout/customization/appearance.md) semua Elements dengan meneruskan [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) ketika menginisialisasi Checkout pada frontend.

#### React

Pasang komponen [Payment Element](https://docs.stripe.com/payments/payment-element.md) dalam [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

```jsx
import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Lihat [dokumen Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) untuk melihat opsi yang didukung.

Anda bisa [menyesuaikan tampilan](https://docs.stripe.com/payments/checkout/customization/appearance.md) dari semua Element dengan meneruskan [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) ke [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Serahkan pembayaran [Sisi client]

#### HTML + JS

Menampilkan tombol **Bayar** yang memanggil [konfirmasi](https://docs.stripe.com/js/custom_checkout/confirm) dari instance `Checkout` untuk menyerahkan pembayaran.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Tampilkan tombol **Bayar** yang memanggil fungsi [konfirmasi](https://docs.stripe.com/js/custom_checkout/confirm) dari [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) untuk mengirimkan pembayaran.

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

const PayButton = () => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Uji integrasi Anda

1. Arahkan ke halaman checkout Anda.
1. Isilah detail pembayaran dengan metode pembayaran dari tabel berikut. Untuk pembayaran kartu:
   - Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
   - Masukkan nomor 3 angka untuk CVC.
   - Masukkan kode pos tagihan.
1. Serahkan pembayaran ke Stripe.
1. Buka Dashboard dan cari pembayaran pada [halaman Transaksi](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
1. Klik pembayaran Anda untuk melihat detail selengkapnya, seperti informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk [memenuhi pesanan](https://docs.stripe.com/checkout/fulfillment.md).

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Dompet

| Metode pembayaran | Skenario                                                                                                                                                                                           | Cara mencoba                                                                                                                                                                                             |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi segera](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. |

#### Pengarahan ulang bank

| Metode pembayaran                      | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                              |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung BECS                    | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS.                                                                                                                                              | Isi formulir menggunakan nomor akun `900123456` dan BSB `000000`. PaymentIntent yang telah dikonfirmasi awalnya akan berstatus `processing`, kemudian berubah menjadi status `succeeded` setelah 3 menit. |
| Debit Langsung BECS                    | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`.                                                                                                                                   | Isi formulir menggunakan nomor akun `111111113` dan BSB `000000`.                                                                                                                                         |
| Bancontact, EPS, iDEAL, dan Przelewy24 | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.    |
| Pay by Bank                            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                      |
| Pay by Bank                            | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                        |
| BLIK                                   | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

#### Voucher

| Metode pembayaran | Skenario                                                 | Cara mencoba                                                                                           |
| ----------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Boleto, OXXO      | Pelanggan Anda membayar dengan voucher OXXO atau Boleto. | Pilih Boleto atau OXXO sebagai metode pembayaran dan serahkan pembayaran. Tutup dialog setelah muncul. |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Buat produk dan harga

Sebelum membuat Sesi Checkout, Anda dapat membuat *Produk* (Products represent what your business sells—whether that's a good or a service) dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) di muka. Gunakan produk untuk mewakili barang fisik atau tingkat layanan yang berbeda, dan *Harga* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) untuk mewakili harga setiap produk. Kamu bisa [mengatur Sesi Checkout Anda](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) untuk menerima tip dan donasi, atau menjual produk dan layanan dengan sistem bayar sesukanya.

Misalnya, Anda dapat membuat kaus pendek sebagai produk dengan harga 20 USD. Hal ini memungkinkan Anda memperbarui dan menambahkan harga tanpa perlu mengubah detail produk pokok. Anda dapat membuat produk dan harga dengan Dashboard Stripe atau API. Pelajari selengkapnya tentang [cara kerja produk dan harga](https://docs.stripe.com/products-prices/how-products-and-prices-work.md).

#### API

API hanya memerlukan `name` untuk membuat [Produk](https://docs.stripe.com/api/products.md). Checkout menampilkan `name`, `description`, dan `images` produk yang Anda berikan.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

Berikutnya, buat [Harga](https://docs.stripe.com/api/prices.md) untuk menentukan jumlah yang akan Anda charge untuk produk Anda. Hal ini termasuk biaya produk dan mata uang yang digunakan.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "product={{PRODUCT_ID}}" \
  -d unit_amount=2000 \
  -d currency=usd
```

#### Dashboard

> Salin produk yang dibuat di sandbox ke mode live sehingga Anda tidak perlu membuatnya lagi. Pada tampilan detail Produk di Dashboard, klik **Salin ke mode live** di sudut kanan atas. Anda hanya dapat melakukannya sekali untuk setiap produk yang dibuat di sandbox. Pembaruan selanjutnya pada produk percobaan tidak tercermin untuk produk live.

Pastikan Anda berada di sandbox dengan mengeklik **Sandbox** di dalam pemilih akun Dashboard. Berikutnya, tentukan item yang ingin Anda jual. Untuk membuat produk dan harga baru:

- Masuk ke bagian [Produk](https://dashboard.stripe.com/test/products) di Dashboard.
- Klik **Tambahkan produk**.
- Pilih **Satu kali** saat mengatur harga.

Checkout menampilkan nama, deskripsi, dan gambar produk yang Anda berikan.

Setiap harga yang dibuat memiliki ID. Saat membuat Sesi Checkout, lihat ID harga dan jumlah. Jika menjual dalam berbagai mata uang, tetapkan Harga multi-currency**. Checkout secara otomatis [menentukan mata uang lokal pelanggan](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) dan menampilkan mata uang tersebut jika Harga mendukungnya.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Optional: Isi dahulu data pelanggan [Sisi server]

Jika Anda sudah mengumpulkan email pelanggan dan ingin otomatis mengisinya di Sesi Checkout untuk mereka, teruskan [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) ketika membuat Sesi Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "customer_email=customer@example.com" \
  -d ui_mode=elements \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Optional: Simpan detail metode pembayaran

Pelajari cara [menerima pembayaran dan menyimpan detail pembayaran pelanggan Anda](https://docs.stripe.com/payments/save-during-payment.md) untuk pembelian mendatang.

## Optional: Dengarkan perubahan Sesi Checkout

### Dengarkan perubahan Sesi Checkout

Anda dapat mendengarkan perubahan pada [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions.md) dengan menambahkan listener kejadian pada kejadian `change` dengan [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event).

#### HTML + JS

```javascript
checkout = stripe.initCheckoutElementsSdk({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});
```

#### React

```jsx
import React from 'react';
import { useCheckout } from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();
  if (checkoutState.type === 'success') {
    checkoutState.checkout.on('change', (session) => {
      // Handle changes to the checkout session
    });
  }
};
```

## Optional: Kumpulkan alamat tagihan dan pengiriman

## Kumpulkan alamat tagihan

Secara default, Sesi Checkout mengumpulkan detail tagihan minimal yang diperlukan untuk pembayaran melalui Payment Element.

### Menggunakan Billing Address Element

Anda dapat mengumpulkan alamat tagihan lengkap menggunakan Billing Address Element.

Pertama, teruskan [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) bila Anda membuat Sesi Checkout.

#### HTML + JS

Buat elemen DOM kontainer untuk memasang Billing Address Element. Kemudian buat instance Billing Address Element menggunakan [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) dan pasang dengan memanggil [element.mount](https://docs.stripe.com/js/element/mount), yang menyediakan pemilih CSS ataupun elemen DOM kontainer.

```html
<div id="billing-address"></div>
```

```javascript
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');
```

Billing Address Element mendukung opsi berikut:

- [kontak](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [tampilan](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

#### React

Pasang komponen `BillingAddressElement` dalam komponen `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {BillingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  return (
    <form>
      <BillingAddressElement/>
    </form>
  )
};
```

Billing Address Element mendukung properti berikut:

- [kontak](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [tampilan](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

### Menggunakan formulir custom

Anda dapat membuat formulir sendiri untuk mengumpulkan alamat tagihan.

- Jika halaman checkout Anda memiliki langkah khusus untuk pengisian alamat sebelum konfirmasi, panggil [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) saat pelanggan mengirimkan alamatnya.
- Jika tidak, Anda dapat menyerahkan alamat bila pelanggan mengeklik tombol “bayar” dengan meneruskan [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) ke [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

### Kumpulkan alamat tagihan parsial

Untuk mengumpulkan alamat tagihan parsial, seperti hanya negara dan kode pos, teruskan [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection).

Ketika mengumpulkan alamat tagihan parsial, Anda harus [mengumpulkan alamat secara manual](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Secara default, Payment Element secara otomatis mengumpulkan detail tagihan minimal yang diperlukan untuk pembayaran. Untuk menghindari pengumpulan ganda detail tagihan, teruskan [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) ketika membuat Payment Element. Jika Anda hanya bermaksud mengumpulkan sebagian detail tagihan (seperti nama pelanggan), teruskan `never` hanya untuk bidang yang ingin Anda kumpulkan sendiri.

## Kumpulkan alamat pengiriman

Untuk mengumpulkan alamat pengiriman pelanggan, teruskan parameter [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) bila Anda membuat Sesi Checkout.

Saat mengumpulkan alamat pengiriman, Anda juga harus menentukan negara tujuan pengiriman yang dibolehkan. Konfigurasikan properti [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) dengan larik [kode negara ISO dua huruf](https://www.nationsonline.org/oneworld/country_code_list.htm).

### Cara menggunakan Shipping Address Element

Anda dapat mengumpulkan alamat pengiriman lengkap dengan Shipping Address Element.

#### HTML + JS

Buat elemen DOM kontainer untuk memasang Shipping Address Element. Kemudian buat instance Shipping Address Element menggunakan [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) dan pasang dengan memanggil [element.mount](https://docs.stripe.com/js/element/mount), yang menyediakan pemilih CSS ataupun elemen DOM kontainer.

```html
<div id="shipping-address"></div>
```

```javascript
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');
```

Shipping Address Element mendukung opsi berikut:

- [kontak](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [tampilan](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

#### React

Pasang komponen `ShippingAddressElement` dalam komponen `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  return (
    <form>
      <ShippingAddressElement/>
    </form>
  )
};
```

Shipping Address Element mendukung properti berikut:

- [kontak](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [tampilan](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

### Dengarkan perubahan Sesi Checkout

Anda dapat mendengarkan perubahan pada [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions.md) dengan menambahkan listener kejadian untuk menangani perubahan terkait alamat.

#### HTML + JS

Gunakan [objek Sesi](https://docs.stripe.com/js/custom_checkout/session_object) untuk merender jumlah pengiriman di formulir checkout Anda.

```html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const subtotal = document.getElementById('subtotal');
const shipping = document.getElementById('shipping');
const total = document.getElementById('total');

checkout.on('change', (session) => {
  subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
  shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
  total.textContent = `Total: ${session.total.total.amount}`;
});

```

#### React

Gunakan [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) untuk menampilkan biaya pengiriman di formulir checkout Anda.

```jsx
import React from 'react';
import {useCheckout, ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <div>
      <div>
        <form>
          <ShippingAddressElement />
        </form>
      </div>
      <div>
        <h2>Checkout Summary</h2>
        {checkoutState.type === 'success' && (
          <>
            <pre>
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
            </pre>
            <h3>Totals</h3>
            <pre>
              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
            </pre>
          </>
        )}
      </div>
    </div>
  )
};
```

### Sinkronkan alamat penagihan dan pengiriman

Ketika menggunakan Billing Address Element dan Shipping Address Element secara sekaligus, Anda dapat menyertakan kotak centang bagi pelanggan untuk menyinkronkan alamat penagihan dengan alamat pengiriman.

#### HTML + JS

Teruskan opsi [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) di `elementsOptions` saat menginisialisasi Checkout untuk mengonfigurasi Address Element mana yang menampilkan kotak centang.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});
```

#### React

Teruskan opsi [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) di `elementsOptions` ke `CheckoutElementsProvider` untuk mengonfigurasi Address Element mana yang menampilkan kotak centang.

```jsx
<CheckoutElementsProvider
  stripe={stripePromise}
  options={{
    fetchClientSecret: () => promise,
    elementsOptions: {
      syncAddressCheckbox: 'shipping',
    },
  }}
>
  <CheckoutForm />
</CheckoutElementsProvider>
```

Atur nilainya ke `'penagihan'` atau `'Pengiriman'` untuk memilih Element Alamat mana yang menampilkan kotak centang. Atur ke `'Tidak ada'` untuk menyembunyikan kotak centang, atau membiarkannya kosong untuk menggunakan nilai default (`'penagihan'`).

### Gunakan formulir custom

Anda dapat membuat formulir sendiri untuk mengumpulkan alamat pengiriman.

- Jika halaman checkout Anda memiliki langkah khusus untuk pengisian alamat sebelum konfirmasi, panggil [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) saat pelanggan mengirimkan alamatnya.
- Jika tidak, Anda dapat menyerahkan alamat bila pelanggan mengeklik tombol “bayar” dengan meneruskan [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) ke [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

## Optional: Pisahkan otorisasi dan penarikan [Sisi server]

Stripe mendukung pembayaran kartu dua langkah sehingga Anda dapat terlebih dahulu mengotorisasi kartu, lalu menangkap dana nanti. Saat Stripe mengotorisasi pembayaran, penerbit kartu menjamin dana dan menahan jumlah pembayaran pada kartu pelanggan. Anda kemudian memiliki waktu tertentu untuk menangkap dana, [tergantung pada kartu](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Jika Anda tidak menangkap pembayaran sebelum otorisasi berakhir, pembayaran dibatalkan dan penerbit melepaskan dana yang ditahan.

Memisahkan otorisasi dan penangkapan pembayaran berguna jika Anda perlu melakukan tindakan tambahan antara mengkonfirmasi bahwa pelanggan mampu membayar dan mengumpulkan pembayaran mereka. Misalnya, jika Anda menjual barang dengan stok terbatas, Anda mungkin perlu mengkonfirmasi bahwa barang yang dibeli pelanggan Anda melalui Checkout masih tersedia sebelum menangkap pembayaran mereka dan menyelesaikan pembelian. Capai hal ini menggunakan alur kerja berikut:

1. Konfirmasikan bahwa Stripe mengotorisasi metode pembayaran pelanggan.
1. Periksa sistem manajemen inventaris Anda untuk mengonfirmasikan bahwa item masih tersedia.
1. Perbarui sistem manajemen inventaris Anda untuk menandai bahwa pelanggan telah membeli item.
1. Tarik pembayaran pelanggan.
1. Informasikan pelanggan Anda bila pembelian mereka berhasil di halaman konfirmasi.

Untuk menunjukkan bahwa Anda ingin memisahkan otorisasi dan penarikan, Anda harus mengatur nilai [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) ke `manual` ketika membuat Sesi Checkout. Ini menginstruksikan Stripe agar hanya mengotorisasi jumlah pada kartu pelanggan.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[capture_method]=manual" \
  -d return_url={{RETURN_URL}} \
  -d ui_mode=elements
```

Untuk menarik pembayaran yang belum ditarik, Anda dapat menggunakan endpoint [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) atau [penarikan](https://docs.stripe.com/api/payment_intents/capture.md). Menarik pembayaran secara terprogram memerlukan akses ke PaymentIntent yang dibuat selama Sesi Checkout, yang bisa Anda dapatkan dari objek [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Manajemen akun pelanggan [Tidak ada kode]

Biarkan pelanggan [mengelola](https://docs.stripe.com/customer-management.md) akunnya sendiri dengan membagikan tautan ke *portal pelanggan* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details) Anda. Portal pelanggan memungkinkan pelanggan masuk dengan email mereka untuk mengelola langganan, memperbarui metode pembayaran, dan lain-lain.

## Optional: Pemenuhan pesanan

Pelajari cara [mendapatkan notifikasi secara terprogram](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) bila pelanggan membayar.

## See also

- [Tambahkan diskon untuk pembayaran satu kali](https://docs.stripe.com/payments/checkout/discounts.md?payment-ui=embedded-components)
- [Pungut pajak](https://docs.stripe.com/payments/checkout/taxes.md?payment-ui=embedded-components)
- [Aktifkan kuantitas mata anggaran yang dapat disesuaikan](https://docs.stripe.com/payments/checkout/adjustable-quantity.md?payment-ui=embedded-components)
- [Tambahkan tombol sekali klik](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components)


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

Buat formulir pembayaran kustom menggunakan [Stripe Elements](https://docs.stripe.com/payments/elements.md) dan [Payment Intents API](https://docs.stripe.com/api/payment_intents.md). Lihat bagaimana integrasi ini [dibandingkan dengan tipe integrasi Stripe lainnya](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

Payment Intents API adalah API tingkat rendah yang dapat Anda gunakan untuk membuat alur checkout atau pembayaran Anda sendiri, tetapi memerlukan lebih banyak kode dan pemeliharaan berkelanjutan yang signifikan. Kami merekomendasikan [Payment Element dengan Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) untuk sebagian besar integrasi karena mencakup alur pembayaran yang serupa dengan Payment Intents. Pelajari lebih lanjut tentang [kapan harus menggunakan Checkout Sessions, bukan PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran.

#### Upaya integrasi
Complexity: 4/5
#### Tipe integrasi

Gabungkan komponen UI ke dalam alur pembayaran custom

#### Penyesuaian UI

Penyesuaian tingkat CSS dengan [Appearance API](https://docs.stripe.com/elements/appearance-api.md)

> #### Tertarik menggunakan Stripe Tax, diskon, pengiriman, atau konversi mata uang?
> 
> Stripe memiliki integrasi Payment Element yang mengelola pajak, diskon, pengiriman, dan konversi mata uang. Lihat [buat halaman checkout](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) untuk mempelajari lebih lanjut.

## Siapkan Stripe [Sisi server]

Pertama, [buat akun Stripe](https://dashboard.stripe.com/register) atau [masuk](https://dashboard.stripe.com/login).

Gunakan pustaka resmi kami untuk mengakses API Stripe dari aplikasi Anda:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Buat PaymentIntent [Sisi server]

> Jika Anda ingin merender Payment Element tanpa terlebih dahulu membuat PaymentIntent, lihat [Kumpulkan detail pembayaran sebelum membuat Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Objek [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) mewakili maksud Anda menagih pembayaran dari pelanggan dan melacak upaya charge dan perubahan status selama proses pembayaran.
Gambaran umum tingkat tinggi tentang integrasi pembayaran yang dijelaskan dalam dokumen ini. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Buat PaymentIntent

Buat PaymentIntent pada server Anda dengan [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) dan [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). Di versi terbaru API, menentukan parameter `automatic_payment_methods` bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor, seperti jumlah transaksi, mata uang, dan alur pembayaran.

Stripe menggunakan [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) Anda untuk menampilkan metode pembayaran yang telah Anda aktifkan. Untuk melihat bagaimana metode pembayaran Anda muncul bagi pelanggan, masukkan ID transaksi atau atur jumlah pesanan dan mata uang di [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Untuk mengesampingkan metode pembayaran, cantumkan secara manual metode apa pun yang ingin Anda aktifkan menggunakan atribut [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true"
```

> Selalu putuskan berapa banyak yang akan di-charge di sisi server, lingkungan tepercaya, bukan di klien. Ini mencegah pelanggan yang berniat jahat untuk dapat memilih harga mereka sendiri.

### Ambil client secret

PaymentIntent menyertakan *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) yang digunakan pada sisi client untuk menyelesaian proses pembayaran dengan aman. Anda dapat menggunakan pendekatan berbeda untuk meneruskan client secret ke sisi client.

#### Aplikasi halaman tunggal

Ambil client secret dari endpoint pada server Anda, menggunakan fungsi `fetch` browser. Pendekatan ini paling baik jika sisi client Anda adalah aplikasi satu halaman, terutama yang dibangun dengan kerangka kerja frontend modern seperti React. Buat endpoint server yang melayani client secret:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

Kemudian ambil client secret dengan JavaScript pada sisi client:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Rendering sisi server

Teruskan client secret ke client dari server Anda. Pendekatan ini berfungsi paling baik jika aplikasi menghasilkan konten statis pada server sebelum mengirimkannya ke browser.

Tambahkan [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) di formulir checkout Anda. Di kode sisi server Anda, ambil client secret dari PaymentIntent:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Kumpulkan detail pembayaran [Sisi client]

Kumpulkan detail pembayaran pada client dengan [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element adalah komponen UI siap-rakit yang menyederhanakan pengumpulan detail pembayaran untuk berbagai metode pembayaran.

Payment Element berisi iframe yang mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe harus memiliki atribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) yang ditetapkan ke `"payment *"` setara.

Alamat halaman checkout harus dimulai dengan `https://` rather daripada `http://` for integrasi Anda untuk bekerja. Anda dapat menguji integrasi tanpa menggunakan HTTPS, tetapi jangan lupa [mengaktifkannya](https://docs.stripe.com/security/guide.md#tls) saat Anda siap menerima pembayaran langsung.

#### HTML + JS

### Siapkan Stripe.js

Payment Element secara otomatis tersedia sebagai fitur Stripe.js. Sertakan skrip Stripe.js di halaman checkout Anda dengan menambahkannya ke `head` di file HTML. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan sertakan skrip dalam paket atau meng-host sendiri salinannya.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Buat instance Stripe dengan JavaScript berikut di halaman checkout Anda:

```javascript
// 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('<<YOUR_PUBLISHABLE_KEY>>');
```

### Tambahkan Payment Element ke halaman pembayaran Anda

Payment Element membutuhkan tempat tinggal di halaman pembayaran Anda. Buat simpul DOM kosong (wadah) dengan ID unik di formulir pembayaran Anda:

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

Saat formulir sebelumnya dimuat, buat instance Payment Element dan pasang ke simpul DOM penampung. Teruskan [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dari langkah sebelumnya ke `options` saat Anda membuat instance [Elements](https://docs.stripe.com/js/elements_object/create):

Tangani client secret dengan hati-hati karena dapat menyelesaikan charge. Jangan mencatatnya, menyematkannya di URL, atau memaparkannya kepada siapa pun kecuali pelanggan.

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

#### React

### Siapkan Stripe.js

Instal [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) dan [loader Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dari register publik npm:

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Tambahkan dan konfigurasikan penyedia Elements ke halaman pembayaran Anda

Untuk menggunakan komponen Payment Element, bungkus komponen halaman checkout Anda di [penyedia Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Panggil `loadStripe` dengan kunci yang dapat dipublikasikan, dan teruskan `Promise` yang dikembalikan ke penyedia `Elements`. Teruskan juga [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dari langkah sebelumnya sebagai `options` ke penyedia `Elements`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Tambahkan komponen Payment Element

Gunakan komponen `PaymentElement` untuk membuat formulir Anda:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Stripe Elements adalah kumpulan komponen UI drop-in. Untuk menyesuaikan formulir Anda lebih lanjut atau mengumpulkan informasi pelanggan yang berbeda, telusuri [dokumen Elements](https://docs.stripe.com/payments/elements.md).

Payment Element menampilkan formulir dinamis yang memungkinkan pelanggan memilih metode pembayaran. Bagi masing-masing metode pembayaran, formulir akan secara otomatis meminta pelanggan untuk mengisi seluruh detail pembayaran yang diperlukan.

### Sesuaikan penampilan

Sesuaikan Payment Element agar sejalan dengan desain situs Anda dengan meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) ke dalam `options` ketika membuat penyedia `Elements`.

### Kumpulkan alamat

Secara default, Payment Element hanya mengumpulkan detail alamat penagihan yang diperlukan. Beberapa perilaku, seperti [menghitung pajak](https://docs.stripe.com/api/tax/calculations/create.md) atau memasukkan detail pengiriman, memerlukan alamat lengkap pelanggan Anda. Anda dapat melakukannya:

- Gunakan [Address Element](https://docs.stripe.com/elements/address-element.md) untuk memanfaatkan fitur pelengkapan otomatis dan pelokalan untuk mengumpulkan alamat lengkap pelanggan Anda. Hal ini membantu memastikan penghitungan pajak yang paling akurat.
- Kumpulkan detail alamat menggunakan formulir khusus Anda sendiri.

### Minta token merchant Apple Pay

Jika Anda telah mengonfigurasi integrasi untuk [menerima pembayaran Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), sebaiknya konfigurasikan antarmuka Apple Pay untuk mengembalikan token merchant guna mengaktifkan transaksi yang diinisiasi merchant (MIT). [Minta jenis token merchant yang relevan](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) di Elemen Pembayaran.

## Optional: Simpan dan ambil metode pembayaran pelanggan

Anda dapat mengonfigurasi Payment Element untuk menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang. Bagian ini menunjukkan cara mengintegrasikan [fitur metode pembayaran tersimpan](https://docs.stripe.com/payments/save-customer-payment-methods.md), yang memungkinkan Payment Element untuk:

- Meminta persetujuan pembeli untuk menyimpan metode pembayaran
- Menyimpan metode pembayaran saat pembeli memberikan persetujuan
- Menampilkan metode pembayaran yang tersimpan kepada pembeli untuk pembelian di masa mendatang
- [Secara otomatis memperbarui kartu yang hilang atau kedaluwarsa](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) saat pembeli menggantinya
![Kotak centang Payment Element dan metode pembayaran tersimpan](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

Simpan metode pembayaran.
![Payment Element dengan Metode pembayaran tersimpan dipilih](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Gunakan kembali metode pembayaran yang disimpan sebelumnya.

### Mengaktifkan penyimpanan metode pembayaran di Payment Element

Saat membuat [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) di server Anda, buat juga [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) dengan memberikan ID pelanggan (menggunakan `customer` untuk objek `Customer` atau `customer_account` untuk objek `Account` yang dikonfigurasi untuk pelanggan) serta mengaktifkan komponen [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) untuk sesi Anda. Konfigurasikan [fitur](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) metode pembayaran tersimpan mana yang ingin Anda aktifkan. Misalnya, mengaktifkan [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) akan menampilkan kotak centang yang menawarkan pelanggan untuk menyimpan detail pembayaran mereka agar dapat digunakan di masa mendatang.

Anda dapat menentukan `setup_future_usage` pada PaymentIntent atau Checkout Session untuk mengganti perilaku bawaan (default) dalam menyimpan metode pembayaran. Hal ini memastikan metode pembayaran tersimpan secara otomatis untuk penggunaan di masa mendatang, meskipun pelanggan tidak secara eksplisit memilih untuk menyimpannya. Jika Anda berniat menentukan `setup_future_usage`, jangan atur `payment_method_save_usage` dalam transaksi pembayaran yang sama karena hal ini akan menyebabkan kesalahan integrasi.

> #### Menggunakan API Akun v2 untuk mewakili pelanggan
> 
> API Akun v2 adalah GA untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Semua pengguna Stripe dapat mengaktifkan Akun v2 [di Dashboard mereka](https://dashboard.stripe.com/settings/connect/platform-setup). Namun, saat melakukan panggilan ke API Akun v2, pengguna pratinjau harus [menentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
> 
> Untuk sebagian besar contoh penggunaan, sebaiknya Anda [memodelkan pelanggan Anda sebagai objek Account yang dikonfigurasi pelanggan](https://docs.stripe.com/connect/use-accounts-as-customers.md) alih-alih menggunakan [Customer](https://docs.stripe.com/api/customers.md) objek.

#### Akun v2

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

#### Pelanggan v1

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    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},
    customer: {{CUSTOMER_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

Instance Elements Anda menggunakan *client secret* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) untuk mengakses metode pembayaran yang disimpan pelanggan tersebut. [Tangani kesalahan](https://docs.stripe.com/error-handling.md) dengan benar saat Anda membuat CustomerSession. Jika terjadi kesalahan, Anda tidak perlu memberikan client secret CustomerSession ke instance Elements, karena bersifat opsional.

Buat instance Elements menggunakan client secrets untuk PaymentIntent dan CustomerSession. Kemudian, gunakan instance Elements ini untuk membuat Payment Element.

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

> Mengizinkan pelanggan menghapus metode pembayaran mereka yang tersimpan dengan mengaktifkan [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) akan berdampak pada langganan yang bergantung pada metode pembayaran tersebut. Menghapus metode pembayaran akan melepaskan [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) dari objek yang merepresentasikan pelanggan (baik itu `Account` yang dikonfigurasi untuk pelanggan maupun `Customer`).

Saat mengonfirmasi PaymentIntent, Stripe.js secara otomatis mengontrol pengaturan [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) pada PaymentIntent dan [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) pada PaymentMethod, tergantung pada jika pelanggan mencentang kotak untuk menyimpan detail pembayaran.

### Terapkan pengumpulan kembali CVC

Secara opsional, tentukan `require_cvc_recollection` [ketika membuat PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) untuk memberlakukan pengumpulan kembali CVC saat pelanggan membayar dengan kartu.

### Mendeteksi pemilihan metode pembayaran yang disimpan

Untuk mengontrol konten dinamis saat metode pembayaran tersimpan dipilih, dengarkan peristiwa `change` elemen pembayaran, yang diisi dengan metode pembayaran yang dipilih.

```javascript
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})
```

## Optional: Link di halaman checkout Anda [Sisi client]

Biarkan pelanggan Anda memproses pembayaran lebih cepat dengan menggunakan [Link](https://docs.stripe.com/payments/link.md) di [Element Pembayaran](https://docs.stripe.com/payments/payment-element.md). Anda dapat mengisi otomatis informasi untuk setiap pelanggan yang login yang sudah menggunakan Link, terlepas dari apakah mereka awalnya menyimpan informasi mereka di Link dengan bisnis lain. Integrasi Element Pembayaran default menyertakan prompt Link dalam formulir kartu. Untuk mengelola Link di Element Pembayaran, buka [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods).
![Autentikasi atau daftarkan dengan Link langsung di Payment Element saat checkout](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Mengumpulkan alamat email pelanggan untuk autentikasi atau pendaftaran Link

### Opsi integrasi

Ada dua cara untuk mengintegrasikan Link dengan Element Pembayaran. Dari jumlah tersebut, Stripe merekomendasikan untuk meneruskan alamat email pelanggan ke Element Pembayaran jika tersedia. Ingatlah untuk mempertimbangkan cara kerja alur checkout Anda saat memutuskan di antara opsi berikut:

| Opsi integrasi                                                  | Alur checkout                                                                                                                                                                                           | Deskripsi                                                                                                                                                                                                                                                                        |
| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Masukkan alamat email pelanggan ke Payment Element (Disarankan) | - Pelanggan Anda memasukkan alamat email mereka sebelum masuk ke halaman checkout (dalam langkah pembuatan akun sebelumnya, misalnya).
  - Anda lebih suka menggunakan bidang input email Anda sendiri. | Teruskan alamat email pelanggan secara terprogram ke Element Pembayaran. Dalam skenario ini, pelanggan mengautentikasi ke Link secara langsung dalam formulir pembayaran, bukan komponen UI terpisah.                                                                            |
| Kumpulkan alamat email pelanggan di Payment Element             | - Pelanggan Anda dapat memilih untuk memasukkan email mereka dan mengautentikasi atau mendaftar dengan Link langsung di Elemen Pembayaran saat checkout.
  - Tidak diperlukan perubahan kode.           | Jika pelanggan belum mendaftar dengan Link dan mereka memilih metode pembayaran yang didukung di Element Pembayaran, mereka akan diminta untuk menyimpan detailnya menggunakan Link. Bagi mereka yang sudah mendaftar, Link secara otomatis mengisi informasi pembayaran mereka. |

Gunakan [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) untuk meneruskan alamat email pelanggan ke Payment Element.

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

Untuk informasi selengkapnya, baca cara [buat halaman checkout kustom yang menyertakan Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md).

## Optional: Ambil pembaruan dari server [Sisi client]

Anda sebaiknya memperbarui atribut pada PaymentIntent setelah menampilkan Payment Element, seperti [amount](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (misalnya, kode diskon atau biaya pengiriman). Anda dapat [memperbarui PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) di server, kemudian panggil [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) untuk melihat jumlah baru yang tercermin di Payment Element. Contoh ini menunjukkan kepada Anda cara membuat endpoint server yang memperbarui jumlah pada PaymentIntent:

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
get '/update' do
  intent = client.v1.payment_intents.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end
```

Contoh ini memperagakan cara memperbarui UI untuk mencerminkan perubahan ini pada sisi client:

```javascript
(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();
```

## Serahkan pembayaran ke Stripe [Sisi client]

Gunakan [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) ke fungsi ini untuk menunjukkan ke mana Stripe harus mengalihkan pengguna setelah menyelesaikan pembayaran. Pengguna Anda mungkin pertama kali diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum diarahkan ulang ke `return_url`. Pembayaran kartu segera dialihkan ke `return_url` bila pembayaran berhasil.

Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur [pengalihan](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) ke `if_required`. Ini hanya mengalihkan pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Untuk memanggil [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) dari komponen formulir pembayaran Anda, gunakan kait [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) dan [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook).

Jika lebih suka komponen kelas tradisional daripada kait, Anda dapat menggunakan [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) sebagai gantinya.

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

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

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }
const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

Pastikan `return_url` sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran. Bila Stripe mengarahkan ulang pelanggan ke `return_url`, kami menyediakan parameter query URL berikut ini:

| Parameter                      | Keterangan                                                                                                                             |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | Identifier unik untuk `PaymentIntent`.                                                                                                 |
| `payment_intent_client_secret` | [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dari objek `PaymentIntent`. |

> Jika memiliki alat yang melacak sesi browser pelanggan, Anda mungkin perlu menambah domain `stripe.com` ke daftar pengecualian perujuk. Pengarahan ulang menyebabkan sejumlah alat membuat sesi baru, yang mencegah Anda melacak sesi yang telah selesai.

Gunakan salah satu parameter query untuk mengambil PaymentIntent. Periksa [status PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan `return_url`, yang akan tetap ada selama proses pengalihan.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

```jsx
import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## Tangani kejadian pascapembayaran [Sisi server]

Stripe mengirim kejadian [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ketika selesai pembayaran. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Selain menangani kejadian `payment_intent.succeeded`, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

| Kejadian                                                                                                                        | Keterangan                                                                                                                                                                                                                                                                                 | Tindakan                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Dikirim bila pelanggan berhasil menyelesaikan pembayaran.                                                                                                                                                                                                                                  | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka.     |
| [payment_intent. pemrosesan](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)        | Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian `payment_intent.succeeded` atau `payment_intent.payment_failed` di masa mendatang. | Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal.                                                                                                                                                                                                          | Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.                                                                |

## Coba integrasi Anda

Untuk mencoba integrasi pembayaran custom Anda:

1. Buat Payment Intent dan ambil client secret.
1. Isilah detail pembayaran dengan metode dari tabel berikut.
   - Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
   - Masukkan nomor 3 angka untuk CVC.
   - Masukkan kode pos tagihan.
1. Serahkan pembayaran ke Stripe. Anda dialihkan ke `return_url`.
1. Masuk ke Dashboard dan cari pembayaran pada [halaman Transaksi](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
1. Klik pembayaran Anda untuk melihat detail selengkapnya, seperti informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk memenuhi pesanan.

Pelajari selengkapnya tentang [percobaan integrasi Anda](https://docs.stripe.com/testing.md).

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Dompet

| Metode pembayaran | Skenario                                                                                                                                                                                           | Cara mencoba                                                                                                                                                                                             |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi segera](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. |

#### Pengarahan ulang bank

| Metode pembayaran                      | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                              |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung BECS                    | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS.                                                                                                                                              | Isi formulir menggunakan nomor akun `900123456` dan BSB `000000`. PaymentIntent yang telah dikonfirmasi awalnya akan berstatus `processing`, kemudian berubah menjadi status `succeeded` setelah 3 menit. |
| Debit Langsung BECS                    | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`.                                                                                                                                   | Isi formulir menggunakan nomor akun `111111113` dan BSB `000000`.                                                                                                                                         |
| Bancontact, EPS, iDEAL, dan Przelewy24 | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.    |
| Pay by Bank                            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                      |
| Pay by Bank                            | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                        |
| BLIK                                   | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

#### Voucher

| Metode pembayaran | Skenario                                                 | Cara mencoba                                                                                           |
| ----------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Boleto, OXXO      | Pelanggan Anda membayar dengan voucher OXXO atau Boleto. | Pilih Boleto atau OXXO sebagai metode pembayaran dan serahkan pembayaran. Tutup dialog setelah muncul. |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Tambahkan metode pembayaran lainnya

Payment Element [mendukung banyak metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) secara default. Anda harus mengambil langkah tambahan untuk mengaktifkan dan menampilkan sebagian metode pembayaran.

### Affirm

Untuk mulai menggunakan Affirm, Anda harus mengaktifkannya di [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Saat membuat PaymentIntent dengan metode pembayaran Affirm, Anda perlu menyertakan [alamat pengiriman](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Contoh ini menyarankan penerusan informasi pengiriman pada client setelah pelanggan [memilih metode pembayaran mereka](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Pelajari selengkapnya tentang penggunaan [Affirm](https://docs.stripe.com/payments/affirm.md) dengan Stripe.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US'
        }
      },

    }
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (for example,
    // payment details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

```jsx

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

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

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://my-site.com/order/123/complete',shipping: {
          name: 'Jenny Rosen',
          address: {
            line1: '1 Street',
            city: 'Seattle',
            state: 'WA',
            postal_code: '95123',
            country: 'US'
          }
        },

      }
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example,
      // payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  )
};

export default CheckoutForm;
```

#### Coba Affirm

Pelajari cara menguji berbagai skenario menggunakan tabel berikut:

| Skenario                                                                 | Cara mencoba                                                                               |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| Pelanggan Anda berhasil membayar dengan Affirm.                          | Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran. |
| Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Affirm. | Isi formulir dan klik **Percobaan pembayaran gagal** pada halaman pengarahan ulang.        |

### Afterpay (Clearpay)

Saat membuat PaymentIntent dengan metode pembayaran Afterpay, Anda perlu menyertakan [alamat pengiriman](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Pelajari selengkapnya tentang penggunaan [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) dengan Stripe.

Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor, seperti jumlah transaksi, mata uang, dan alur pembayaran. Contoh di bawah menggunakan atribut [automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled) tetapi Anda dapat mencantumkan `afterpay_clearpay` dengan [tipe metode pembayaran](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). Di versi terbaru API, menentukan parameter `automatic_payment_methods` bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. Terlepas dari opsi yang Anda pilih, pastikan Anda mengaktifkan Afterpay Clearpay di [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

#### Coba Afterpay (Clearpay)

Pelajari cara menguji berbagai skenario menggunakan tabel berikut:

| Skenario                                                                   | Cara mencoba                                                                               |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| Pelanggan Anda berhasil membayar dengan Afterpay.                          | Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran. |
| Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Afterpay. | Isi formulir dan klik **Percobaan pembayaran gagal** pada halaman pengarahan ulang.        |

### Apple Pay dan Google Pay

Saat Anda [mengaktifkan pembayaran kartu](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), kami menampilkan Apple Pay dan Google Pay untuk pelanggan yang lingkungannya memenuhi [ketentuan tampilan dompet digital](https://docs.stripe.com/testing/wallets.md). Untuk terima pembayaran dari dompet digital ini, Anda juga harus:

- Aktifkan di [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods). Apple Pay diaktifkan secara default.
- Sajikan aplikasi Anda melalui HTTPS dalam pengembangan dan produksi.
- [Daftarkan domain Anda](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- [Mendapatkan pembaruan dari server](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) jika Anda memperbarui jumlah [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) agar modal pembayaran dompet digital tetap sinkron.

> #### Percobaan Regional
> 
> Stripe Elements tidak mendukung Google Pay atau Apple Pay untuk akun dan pelanggan Stripe di India. Oleh karena itu, Anda tidak dapat mencoba integrasi Google Pay atau Apple Pay jika alamat IP pencoba berada di India, sekalipun akun Stripe berlokasi di luar India.

Pelajari selengkapnya tentang penggunaan [Apple Pay](https://docs.stripe.com/apple-pay.md) dan [Google Pay](https://docs.stripe.com/google-pay.md) dengan Stripe.

### ACH Direct Debit

Saat menggunakan Payment Element dengan metode pembayaran ACH Direct Debit, ikuti langkah-langkah ini:

1. Membuat file yang dikonfigurasi pelanggan objek [Akun](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) atau objek [Pelanggan](https://docs.stripe.com/api/customers/create.md) untuk mewakili pelanggan Anda.

#### Akun v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-03-25.preview" \
  --json '{
    "configuration": {
        "customer": {}
    }
  }'
```

#### Pelanggan v1

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

1. Tentukan ID pelanggan saat membuat `PaymentIntent`.

   #### Akun v2

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
     -d "payment_method_types[]=us_bank_account"
   ```

   #### Pelanggan v1

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}" \
     -d "payment_method_types[]=us_bank_account"
   ```

1. Pilih [metode verifikasi](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method).

Saat menggunakan metode pembayaran ACH Direct Debit dengan Payment Element, Anda hanya dapat memilih `automatic` atau `instant`.

Pelajari selengkapnya tentang penggunaan [ACH Direct Debit](https://docs.stripe.com/payments/ach-direct-debit.md) dengan Stripe.

#### Coba ACH Direct Debit

| Skenario                                                                                | Cara mencoba                                                                                                                                                                                                                                                                                                                               |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan verifikasi instan. | Pilih **Rekening bank AS** dan isi formulir. Klik lembaga percobaan. Ikuti instruksi pada jendela untuk menautkan rekening bank Anda. Klik tombol pembayaran Anda.                                                                                                                                                                         |
| Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan mikrodeposit.      | Pilih **rekening bank AS** dan isi formulir. Klik **Masukkan detail bank secara manual**. Ikuti petunjuk pada modal untuk menautkan rekening bank Anda. Anda dapat menggunakan ini [nomor akun uji](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Klik tombol pembayaran Anda. |
| Pelanggan Anda gagal menyelesaikan proses penautan rekening bank.                       | Pilih **rekening bank AS** dan klik lembaga percobaan atau **Masukkan detail bank secara manual**. Tutup jendela tanpa menyelesaikannya.                                                                                                                                                                                                   |

### BLIK

Ketika menggunakan Payment Element dengan BLIK, pengguna dapat menutup modal yang memintanya untuk mengotorisasi pembayaran di aplikasi perbankan mereka. Hal ini memicu pengalihan ke `return_url` Anda dan tidak mengembalikan pengguna ke halaman checkout. Pelajari selengkapnya tentang penggunaan [BLIK](https://docs.stripe.com/payments/blik.md) dengan Stripe.

Untuk menangani pengguna yang menutup modal, di pengendali sisi server untuk `return_url`, periksa `status` Payment Intent untuk melihat apakah `succeeded` atau masih `requires_action` (artinya pengguna telah menutup modal tanpa memberi otorisasi), menangani setiap kasus sesuai kebutuhan.

### Metode pembayaran kode QR

Ketika menggunakan Payment Element dengan metode pembayaran berbasis kode QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), pengguna dapat menutup modal kode QR. Hal ini memicu pengalihan ke `return_url` Anda dan tidak mengembalikan pengguna ke halaman checkout.

Untuk menangani pengguna yang menutup modal kode QR, di penangan sisi server untuk `return_url` Anda, periksa `status` Payment Intent untuk melihat apakah `succeeded` atau masih `requires_action` (berarti pengguna telah menutup modal tanpa membayar), menangani setiap kasus sesuai kebutuhan.

Atau, cegah pengalihan otomatis ke `return_url` Anda dengan meneruskan parameter opsional lanjutan [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), yang mencegah pengalihan ketika menutup kode QR modal.

### Cash App Pay

Payment Element menampilkan formulir dinamis secara berbeda di web desktop atau web seluler karena menggunakan metode autentikasi pelanggan yang berbeda. Pelajari selengkapnya tentang penggunaan [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) dengan Stripe.

#### Elemen aplikasi web seluler

Cash App Pay adalah metode pembayaran berbasis pengalihan di web seluler. Aplikasi ini mengalihkan pelanggan ke Cash App dalam mode live atau halaman pembayaran percobaan di lingkungan percobaan. Setelah pembayaran selesai, mereka dialihkan ke `return_url`, terlepas dari apakah Anda mengatur `redirect=if_required` atau tidak.

#### Elemen aplikasi web desktop

Cash App Pay adalah metode pembayaran kode QR di web desktop, di mana Payment Element membuat modal kode QR. Pelanggan Anda perlu memindai kode QR dengan aplikasi pemindaian kode QR atau aplikasi seluler Cash App.

Dalam mode live, ini mengalihkan pelanggan ke `return_url` segera setelah mereka dialihkan ke Cash App. Di lingkungan percobaan, mereka dapat menyetujui atau menolak pembayaran sebelum dialihkan ke `return_url`. Pelanggan juga dapat menutup modal kode QR sebelum menyelesaikan pembayaran, yang memicu pengalihan ke `return_url`.

Pastikan `return_url` sesuai dengan halaman di situs web Anda untuk memeriksa `status` Tujuan Pembayaran. `status` Tujuan Pembayaran dapat berupa `succeeded`, `failed`, atau `requires_action` (misalnya, pelanggan telah menutup modal tanpa memindai kode QR).

Atau, cegah pengalihan otomatis ke `return_url` Anda dengan meneruskan parameter opsional lanjutan `redirect=if_required`, yang mencegah pengalihan ketika menutup modal kode QR.

### PayPal

Untuk menggunakan PayPal, pastikan Anda menggunakan [domain terdaftar](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

## Ungkapkan Stripe kepada pelanggan Anda

Stripe mengumpulkan informasi tentang interaksi pelanggan dengan Elements untuk memberikan layanan kepada Anda, mencegah penipuan, serta meningkatkan layanannya. Ini termasuk penggunaan cookie dan alamat IP guna mengidentifikasi Elements mana yang dilihat pelanggan selama satu sesi checkout. Anda bertanggung jawab untuk mengungkapkan serta memperoleh semua hak dan persetujuan yang diperlukan agar Stripe dapat menggunakan data dengan cara ini. Untuk informasi selengkapnya, kunjungi [pusat privasi](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe) kami.

## See also

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Siapkan pembayaran mendatang](https://docs.stripe.com/payments/save-and-reuse.md)
- [Simpan detail pembayaran selama pembayaran](https://docs.stripe.com/payments/save-during-payment.md)
- [Hitung pajak penjualan, GST, dan PPN di alur pembayaran Anda](https://docs.stripe.com/tax/custom.md)


# Integrasi dalam aplikasi untuk iOS

> This is a Integrasi dalam aplikasi untuk iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=ios.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png)

Integrasikan UI pembayaran siap-rakit Stripe ke dalam checkout aplikasi iOS Anda dengan kelas [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Lihat sampel integrasi kami [di GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example).

## Siapkan Stripe [Sisi server] [Sisi client]

Pertama, Anda membutuhkan akun Stripe. [Daftar sekarang](https://dashboard.stripe.com/register).

### Sisi server

Integrasi ini memerlukan endpoint di server Anda yang berinteraksi dengan Stripe API. Gunakan pustaka resmi kami untuk akses ke Stripe API dari server Anda:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### Sisi client

[Stripe iOS SDK](https://github.com/stripe/stripe-ios) adalah sumber terbuka, yang [didokumentasikan lengkap](https://stripe.dev/stripe-ios/index.html), dan kompatibel dengan aplikasi yang mendukung iOS 13 ke atas.

#### Swift Package Manager

Untuk menginstal SDK, ikuti langkah-langkah ini:

1. Di Xcode, pilih **File** > **Tambahkan Dependensi Paket…** dan masukkan `https://github.com/stripe/stripe-ios-spm` sebagai URL repositori.
1. Pilih nomor versi terbaru dari [halaman rilis](https://github.com/stripe/stripe-ios/releases) kami.
1. Tambahkan produk **StripePaymentSheet** ke [target aplikasi Anda](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Jika Anda belum melakukannya, instal versi terbaru [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Jika Anda tidak memiliki [Podfile](https://guides.cocoapods.org/syntax/podfile.html), jalankan perintah berikut untuk membuatnya:
   ```bash
   pod init
   ```
1. Tambahkan baris ini ke `Podfile` Anda:
   ```podfile
   pod 'StripePaymentSheet'
   ```
1. Jalankan perintah berikut:
   ```bash
   pod install
   ```
1. Jangan lupa menggunakan file `.xcworkspace` untuk membuka proyek Anda di Xcode, sebagai ganti file `.xcodeproj`, mulai sekarang.
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK, jalankan:
   ```bash
   pod update StripePaymentSheet
   ```

#### Carthage

1. Jika Anda belum melakukannya, instal versi terbaru [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Tambahkan baris ini ke `Cartfile` Anda:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Ikuti [instruksi instalasi Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Pastikan untuk menyematkan semua framework yang diwajibkan yang tercantum [di sini](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking).
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK, jalankan perintah berikut:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Kerangka Kerja Manual

1. Masuklah ke [halaman rilis GitHub](https://github.com/stripe/stripe-ios/releases/latest) kami lalu unduh dan unzip **Stripe.xcframework.zip**.
1. Seret **StripePaymentSheet.xcframework** ke bagian **Embedded Binaries** pengaturan **General** di proyek Xcode Anda. Pastikan memilih **Copy items if needed**.
1. Ulangi langkah 2 untuk semua framework yang diwajibkan yang tercantum [di sini](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking).
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK kami, ulangi langkah 1–3.

> Untuk detail mengenai rilis SDK terbaru dan versi sebelumnya, lihat halaman [Rilis](https://github.com/stripe/stripe-ios/releases) di GitHub. Untuk menerima notifikasi bila rilis baru diterbitkan, [lihat rilis](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) untuk repositori.

## Aktifkan metode pembayaran

Lihat [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods).

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu menjangkau lebih banyak pelanggan, tetapi sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat [Dukungan metode pembayaran](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) untuk dukungan produk dan metode pembayaran, dan [halaman skema biaya](https://stripe.com/pricing/local-payment-methods) kami untuk mengetahui biayanya.

## Tambahkan endpoint [Sisi server]

> #### Catatan
> 
> Untuk menampilkan PaymentSheet sebelum membuat PaymentIntent, lihat [Kumpulkan detail pembayaran sebelum membuat Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Integrasi ini menggunakan tiga objek API Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.

1. (Opsional) Objek [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) atau [Pelanggan](https://docs.stripe.com/api/customers.md): Untuk menyiapkan metode pembayaran untuk pembayaran mendatang, Anda harus melampirkannya ke pelanggan. Buat objek yang mewakili pelanggan Anda saat mereka membuat akun di bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek `Akun` atau `Pelanggan` sebelum pembayaran dan menghubungkannya dengan representasi internal akun pelanggan Anda nanti.

1. (Opsional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informasi pada objek yang mewakili pelanggan Anda bersifat sensitif dan tidak dapat diambil langsung dari aplikasi. `CustomerSession` memberikan SDK akses berlingkup sementara ke `Akun` atau `Pelanggan` dan menyediakan opsi konfigurasi tambahan. Lihat daftar lengkap [opsi konfigurasi](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Jika Anda tidak pernah menyimpan kartu untuk pelanggan dan tidak mengizinkan pelanggan lama menggunakan kembali kartu yang disimpan, Anda dapat meniadakan objek `Akun` atau `Pelanggan` dan objek `CustomerSession` dari integrasi Anda.

Karena alasan keamanan, aplikasi Anda tidak dapat membuat objek ini. Sebagai gantinya, tambahkan endpoint di server Anda yang:

1. Mengambil `Akun` atau `Pelanggan`, atau membuat yang baru.
1. Membuat [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) untuk `Akun` atau `Pelanggan`.
1. Membuat `PaymentIntent` dengan [jumlah](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [mata uang](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), serta [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) atau [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer).
1. Mengembalikan *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) dari `PaymentIntent`, `client_secret` dari `CustomerSession`, ID dari `Akun` atau `Pelanggan`, dan [publishable key](https://dashboard.stripe.com/apikeys) Anda ke aplikasi.

Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan dalam PaymentIntent. Anda dapat mengizinkan Stripe menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual. Terlepas dari opsi yang Anda pilih, ketahui mata uang yang diteruskan di PaymentIntent memfilter metode pembayaran yang ditampilkan kepada pelanggan. Misalnya, jika Anda meneruskan `eur` pada PaymentIntent dan mengaktifkan OXXO di Dashboard, OXXO tidak akan ditampilkan kepada pelanggan karena OXXO tidak mendukung pembayaran `eur`.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, pembatasan metode pembayaran, dan parameter lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran yang meningkatkan konversi serta yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan.

#### Kelola metode pembayaran dari Dashboard

Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor seperti jumlah transaksi, mata uang, dan alur pembayaran. PaymentIntent dibuat menggunakan metode pembayaran yang Anda konfigurasikan di Dashboard. Jika tidak ingin menggunakan Dashboard atau jika ingin menentukan metode pembayaran secara manual, Anda dapat mencantumkannya menggunakan atribut `payment_method_types`.

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create a CustomerSession for the Account
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Cantumkan metode pembayaran secara manual

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create a CustomerSession for the Account
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

> Setiap metode pembayaran perlu mendukung mata uang yang diteruskan di PaymentIntent dan bisnis Anda perlu berlokasi di salah satu negara yang didukung oleh setiap metode pembayaran. Lihat halaman [Opsi integrasi metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md) untuk detail selengkapnya tentang apa yang didukung.

## Kumpulkan detail pembayaran [Sisi client]

Untuk menampilkan Payment Element seluler pada layar checkout, pastikan Anda:

- Tampilkan produk yang dibeli pelanggan beserta jumlah totalnya
- Gunakan [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) untuk mengumpulkan informasi pengiriman yang diperlukan dari pelanggan
- Tambahkan tombol checkout untuk menampilkan UI Stripe

#### UIKit

Di layar checkout aplikasi Anda, ambil rahasia klien PaymentIntent, rahasia klien CustomerSession, ID Pelanggan, dan kunci yang dapat dipublikasikan dari titik akhir yang Anda buat di langkah sebelumnya. Pakai `STPAPIClient.shared` untuk mengatur kunci yang dapat dipublikasikan dan menginisialisasi [Lembar Pembayaran](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html).

#### iOS (Swift)

```swift
import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet

class CheckoutViewController: UIViewController {
  @IBOutlet weak var checkoutButton: UIButton!
  var paymentSheet: PaymentSheet?
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint

  override func viewDidLoad() {
    super.viewDidLoad()

    checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside)
    checkoutButton.isEnabled = false

    // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerSessionClientSecret = json["customerSessionClientSecret"] as? String,
            let paymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }
STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      configuration.allowsDelayedPaymentMethods = true
      self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration)

      DispatchQueue.main.async {
        self.checkoutButton.isEnabled = true
      }
    })
    task.resume()
  }

}
```

Bila pelanggan mengetuk tombol **Checkout**, panggil `present` untuk menyajikan PaymentSheet. Setelah pelanggan menyelesaikan pembayaran, Stripe akan menutup PaymentSheet dan memanggil blok penyelesaian dengan [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html).

#### iOS (Swift)

```swift
@objc
func didTapCheckoutButton() {
  // MARK: Start the checkout process
  paymentSheet?.present(from: self) { paymentResult in
    // MARK: Handle the payment result
    switch paymentResult {
    case .completed:
      print("Your order is confirmed")
    case .canceled:
      print("Canceled!")
    case .failed(let error):
      print("Payment failed: \(error)")
    }
  }
}
```

#### SwiftUI

Buat model `ObservableObject` untuk layar checkout Anda. Model ini menerbitkan [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) dan [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html).

```swift
import StripePaymentSheet
import SwiftUI

class CheckoutViewModel: ObservableObject {
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint
  @Published var paymentSheet: PaymentSheet?
  @Published var paymentResult: PaymentSheetResult?
}
```

Ambil rahasia klien PaymentIntent, rahasia klien CustomerSession, ID Pelanggan, dan kunci yang dapat diterbitkan dari titik akhir yang Anda buat di langkah sebelumnya. Pakai `STPAPIClient.shared` untuk mengatur kunci yang dapat dipublikasikan dan menginisialisasi [Lembar Pembayaran](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html).

```swift
@_spi(CustomerSessionBetaAccess) import StripePaymentSheet
import SwiftUI

class CheckoutViewModel: ObservableObject {
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint
  @Published var paymentSheet: PaymentSheet?
  @Published var paymentResult: PaymentSheetResult?
func preparePaymentSheet() {
    // MARK: Fetch thePaymentIntent and Customer information from the backend
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerSessionClientSecret = json["customerSessionClientSecret"] as? String,
            letpaymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }

      STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      configuration.allowsDelayedPaymentMethods = true

      DispatchQueue.main.async {
        self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration)
      }
    })
    task.resume()
  }
}
struct CheckoutView: View {
  @ObservedObject var model = CheckoutViewModel()

  var body: some View {
    VStack {
      if model.paymentSheet != nil {
        Text("Ready to pay.")
      } else {
        Text("Loading…")
      }
    }.onAppear { model.preparePaymentSheet() }
  }
}
```

Tambahkan [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) ke `View`. Ini berperilaku mirip dengan `Button` SwiftUI, yang memungkinkan Anda menyesuaikannya dengan menambahkan `View`. Ketika Anda mengetuk tombol, itu akan menampilkan PaymentSheet. Setelah Anda menyelesaikan pembayaran, Stripe akan menutup PaymentSheet dan memanggil handler `onCompletion` dengan objek [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html).

```swift
@_spi(CustomerSessionBetaAccess) import StripePaymentSheet
import SwiftUI

class CheckoutViewModel: ObservableObject {
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint
  @Published var paymentSheet: PaymentSheet?
  @Published var paymentResult: PaymentSheetResult?

  func preparePaymentSheet() {
    // MARK: Fetch the PaymentIntent and Customer information from the backend
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerSessionClientSecret = json["customerSessionClientSecret"] as? String,
            let paymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }

      STPAPIClient.shared.publishableKey = publishableKey
      // MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret)
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods
      // that complete payment after a delay, like SEPA Debit and Sofort.
      configuration.allowsDelayedPaymentMethods = true

      DispatchQueue.main.async {
        self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration)
      }
    })
    task.resume()
  }
func onPaymentCompletion(result: PaymentSheetResult) {
    self.paymentResult = result
  }
}

struct CheckoutView: View {
  @ObservedObject var model = CheckoutViewModel()

  var body: some View {
    VStack {if let paymentSheet = model.paymentSheet {
        PaymentSheet.PaymentButton(
          paymentSheet: paymentSheet,
          onCompletion: model.onPaymentCompletion
        ) {
          Text("Buy")
        }
      } else {
        Text("Loading…")
      }if let result = model.paymentResult {
        switch result {
        case .completed:
          Text("Payment complete")
        case .failed(let error):
          Text("Payment failed: \(error.localizedDescription)")
        case .canceled:
          Text("Payment canceled.")
        }
      }
    }.onAppear { model.preparePaymentSheet() }
  }
}
```

Jika `PaymentSheetResult` adalah `.completed`, informasikan pengguna (misalnya, dengan menampilkan layar konfirmasi pesanan).

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

## Siapkan URL kembali [Sisi client]

Pelanggan dapat keluar dari aplikasi Anda untuk melakukan autentikasi (misalnya, di Safari atau aplikasi perbankannya). Untuk mengizinkan pelanggan kembali secara otomatis ke aplikasi Anda setelah mengautentikasi, [konfigurasikan skema URL custom](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) dan siapkan delegasi aplikasi Anda untuk meneruskan URL ke SDK. Stripe tidak mendukung [tautan universal](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content).

#### SceneDelegate

#### Swift

```swift
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (!stripeHandled) {
        // This was not a Stripe url – handle the URL normally as you would
    }
}

```

#### AppDelegate

#### Swift

```swift
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (stripeHandled) {
        return true
    } else {
        // This was not a Stripe url – handle the URL normally as you would
    }
    return false
}
```

#### SwiftUI

#### Swift

```swift

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      Text("Hello, world!").onOpenURL { incomingURL in
          let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL)
          if (!stripeHandled) {
            // This was not a Stripe url – handle the URL normally as you would
          }
        }
    }
  }
}
```

Selain itu, atur [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) pada objek [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) ke URL untuk aplikasi Anda.

```swift
var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"
```

## Tangani kejadian pascapembayaran [Sisi server]

Stripe mengirim kejadian [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ketika selesai pembayaran. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Selain menangani kejadian `payment_intent.succeeded`, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

| Kejadian                                                                                                                        | Keterangan                                                                                                                                                                                                                                                                                 | Tindakan                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Dikirim bila pelanggan berhasil menyelesaikan pembayaran.                                                                                                                                                                                                                                  | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka.     |
| [payment_intent. pemrosesan](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)        | Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian `payment_intent.succeeded` atau `payment_intent.payment_failed` di masa mendatang. | Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal.                                                                                                                                                                                                          | Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.                                                                |

## Coba integrasi

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Pengarahan ulang bank

| Metode pembayaran | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                           |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Bancontact, iDEAL | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang. |
| Pay by Bank       | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                   |
| Pay by Bank       | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                     |
| BLIK              | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                             |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Aktifkan Link

Aktifkan Link di [Setelan Metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) untuk memungkinkan pelanggan Anda menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman menggunakan tombol checkout ekspres satu klik Link.

### Teruskan email pelanggan Anda ke Mobile Payment Element

Link mengautentikasi pelanggan menggunakan alamat email mereka. Stripe merekomendasikan untuk mengisi informasi sebanyak mungkin untuk merampingkan proses checkout.

Untuk mengisikan otomatis nama pelanggan, alamat email, dan nomor telepon, berikan `defaultBillingDetails` dengan informasi pelanggan Anda setelah menginisialisasi `PaymentSheet.Configuration`.

```swift
var configuration = PaymentSheet.Configuration()
configuration.defaultBillingDetails.name = "Jenny Rosen"
configuration.defaultBillingDetails.email = "jenny.rosen@example.com"
configuration.defaultBillingDetails.phone = "888-888-8888"
```

## Optional: Aktifkan Apple Pay

> Jika layar checkout Anda memiliki **Tombol Apple Pay** khusus, ikuti [panduan Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) dan gunakan `ApplePayContext` untuk mengumpulkan pembayaran dari tombol Apple Pay. Anda dapat menggunakan `PaymentSheet` untuk menangani tipe metode pembayaran lainnya.

### Mendaftar Apple Merchant ID

Dapatkan Apple Merchant ID dengan [mendaftar identifier baru](https://developer.apple.com/account/resources/identifiers/add/merchant) di situs web Apple Developer.

Isi formulir dengan keterangan dan identifier. Keterangan adalah untuk catatan Anda sendiri dan nanti dapat diubah. Stripe merekomendasikan penggunaan nama aplikasi Anda sebagai identifier (misalnya, `merchant.com.{{YOUR_APP_NAME}}`).

### Buat sertifikat Apple Pay yang baru

Buat sertifikat untuk aplikasi Anda guna mengenkripsi data pembayaran.

Buka [Pengaturan Sertifikat iOS](https://dashboard.stripe.com/settings/ios_certificates) di Dashboard, klik **Tambahkan aplikasi baru**, dan ikuti panduannya.

Unduh file Permintaan Penandatanganan Sertifikat (CSR) untuk mendapatkan sertifikat aman dari Apple yang memungkinkan Anda menggunakan Apple Pay.

Satu file CSR harus digunakan untuk menerbitkan tepat satu sertifikat. Jika Anda mengganti Apple Merchant ID, Anda harus membuka [Pengaturan Sertifikat iOS](https://dashboard.stripe.com/settings/ios_certificates) di Dashboard untuk mendapatkan CSR dan sertifikat baru.

### Integrasikan dengan Xcode

Tambahkan kemampuan Apple Pay ke aplikasi Anda. Di Xcode, buka pengaturan proyek, klik tab **Signing & Capabilities**, dan tambahkan kemampuan **Apple Pay**. Pada saat ini Anda mungkin diminta untuk masuk ke akun pengembang. Pilih identifikasi merchant yang Anda buat sebelumnya, dan aplikasi Anda siap menyetujui Apple Pay.
![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png)

Aktifkan kemampuan Apple Pay di Xcode

### Tambahkan Apple Pay

#### Pembayaran satu kali

Untuk menambahkan Apple Pay ke PaymentSheet, atur [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) setelah memprakarsai `PaymentSheet.Configuration` dengan identitas merchant Apple dan [kode negara bisnis Anda](https://dashboard.stripe.com/settings/account).

#### iOS (Swift)

```swift
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(
  merchantId: "merchant.com.your_app_name",
  merchantCountryCode: "US"
)
```

#### Pembayaran rutin

Untuk menambahkan Apple Pay ke PaymentSheet, atur [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) setelah memprakarsai `PaymentSheet.Configuration` dengan identitas merchant Apple dan [kode negara bisnis Anda](https://dashboard.stripe.com/settings/account).

Sesuai [pedoman Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) untuk pembayaran rutin, Anda juga harus mengatur atribut tambahan pada `PKPaymentRequest`. Tambahkan handler di [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) untuk mengonfigurasi [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) dengan jumlah yang ingin Anda charge (misalnya, 9,95 USD sebulan).

Anda juga dapat mengadopsi [token merchant](https://developer.apple.com/apple-pay/merchant-tokens/) dengan mengatur properti `recurringPaymentRequest` atau `automaticReloadPaymentRequest` di `PKPaymentRequest`.

Untuk mempelajari lebih lanjut tentang cara menggunakan pembayaran rutin dengan Apple Pay, lihat [dokumentasi PassKit Apple](https://developer.apple.com/documentation/passkit/pkpaymentrequest).

#### iOS (Swift)

```swift
let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers(
    paymentRequestHandler: { request in
        // PKRecurringPaymentSummaryItem is available on iOS 15 or later
        if #available(iOS 15.0, *) {
            let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99"))

            // Payment starts today
            billing.startDate = Date()

            // Payment ends in one year
            billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365)

            // Pay once a month.
            billing.intervalUnit = .month
            billing.intervalCount = 1

            // recurringPaymentRequest is only available on iOS 16 or later
            if #available(iOS 16.0, *) {
                request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring",
                                                                            regularBilling: billing,
                                                                            managementURL: URL(string: "https://my-backend.example.com/customer-portal")!)
                request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'"
            }
            request.paymentSummaryItems = [billing]
            request.currencyCode = "USD"
        } else {
            // On older iOS versions, set alternative summary items.
            request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)]
        }
        return request
    }
)
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(merchantId: "merchant.com.your_app_name",
                                merchantCountryCode: "US",
                                customHandlers: customHandlers)
```

### Pelacakan pesanan

Untuk menambahkan informasi [pelacakan pesanan](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) di iOS 16 atau yang lebih baru, konfigurasikan [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) di `PaymentSheet.ApplePayConfiguration.Handlers` Anda. Stripe memanggil implementasi Anda setelah pembayaran selesai, tetapi sebelum iOS menutup lembar Apple Pay.

Dalam penerapan `authorizationResultHandler` Anda, ambil detail pesanan dari server Anda untuk pesanan yang selesai. Tambahkan detailnya ke [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) yang diberikan dan kembalikan hasil yang diubah.

Untuk mempelajari selengkapnya tentang pelacakan pesanan, lihat [dokumentasi Pesanan Dompet Apple](https://developer.apple.com/documentation/walletorders).

#### iOS (Swift)

```swift
let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers(
    authorizationResultHandler: { result in
      do {
        // Fetch the order details from your service
        let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID)
        result.orderDetails = PKPaymentOrderDetails(
          orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order"
          orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111"
          webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend"
          authenticationToken: myOrderDetails.authenticationToken) // "abc123"
        // Return your modified PKPaymentAuthorizationResult
        return result
      } catch {
        return PKPaymentAuthorizationResult(status: .failure, errors: [error])
      }
    }
)
var configuration = PaymentSheet.Configuration()
configuration.applePay = .init(merchantId: "merchant.com.your_app_name",
                               merchantCountryCode: "US",
                               customHandlers: customHandlers)
```

## Aktifkan pemindaian kartu

Untuk mengaktifkan dukungan pemindaian kartu untuk iOS, atur `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) di dalam `Info.plist` aplikasi Anda, dan berikan alasan untuk mengakses kamera (misalnya, “Untuk memindai kartu”).

## Optional: Aktifkan pembayaran ACH

Untuk mengaktifkan pembayaran debit ACH, sertakan `StripeFinancialConnections` sebagai dependensi bagi aplikasi Anda.

[Stripe iOS SDK](https://github.com/stripe/stripe-ios) adalah sumber terbuka, yang [didokumentasikan lengkap](https://stripe.dev/stripe-ios/index.html), dan kompatibel dengan aplikasi yang mendukung iOS 13 ke atas.

#### Swift Package Manager

Untuk menginstal SDK, ikuti langkah-langkah ini:

1. Di Xcode, pilih **File** > **Tambahkan Dependensi Paket…** dan masukkan `https://github.com/stripe/stripe-ios-spm` sebagai URL repositori.
1. Pilih nomor versi terbaru dari [halaman rilis](https://github.com/stripe/stripe-ios/releases) kami.
1. Tambahkan produk **StripeFinancialConnections** ke [target aplikasi Anda](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Jika Anda belum melakukannya, instal versi terbaru [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Jika Anda tidak memiliki [Podfile](https://guides.cocoapods.org/syntax/podfile.html), jalankan perintah berikut untuk membuatnya:
   ```bash
   pod init
   ```
1. Tambahkan baris ini ke `Podfile` Anda:
   ```podfile
   pod 'StripeFinancialConnections'
   ```
1. Jalankan perintah berikut:
   ```bash
   pod install
   ```
1. Jangan lupa menggunakan file `.xcworkspace` untuk membuka proyek Anda di Xcode, sebagai ganti file `.xcodeproj`, mulai sekarang.
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK, jalankan:
   ```bash
   pod update StripeFinancialConnections
   ```

#### Carthage

1. Jika Anda belum melakukannya, instal versi terbaru [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Tambahkan baris ini ke `Cartfile` Anda:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Ikuti [instruksi instalasi Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Pastikan untuk menyematkan semua framework yang diwajibkan yang tercantum [di sini](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking).
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK, jalankan perintah berikut:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Kerangka Kerja Manual

1. Masuklah ke [halaman rilis GitHub](https://github.com/stripe/stripe-ios/releases/latest) kami lalu unduh dan unzip **Stripe.xcframework.zip**.
1. Seret **StripeFinancialConnections.xcframework** ke bagian **Embedded Binaries** pengaturan **General** di proyek Xcode Anda. Pastikan memilih **Copy items if needed**.
1. Ulangi langkah 2 untuk semua framework yang diwajibkan yang tercantum [di sini](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking).
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK kami, ulangi langkah 1–3.

> Untuk detail mengenai rilis SDK terbaru dan versi sebelumnya, lihat halaman [Rilis](https://github.com/stripe/stripe-ios/releases) di GitHub. Untuk menerima notifikasi bila rilis baru diterbitkan, [lihat rilis](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) untuk repositori.

## Optional: Sesuaikan lembaran

Semua penyesuaian dikonfigurasi melalui objek [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

### Penampilan

Sesuaikan warna, font, dan sebagainya agar sesuai dengan tampilan dan nuansa aplikasi Anda dengan menggunakan [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios).

### Tata letak metode pembayaran

Konfigurasikan tata letak metode pembayaran di lembaran menggunakan [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Anda dapat menampilkannya secara horizontal, vertikal, atau membiarkan Stripe mengoptimalkan tata letak secara otomatis.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png)

#### Swift

```swift
var configuration = PaymentSheet.Configuration()
configuration.paymentMethodLayout = .automatic
```

### Kumpulkan alamat pengguna

Kumpulkan alamat tagihan atau pengiriman lokal dan internasional dari pelanggan Anda menggunakan [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios).

### Nama tampilan merchant

Tentukan nama bisnis yang dilihat pelanggan dengan mengatur [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp). Secara default, ini adalah nama aplikasi Anda.

#### Swift

```swift
var configuration = PaymentSheet.Configuration()
configuration.merchantDisplayName = "My app, Inc."
```

### Mode gelap

`PaymentSheet` secara otomatis beradaptasi dengan pengaturan penampilan skala-sistem pengguna (mode terang dan gelap). Jika aplikasi tidak mendukung mode gelap, Anda dapat mengatur [gaya](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) ke mode `alwaysLight` atau `alwaysDark`.

```swift
var configuration = PaymentSheet.Configuration()
configuration.style = .alwaysLight
```

## Optional: Tangani keluar pengguna

`Lembar Pembayaran` menyimpan beberapa informasi secara lokal untuk mengingat apakah pengguna telah menggunakan Link dalam aplikasi. Untuk menghapus status internal `Lembar Pembayaran`, panggil `Lembar Pembayaran.resetPelanggan()` saat pengguna keluar.

```swift
import UIKit
import StripePaymentSheet

class MyViewController: UIViewController {

  @objc
  func didTapLogoutButton() {
    PaymentSheet.resetCustomer()
    // Other logout logic required by your app
  }

}
```

## Optional: Selesaikan pembayaran di UI Anda

Anda dapat menyajikan Lembar Pembayaran untuk hanya mengumpulkan detail metode pembayaran, kemudian memanggil metode `confirm` untuk menyelesaikan pembayaran di UI aplikasi Anda. Hal ini akan berguna jika Anda memiliki tombol beli custom atau memerlukan langkah tambahan setelah mengumpulkan detail pembayaran.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png)

Selesaikan pembayaran di UI aplikasi Anda

#### UIKit

Langkah-langkah berikut memandu Anda menyelesaikan pembayaran di UI aplikasi. Lihat sampel integrasi kami di [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift).

1. Pertama, lakukan inisialisasi [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller), bukan `PaymentSheet`, serta perbarui UI Anda dengan properti `paymentOption`. Properti ini berisi gambar dan label yang menunjukkan metode pembayaran default yang dipilih pertama kali oleh pelanggan.

```swift
PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in
  switch result {
  case .failure(let error):
    print(error)
  case .success(let paymentSheetFlowController):
    self?.paymentSheetFlowController = paymentSheetFlowController
    // Update your UI using paymentSheetFlowController.paymentOption
  }
}
```

1. Berikutnya, panggil `presentPaymentOptions` untuk mengumpulkan detail pembayaran. Setelah selesai, perbarui UI Anda lagi dengan properti `paymentOption`.

```swift
paymentSheetFlowController.presentPaymentOptions(from: self) {
  // Update your UI using paymentSheetFlowController.paymentOption
}
```

1. Terakhir, panggil `confirm`.

```swift
paymentSheetFlowController.confirm(from: self) { paymentResult in
  // MARK: Handle the payment result
  switch paymentResult {
  case .completed:
    print("Payment complete!")
  case .canceled:
    print("Canceled!")
  case .failed(let error):
    print(error)
  }
}
```

#### SwiftUI

Langkah-langkah berikut memandu Anda menyelesaikan pembayaran di UI aplikasi. Lihat sampel integrasi kami di [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift).

1. Pertama, lakukan inisialisasi [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller), bukan `PaymentSheet`. Propertinya `paymentOption` berisi gambar dan label yang menunjukkan metode pembayaran pilihan pelanggan saat ini, yang dapat Anda gunakan di UI.

```swift
PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in
  switch result {
  case .failure(let error):
    print(error)
  case .success(let paymentSheetFlowController):
    self?.paymentSheetFlowController = paymentSheetFlowController
    // Use the paymentSheetFlowController.paymentOption properties in your UI
    myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method"
    myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")!
  }
}
```

1. Gunakan [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) untuk membungkus tombol yang menyajikan lembaran guna mengumpulkan detail pembayaran. Saat `PaymentSheet.FlowController` memanggil argumen `onSheetDismissed`, `paymentOption` untuk instance `PaymentSheet.FlowController` mencerminkan metode pembayaran yang saat ini dipilih.

```swift
PaymentSheet.FlowController.PaymentOptionsButton(
  paymentSheetFlowController: paymentSheetFlowController,
  onSheetDismissed: {
    myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method"
    myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")!
  },
  content: {
    /* An example button */
    HStack {
      Text(myPaymentMethodLabel)
      Image(uiImage: myPaymentMethodImage)
    }
  }
)
```

1. Gunakan [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) untuk membungkus tombol yang mengonfirmasi pembayaran.

```swift
PaymentSheet.FlowController.ConfirmButton(
  paymentSheetFlowController: paymentSheetFlowController,
  onCompletion: { result in
    // MARK: Handle the payment result
    switch result {
    case .completed:
      print("Payment complete!")
    case .canceled:
      print("Canceled!")
    case .failed(let error):
      print(error)
    }
  },
  content: {
    /* An example button */
    Text("Pay")
  }
)
```

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

## Optional: Aktifkan pengumpulan kembali CVC pada konfirmasi

Instruksi berikut untuk mengumpulkan kembali CVC kartu tersimpan selama konfirmasi PaymentIntent beranggapan bahwa integrasi Anda mencakup hal berikut:

- Pembuatan PaymentIntents sebelum mengumpulkan detail pembayaran

### Perbarui parameter pembuatan maksud

Untuk mengumpulkan kembali CVC ketika mengonfirmasikan pembayaran, sertakan `require_cvc_recollection` selama pembuatan PaymentIntent.

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create an Ephemeral Key for the Account
curl https://api.stripe.com/v1/ephemeral_keys \
  -u <<YOUR_SECRET_KEY>>: \
  -H "Stripe-Version: 2026-03-25.dahlia" \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u <<YOUR_SECRET_KEY>>: \
  -H "Stripe-Version: 2026-03-25.dahlia" \
  -H "Stripe-Account: 2026-03-25.dahlia" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \

  -d "automatic_payment_methods[enabled]"=true \
```


# Integrasi dalam aplikasi untuk Android

> This is a Integrasi dalam aplikasi untuk Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=android.
![](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png)

Integrasikan UI pembayaran siap-rakit Stripe ke dalam checkout aplikasi Android Anda dengan kelas [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html).

## Siapkan Stripe [Sisi server] [Sisi client]

Pertama, Anda membutuhkan akun Stripe. [Daftar sekarang](https://dashboard.stripe.com/register).

### Sisi server

Integrasi ini memerlukan endpoint di server Anda yang berinteraksi dengan Stripe API. Gunakan pustaka resmi untuk akses ke Stripe API dari server Anda:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### Sisi client

[Stripe Android SDK](https://github.com/stripe/stripe-android) adalah sumber terbuka dan [didokumentasikan lengkap](https://stripe.dev/stripe-android/).

Untuk menginstal SDK, tambahkan `stripe-android``ke blok`dependencies` file [app/build.gradle](https://developer.android.com/studio/build/dependencies) Anda:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.3.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.3.0")
}
```

> Untuk detail mengenai rilis SDK terbaru dan versi sebelumnya, lihat halaman [Rilis](https://github.com/stripe/stripe-android/releases) di GitHub. Untuk menerima notifikasi bila rilis baru diterbitkan, [lihat rilis untuk repositori](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

## Aktifkan metode pembayaran

Lihat [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods).

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu menjangkau lebih banyak pelanggan, tetapi sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat [Dukungan metode pembayaran](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) untuk dukungan produk dan metode pembayaran, dan [halaman skema biaya](https://stripe.com/pricing/local-payment-methods) kami untuk mengetahui biayanya.

## Tambahkan endpoint [Sisi server]

> #### Catatan
> 
> Untuk menampilkan PaymentSheet sebelum membuat PaymentIntent, lihat [Kumpulkan detail pembayaran sebelum membuat Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Integrasi ini menggunakan tiga objek API Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.

1. (Opsional) Objek [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) atau [Pelanggan](https://docs.stripe.com/api/customers.md): Untuk menyiapkan metode pembayaran untuk pembayaran mendatang, Anda harus melampirkannya ke pelanggan. Buat objek yang mewakili pelanggan Anda saat mereka membuat akun di bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek `Akun` atau `Pelanggan` sebelum pembayaran dan menghubungkannya dengan representasi internal akun pelanggan Anda nanti.

1. (Opsional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informasi pada objek yang mewakili pelanggan Anda bersifat sensitif dan tidak dapat diambil langsung dari aplikasi. `CustomerSession` memberikan SDK akses berlingkup sementara ke `Akun` atau `Pelanggan` dan menyediakan opsi konfigurasi tambahan. Lihat daftar lengkap [opsi konfigurasi](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Jika Anda tidak pernah menyimpan kartu untuk pelanggan dan tidak mengizinkan pelanggan lama menggunakan kembali kartu yang disimpan, Anda dapat meniadakan objek `Akun` atau `Pelanggan` dan objek `CustomerSession` dari integrasi Anda.

Karena alasan keamanan, aplikasi Anda tidak dapat membuat objek ini. Sebagai gantinya, tambahkan endpoint di server Anda yang:

1. Mengambil `Akun` atau `Pelanggan`, atau membuat yang baru.
1. Membuat [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) untuk `Akun` atau `Pelanggan`.
1. Membuat `PaymentIntent` dengan [jumlah](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [mata uang](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), serta [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) atau [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer).
1. Mengembalikan *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) dari `PaymentIntent`, `client_secret` dari `CustomerSession`, ID dari `Akun` atau `Pelanggan`, dan [publishable key](https://dashboard.stripe.com/apikeys) Anda ke aplikasi.

Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan dalam PaymentIntent. Anda dapat mengizinkan Stripe menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual. Terlepas dari opsi yang Anda pilih, ketahui mata uang yang diteruskan di PaymentIntent memfilter metode pembayaran yang ditampilkan kepada pelanggan. Misalnya, jika Anda meneruskan `eur` pada PaymentIntent dan mengaktifkan OXXO di Dashboard, OXXO tidak akan ditampilkan kepada pelanggan karena OXXO tidak mendukung pembayaran `eur`.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, pembatasan metode pembayaran, dan parameter lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran yang meningkatkan konversi serta yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan.

#### Kelola metode pembayaran dari Dashboard

Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor seperti jumlah transaksi, mata uang, dan alur pembayaran. PaymentIntent dibuat menggunakan metode pembayaran yang Anda konfigurasikan di Dashboard. Jika tidak ingin menggunakan Dashboard atau jika ingin menentukan metode pembayaran secara manual, Anda dapat mencantumkannya menggunakan atribut `payment_method_types`.

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create a CustomerSession for the Account
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Cantumkan metode pembayaran secara manual

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create a CustomerSession for the Account
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

> Setiap metode pembayaran perlu mendukung mata uang yang diteruskan di PaymentIntent dan bisnis Anda perlu berlokasi di salah satu negara yang didukung oleh setiap metode pembayaran. Lihat halaman [Opsi integrasi metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md) untuk detail selengkapnya tentang apa yang didukung.

## Kumpulkan detail pembayaran [Sisi client]

Sebelum menampilkan Payment Element seluler, halaman checkout Anda harus:

- Tampilkan produk yang sedang dibeli dan jumlah totalnya
- Kumpulkan informasi pengiriman yang diperlukan menggunakan [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android)
- Sertakan tombol checkout untuk menyajikan UI Stripe

#### Jetpack Compose

[Inisialisasi](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) instance `PaymentSheet` di dalam `onCreate` Aktivitas checkout Anda, yang meneruskan metode untuk menangani hasil.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.PaymentSheetResult

@Composable
fun App() {
  val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()
}

private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
  // implemented in the next steps
}
```

Selanjutnya, ambil PaymentIntent Client Secret, Client Secret Sesi Pelanggan, ID Pelanggan, dan kunci yang dapat diterbitkan dari titik akhir yang Anda buat di langkah sebelumnya. Atur kunci yang dapat dipublikasikan menggunakan `PaymentConfiguration` dan simpan yang lain untuk digunakan saat Anda menunjukkan PaymentSheet.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalContext
import com.stripe.android.PaymentConfiguration
import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.PaymentSheetResult

@Composable
fun App() {
  val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current
  var customerConfig by remember { mutableStateOf<PaymentSheet.CustomerConfiguration?>(null) }
  varpaymentIntentClientSecret by remember { mutableStateOf<String?>(null) }

  LaunchedEffect(context) {
    // Make a request to your own server and retrieve payment configurations
    val networkResult = ...
    if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent
        customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession(
          id = networkResult.customer,
          clientSecret = networkResult.customerSessionClientSecret
        )PaymentConfiguration.init(context, networkResult.publishableKey)}
  }
}

private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
  // implemented in the next steps
}
```

Bila pelanggan mengetuk tombol checkout Anda, panggil [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) untuk menyajikan lembar pembayaran. Setelah pelanggan menyelesaikan pembayaran, lembaran akan menutup dan [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) dipanggil dengan [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html).

```kotlin
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalContext
import com.stripe.android.PaymentConfiguration
import com.stripe.android.paymentsheet.PaymentSheet
import com.stripe.android.paymentsheet.PaymentSheetResult

@Composable
fun App() {
  val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()
  val context = LocalContext.current
  var customerConfig by remember { mutableStateOf<PaymentSheet.CustomerConfiguration?>(null) }
  var paymentIntentClientSecret by remember { mutableStateOf<String?>(null) }

  LaunchedEffect(context) {
    // Make a request to your own server and retrieve payment configurations
    val networkResult = ...
    if (networkResult.isSuccess) {
        paymentIntentClientSecret = networkResult.paymentIntent
        customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession(
          id = networkResult.customer,
          clientSecret = networkResult.customerSessionClientSecret
        )
        PaymentConfiguration.init(context, networkResult.publishableKey)
    }
  }Button(
    onClick = {
      val currentConfig = customerConfig
      val currentClientSecret =paymentIntentClientSecret

      if (currentConfig != null && currentClientSecret != null) {
        presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret)
      }
    }
  ) {
    Text("Checkout")
  }
}private fun presentPaymentSheet(
  paymentSheet: PaymentSheet,
  customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String
) {
  paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret,
    PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name")
      .customer(customerConfig)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      .allowsDelayedPaymentMethods(true)
      .build()
  )
}
private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) {
    is PaymentSheetResult.Canceled -> {
      print("Canceled")
    }
    is PaymentSheetResult.Failed -> {
      print("Error: ${paymentSheetResult.error}")
    }
    is PaymentSheetResult.Completed -> {
      // Display for example, an order confirmation screen
      print("Completed")
    }
  }
}
```

#### Tampilan (Klasik)

[Inisialisasikan](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) instance `PaymentSheet` di dalam `onCreate` Aktivitas checkout Anda, yang meneruskan metode untuk menangani hasil.

#### Kotlin

```kotlin
import com.stripe.android.paymentsheet.PaymentSheet

class CheckoutActivity : AppCompatActivity() {
  lateinit var paymentSheet: PaymentSheet

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)
  }

  fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
    // implemented in the next steps
  }
}
```

Selanjutnya, ambil PaymentIntent Client Secret, Client Secret Sesi Pelanggan, ID Pelanggan, dan kunci yang dapat diterbitkan dari titik akhir yang Anda buat di langkah sebelumnya. Atur kunci yang dapat dipublikasikan menggunakan `PaymentConfiguration` dan simpan yang lain untuk digunakan saat Anda menunjukkan PaymentSheet.

#### Kotlin

```kotlin
import com.stripe.android.paymentsheet.PaymentSheet

class CheckoutActivity : AppCompatActivity() {
  lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration
  lateinit varpaymentIntentClientSecret: String

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch {
      // Make a request to your own server and retrieve payment configurations
      val networkResult = MyBackend.getPaymentConfig()
      if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent
        customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession(
          id = networkResult.customer,
          clientSecret = networkResult.customerSessionClientSecret
        )PaymentConfiguration.init(context, networkResult.publishableKey)}
    }
  }

  fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {
    // implemented in the next steps
  }
}
```

Bila pelanggan mengetuk tombol checkout Anda, panggil [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) untuk menyajikan lembar pembayaran. Setelah pelanggan menyelesaikan pembayaran, lembaran akan menutup dan [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) dipanggil dengan [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html).

#### Kotlin

```kotlin
// ...
class CheckoutActivity : AppCompatActivity() {
  lateinit var paymentSheet: PaymentSheet
  lateinit var customerConfig: PaymentSheet.CustomerConfiguration
  lateinit var paymentIntentClientSecret: String
  // ...fun presentPaymentSheet() {
    paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret,
      PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name")
        .customer(customerConfig)
        // Set `allowsDelayedPaymentMethods` to true if your business handles
        // delayed notification payment methods like US bank accounts.
        .allowsDelayedPaymentMethods(true)
        .build()
    )
  }

  fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) {
      is PaymentSheetResult.Canceled -> {
        print("Canceled")
      }
      is PaymentSheetResult.Failed -> {
        print("Error: ${paymentSheetResult.error}")
      }
      is PaymentSheetResult.Completed -> {
        // Display for example, an order confirmation screen
        print("Completed")
      }
    }
  }
}
```

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

## Tangani kejadian pascapembayaran [Sisi server]

Stripe mengirim kejadian [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ketika selesai pembayaran. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Selain menangani kejadian `payment_intent.succeeded`, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

| Kejadian                                                                                                                        | Keterangan                                                                                                                                                                                                                                                                                 | Tindakan                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Dikirim bila pelanggan berhasil menyelesaikan pembayaran.                                                                                                                                                                                                                                  | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka.     |
| [payment_intent. pemrosesan](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)        | Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian `payment_intent.succeeded` atau `payment_intent.payment_failed` di masa mendatang. | Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal.                                                                                                                                                                                                          | Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.                                                                |

## Coba integrasi

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Pengarahan ulang bank

| Metode pembayaran | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                           |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Bancontact, iDEAL | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang. |
| Pay by Bank       | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                   |
| Pay by Bank       | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                     |
| BLIK              | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                             |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Aktifkan Link

Aktifkan Link di [Setelan Metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) untuk memungkinkan pelanggan Anda menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman menggunakan tombol checkout ekspres satu klik Link.

### Teruskan email pelanggan Anda ke Mobile Payment Element

Link mengautentikasi pelanggan menggunakan alamat email mereka. Stripe merekomendasikan untuk mengisi informasi sebanyak mungkin untuk merampingkan proses checkout.

Untuk mengisikan otomatis nama pelanggan, alamat email, dan nomor telepon, berikan `defaultBillingDetails` dengan informasi pelanggan Anda ketika menginisialisasi `PaymentSheet.Configuration`.

#### Kotlin

```kotlin
val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Example, Inc.")
  .defaultBillingDetails(
    PaymentSheet.BillingDetails(
        name = "Jenny Rosen",
        email = "jenny.rosen@example.com",
        phone = "888-888-8888"
    )
  )
  .build()
```

## Optional: Aktifkan Google Pay

### Siapkan integrasi Anda

Untuk menggunakan Google Pay, pertama aktifkan Google Pay API dengan menambahkan yang berikut ini ke tag `<application>` **AndroidManifest.xml** Anda:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Untuk detail selengkapnya, lihat [Siapkan Google Pay API](https://developers.google.com/pay/api/android/guides/setup) untuk Android dari Google Pay.

### Tambahkan Google Pay

Untuk menambahkan Google Pay ke integrasi Anda, teruskan [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) bersama lingkungan Google Pay Anda (produksi atau percobaan) dan [kode negara bisnis Anda](https://dashboard.stripe.com/settings/account) saat memprakarsai [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html).

#### Kotlin

```kotlin
val googlePayConfiguration = PaymentSheet.GooglePayConfiguration(
  environment = PaymentSheet.GooglePayConfiguration.Environment.Test,
  countryCode = "US",
  currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents
)
val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name")
  .googlePay(googlePayConfiguration)
  .build()
```

### Google Pay percobaan

Google mengizinkan Anda melakukan pembayaran melalui [Rangkaian kartu percobaan](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). Rangkaian kartu percobaan ini mendukung penggunaan [kartu percobaan](https://docs.stripe.com/testing.md) Stripe.

Anda harus menguji Google Pay menggunakan perangkat Android fisik, bukan perangkat simulasi, di negara yang mendukung Google Pay. Masuk ke Akun Google pada perangkat percobaan Anda dengan kartu asli yang disimpan di Google Wallet.

## Optional: Aktifkan pemindaian kartu

Untuk mengaktifkan dukungan pemindaian kartu, [minta akses produksi](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) ke Google Pay API dari [Google Pay dan Wallet Console](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite).

- Jika Anda sudah mengaktifkan Google Pay, fitur pemindaian kartu tersedia secara otomatis di UI kami pada perangkat yang memenuhi syarat. Untuk mempelajari lebih lanjut mengenai perangkat yang memenuhi syarat, baca [Google Pay API](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition)
- **Penting:** Fitur pemindaian kartu hanya muncul di versi yang ditandatangani dengan kunci penandatanganan yang sama yang terdaftar di [Google Pay & Wallet Console](https://pay.google.com/business/console). Pembuatan percobaan atau debug menggunakan kunci penandatanganan yang berbeda (misalnya, pembuatan yang didistribusikan melalui Firebase App Tester) tidak akan menampilkan opsi **Pindai kartu**. Untuk mencoba pemindaian kartu di versi pra-rilis, Anda harus:
  - Menandatangani build pengujian Anda dengan kunci penandatanganan produksi Anda
  - Menambahkan sidik jari kunci penandatanganan pengujian Anda ke Google Pay dan Wallet Console

## Optional: Aktifkan pembayaran ACH

Untuk mengaktifkan pembayaran debit ACH, sertakan Financial Connections sebagai dependensi bagi aplikasi Anda.

[Stripe Android SDK](https://github.com/stripe/stripe-android) adalah sumber terbuka dan [didokumentasikan lengkap](https://stripe.dev/stripe-android/).

Untuk menginstal SDK, tambahkan `financial-connections``ke blok`dependencies` file [app/build.gradle](https://developer.android.com/studio/build/dependencies) Anda:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Financial Connections Android SDK
  implementation("com.stripe:financial-connections:23.3.0")
}
```

> Untuk detail mengenai rilis SDK terbaru dan versi sebelumnya, lihat halaman [Rilis](https://github.com/stripe/stripe-android/releases) di GitHub. Untuk menerima notifikasi bila rilis baru diterbitkan, [lihat rilis untuk repositori](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

## Optional: Sesuaikan lembaran

Semua penyesuaian dikonfigurasi menggunakan objek [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html).

### Penampilan

Sesuaikan warna, font, dan lainnya agar sesuai dengan tampilan dan nuansa aplikasi Anda dengan menggunakan [API penampilan](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android).

### Tata letak metode pembayaran

Konfigurasikan tata letak metode pembayaran di lembaran menggunakan [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Anda dapat menampilkannya secara horizontal, vertikal, atau membiarkan Stripe mengoptimalkan tata letak secara otomatis.
![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png)

#### Kotlin

```kotlin
PaymentSheet.Configuration.Builder("Example, Inc.")
  .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic)
  .build()
```

### Kumpulkan alamat pengguna

Kumpulkan alamat tagihan atau pengiriman lokal dan internasional dari pelanggan Anda menggunakan [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android).

### Nama tampilan bisnis

Tentukan nama bisnis yang dilihat pelanggan dengan mengatur [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). Secara default, ini adalah nama aplikasi Anda.

#### Kotlin

```kotlin
PaymentSheet.Configuration.Builder(
  merchantDisplayName = "My app, Inc."
).build()
```

### Mode gelap

Secara default `PaymentSheet` beradaptasi otomatis dengan pengaturan penampilan skala-sistem pengguna (mode terang dan gelap). Anda dapat mengubahnya dengan mengatur mode terang atau gelap di aplikasi Anda:

#### Kotlin

```kotlin
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

## Optional: Tangani keluar pengguna

`Lembar Pembayaran` menyimpan beberapa informasi secara lokal untuk mengingat apakah pengguna telah menggunakan Link dalam aplikasi. Untuk menghapus status internal `Lembar Pembayaran`, panggil `Lembar Pembayaran.resetPelanggan()` saat pengguna keluar.

#### Kotlin

```kotlin
class MyActivity: Activity {

  fun onLogoutButtonClicked() {
    PaymentSheet.resetCustomer(this)
    // Other logout logic required by your app
  }
}
```

## Optional: Selesaikan pembayaran di UI Anda

Anda dapat menyajikan Lembar Pembayaran untuk hanya mengumpulkan detail metode pembayaran dan menyelesaikan pembayaran kembali di UI aplikasi Anda. Hal ini akan berguna jika Anda memiliki tombol beli custom atau memerlukan langkah tambahan setelah detail pembayaran dikumpulkan.
![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png)

> Contoh integrasi [tersedia di GitHub kami](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt).

1. Pertama, inisialisasikan [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) alih-alih `PaymentSheet` menggunakan salah satu metode [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html).

#### Android (Kotlin)

```kotlin
class CheckoutActivity : AppCompatActivity() {
  private lateinit var flowController: PaymentSheet.FlowController

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val flowController = PaymentSheet.FlowController.Builder(
      resultCallback = ::onPaymentSheetResult,
      paymentOptionResultCallback = ::onPaymentOption,
    ).build(this)
  }
}
```

1. Berikutnya, panggil `configureWithPaymentIntent` dengan kunci objek Stripe yang diambil dari backend Anda dan perbarui UI di callback menggunakan [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Ini berisi gambar dan label yang mewakili metode pembayaran yang saat ini dipilih pelanggan.

#### Android (Kotlin)

```kotlin
flowController.configureWithPaymentIntent(
  paymentIntentClientSecret = paymentIntentClientSecret,
  configuration = PaymentSheet.Configuration.Builder("Example, Inc.")
    .customer(PaymentSheet.CustomerConfiguration(
      id = customerId,
      ephemeralKeySecret = ephemeralKeySecret
    ))
    .build()
) { isReady, error ->
  if (isReady) {
    // Update your UI using `flowController.getPaymentOption()`
  } else {
    // handle FlowController configuration failure
  }
}
```

1. Berikutnya, panggil [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) untuk mengumpulkan detail pembayaran. Saat pelanggan selesai, lembaran akan menutup dan memanggil [paymentOptionCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) yang diteruskan sebelumnya di `create`. Implementasikan metode ini untuk memperbarui UI Anda dengan `paymentOption` yang dikembalikan.

#### Android (Kotlin)

```kotlin
// ...
  flowController.presentPaymentOptions()
// ...
  private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) {
    val paymentOption = paymentOptionResult.paymentOption
    if (paymentOption != null) {
      paymentMethodButton.text = paymentOption.label
      paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds(
        paymentOption.drawableResourceId,
        0,
        0,
        0
      )
    } else {
      paymentMethodButton.text = "Select"
      paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds(
        null,
        null,
        null,
        null
      )
    }
  }
```

1. Terakhir, panggil [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) untuk menyelesaikan pembayaran. Saat pelanggan selesai, lembaran akan menutup dan memanggil [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) yang diteruskan sebelumnya di `create`.

#### Android (Kotlin)

```kotlin
  // ...
    flowController.confirmPayment()
  // ...

  private fun onPaymentSheetResult(
    paymentSheetResult: PaymentSheetResult
  ) {
    when (paymentSheetResult) {
      is PaymentSheetResult.Canceled -> {
        // Payment canceled
      }
      is PaymentSheetResult.Failed -> {
        // Payment Failed. See logcat for details or inspect paymentSheetResult.error
      }
      is PaymentSheetResult.Completed -> {
        // Payment Complete
      }
    }
  }
```

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

## Optional: Aktifkan pengumpulan kembali CVC pada konfirmasi

Instruksi berikut untuk mengumpulkan kembali CVC kartu tersimpan selama konfirmasi PaymentIntent beranggapan bahwa integrasi Anda mencakup hal berikut:

- Pembuatan PaymentIntents sebelum mengumpulkan detail pembayaran

### Perbarui parameter pembuatan maksud

Untuk mengumpulkan kembali CVC ketika mengonfirmasikan pembayaran, sertakan `require_cvc_recollection` selama pembuatan PaymentIntent.

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create an Ephemeral Key for the Account
curl https://api.stripe.com/v1/ephemeral_keys \
  -u <<YOUR_SECRET_KEY>>: \
  -H "Stripe-Version: 2026-03-25.dahlia" \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u <<YOUR_SECRET_KEY>>: \
  -H "Stripe-Version: 2026-03-25.dahlia" \
  -H "Stripe-Account: 2026-03-25.dahlia" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \

  -d "automatic_payment_methods[enabled]"=true \
```


# Integrasi dalam aplikasi untuk React Native

> This is a Integrasi dalam aplikasi untuk React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=react-native.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png)

Integrasi ini menggabungkan semua langkah yang diperlukan untuk membayar, termasuk mengumpulkan detail pembayaran dan mengonfirmasi pembayaran, ke dalam satu lembar yang ditampilkan di atas aplikasi Anda.

## Siapkan Stripe [Sisi server] [Sisi client]

Pertama, Anda membutuhkan akun Stripe. [Daftar sekarang](https://dashboard.stripe.com/register).

### Sisi server

Integrasi ini memerlukan endpoint di server Anda yang berinteraksi dengan Stripe API. Gunakan pustaka resmi untuk akses ke Stripe API dari server Anda:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

### Sisi client

[React Native SDK](https://github.com/stripe/stripe-react-native) adalah sumber terbuka dan didokumentasikan lengkap. Secara internal, SDK [iOS asli](https://github.com/stripe/stripe-ios) dan SDK [Android](https://github.com/stripe/stripe-android) digunakan. Untuk menginstal React Native SDK Stripe, jalankan salah satu perintah berikut di direktori proyek (bergantung pada manajer paket yang Anda gunakan):

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

Selanjutnya, instal beberapa dependensi lain yang diperlukan:

- Untuk iOS, buka direktori **ios** dan jalankan `pod install` untuk memastikan bahwa Anda juga menginstal dependensi asli yang diperlukan.
- Untuk Android, tidak ada lagi ketergantungan yang harus diinstal.

> Sebaiknya ikuti [panduan TypeScript resmi](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) untuk menambahkan dukungan TypeScript.

### Inisialisasi Stripe

Untuk menginisialisasi Stripe di aplikasi React Native, bungkus layar pembayaran dengan komponen `StripeProvider`, atau gunakan metode inisialisasi `initStripe`. Hanya [kunci yang dapat dipublikasikan](https://docs.stripe.com/keys.md#obtain-api-keys) API di `publishableKey` yang diperlukan. Contoh berikut menunjukkan cara menginisialisasi Stripe menggunakan komponen `StripeProvider`.

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> Gunakan [kunci percobaan](https://docs.stripe.com/keys.md#obtain-api-keys) API Anda saat mencoba serta mengembangkan, dan kunci [mode live](https://docs.stripe.com/keys.md#test-live-modes) bila Anda memublikasikan aplikasi.

## Aktifkan metode pembayaran

Lihat [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods).

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu menjangkau lebih banyak pelanggan, tetapi sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat [Dukungan metode pembayaran](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) untuk dukungan produk dan metode pembayaran, dan [halaman skema biaya](https://stripe.com/pricing/local-payment-methods) kami untuk mengetahui biayanya.

## Tambahkan endpoint [Sisi server]

> #### Catatan
> 
> Untuk menampilkan PaymentSheet sebelum membuat PaymentIntent, lihat [Kumpulkan detail pembayaran sebelum membuat Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Integrasi ini menggunakan tiga objek API Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.

1. (Opsional) Objek [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) atau [Pelanggan](https://docs.stripe.com/api/customers.md): Untuk menyiapkan metode pembayaran untuk pembayaran mendatang, Anda harus melampirkannya ke pelanggan. Buat objek yang mewakili pelanggan Anda saat mereka membuat akun di bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek `Akun` atau `Pelanggan` sebelum pembayaran dan menghubungkannya dengan representasi internal akun pelanggan Anda nanti.

1. (Opsional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informasi pada objek yang mewakili pelanggan Anda bersifat sensitif dan tidak dapat diambil langsung dari aplikasi. `CustomerSession` memberikan SDK akses berlingkup sementara ke `Akun` atau `Pelanggan` dan menyediakan opsi konfigurasi tambahan. Lihat daftar lengkap [opsi konfigurasi](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Jika Anda tidak pernah menyimpan kartu untuk pelanggan dan tidak mengizinkan pelanggan lama menggunakan kembali kartu yang disimpan, Anda dapat meniadakan objek `Akun` atau `Pelanggan` dan objek `CustomerSession` dari integrasi Anda.

Karena alasan keamanan, aplikasi Anda tidak dapat membuat objek ini. Sebagai gantinya, tambahkan endpoint di server Anda yang:

1. Mengambil `Akun` atau `Pelanggan`, atau membuat yang baru.
1. Membuat [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) untuk `Akun` atau `Pelanggan`.
1. Membuat `PaymentIntent` dengan [jumlah](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [mata uang](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), serta [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) atau [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer).
1. Mengembalikan *client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) dari `PaymentIntent`, `client_secret` dari `CustomerSession`, ID dari `Akun` atau `Pelanggan`, dan [publishable key](https://dashboard.stripe.com/apikeys) Anda ke aplikasi.

Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan dalam PaymentIntent. Anda dapat mengizinkan Stripe menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual. Terlepas dari opsi yang Anda pilih, ketahui mata uang yang diteruskan di PaymentIntent memfilter metode pembayaran yang ditampilkan kepada pelanggan. Misalnya, jika Anda meneruskan `eur` pada PaymentIntent dan mengaktifkan OXXO di Dashboard, OXXO tidak akan ditampilkan kepada pelanggan karena OXXO tidak mendukung pembayaran `eur`.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, pembatasan metode pembayaran, dan parameter lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran yang meningkatkan konversi serta yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan.

#### Kelola metode pembayaran dari Dashboard

Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor seperti jumlah transaksi, mata uang, dan alur pembayaran. PaymentIntent dibuat menggunakan metode pembayaran yang Anda konfigurasikan di Dashboard. Jika tidak ingin menggunakan Dashboard atau jika ingin menentukan metode pembayaran secara manual, Anda dapat mencantumkannya menggunakan atribut `payment_method_types`.

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create a CustomerSession for the Account
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Cantumkan metode pembayaran secara manual

#### Akun v2

#### curl

```bash
# Create an Account with the customer configuration (use an existing Account ID if this is a returning customer)
curl https://api.stripe.com/v2/core/accounts \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "configuration[customer]"

# Create a CustomerSession for the Account
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

#### Pelanggan v1

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

> Setiap metode pembayaran perlu mendukung mata uang yang diteruskan di PaymentIntent dan bisnis Anda perlu berlokasi di salah satu negara yang didukung oleh setiap metode pembayaran. Lihat halaman [Opsi integrasi metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md) untuk detail selengkapnya tentang apa yang didukung.

## Kumpulkan detail pembayaran [Sisi client]

Sebelum menampilkan Payment Element seluler, halaman checkout Anda harus:

- Tampilkan produk yang sedang dibeli dan jumlah totalnya
- Kumpulkan setiap informasi pengiriman yang diperlukan
- Sertakan tombol checkout untuk menyajikan UI Stripe

Dalam checkout aplikasi Anda, buat permintaan jaringan ke endpoint backend yang Anda buat di langkah sebelumnya dan panggil `initPaymentSheet` dari hook `useStripe`.

#### Akun v2

```javascript
export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer_account } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer_account,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer_account,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerAccountId: customer_account,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business accepts payment
      // methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

#### Pelanggan v1

```javascript

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Ketika pelanggan mengetuk tombol **Checkout**, panggil `presentPaymentSheet()` untuk membuka lembaran. Setelah pelanggan menyelesaikan pembayaran ini, lembaran akan ditutup dan janji akan diselesaikan dengan `StripeError<PaymentSheetError>` opsional.

```javascript
export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Jika tidak ada kesalahan, informasikan pengguna bahwa mereka selesai (misalnya, dengan menampilkan layar konfirmasi pesanan).

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

## Siapkan URL kembali Anda (hanya iOS) [Sisi client]

Bila pelanggan keluar dari aplikasi Anda (misalnya untuk melakukan autentikasi di Safari atau aplikasi perbankan), sediakan cara agar pelanggan dapat kembali ke aplikasi Anda secara otomatis. Banyak tipe metode pembayaran *memerlukan* URL kembali. Jika Anda tidak memberikannya, kami tidak dapat menyajikan metode pembayaran yang mengharuskan URL kembali kepada pengguna, sekalipun Anda telah mengaktifkannya.

Untuk memberikan URL kembali:

1. [Daftarkan](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) URL custom. Tautan universal tidak didukung.
1. [Konfigurasikan](https://reactnative.dev/docs/linking) URL custom Anda.
1. Siapkan komponen root Anda untuk meneruskan URL ke SDK Stripe seperti yang ditunjukkan di bawah ini.

> Jika Anda menggunakan Expo, [atur skema](https://docs.expo.io/guides/linking/#in-a-standalone-app) di file `app.json`.

```jsx
import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}
```

Selain itu, atur `returnURL` bila Anda memanggil metode `initPaymentSheet`:

```js
await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});
```

Untuk informasi selengkapnya tentang skema URL asli, baca dokumen [Android](https://developer.android.com/training/app-links/deep-linking) dan [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app).

## Tangani kejadian pascapembayaran

Stripe mengirim kejadian [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ketika selesai pembayaran. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Selain menangani kejadian `payment_intent.succeeded`, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

| Kejadian                                                                                                                        | Keterangan                                                                                                                                                                                                                                                                                 | Tindakan                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Dikirim bila pelanggan berhasil menyelesaikan pembayaran.                                                                                                                                                                                                                                  | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka.     |
| [payment_intent. pemrosesan](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)        | Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian `payment_intent.succeeded` atau `payment_intent.payment_failed` di masa mendatang. | Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal.                                                                                                                                                                                                          | Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.                                                                |

## Coba integrasi

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Pengarahan ulang bank

| Metode pembayaran | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                           |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Bancontact, iDEAL | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang. |
| Pay by Bank       | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                   |
| Pay by Bank       | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                     |
| BLIK              | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                             |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Aktifkan pemindaian kartu [Sisi client]

> Pengaktifan pemindaian kartu diperlukan untuk proses peninjauan aplikasi iOS Apple. Pemindaian kartu tidak diperlukan untuk proses peninjauan aplikasi Android, tetapi sebaiknya aktifkan.

### iOS

Untuk mengaktifkan dukungan pemindaian kartu untuk iOS, atur `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) di dalam `Info.plist` aplikasi Anda, dan berikan alasan untuk mengakses kamera (misalnya, “Untuk memindai kartu”).

### (Opsional) Android

Untuk mengaktifkan dukungan pemindaian kartu, [minta akses produksi](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) ke Google Pay API dari [Google Pay dan Wallet Console](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite).

- Jika Anda sudah mengaktifkan Google Pay, fitur pemindaian kartu tersedia secara otomatis di UI kami pada perangkat yang memenuhi syarat. Untuk mempelajari lebih lanjut mengenai perangkat yang memenuhi syarat, baca [Google Pay API](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition)
- **Penting:** Fitur pemindaian kartu hanya muncul di versi yang ditandatangani dengan kunci penandatanganan yang sama yang terdaftar di [Google Pay & Wallet Console](https://pay.google.com/business/console). Pembuatan percobaan atau debug menggunakan kunci penandatanganan yang berbeda (misalnya, pembuatan yang didistribusikan melalui Firebase App Tester) tidak akan menampilkan opsi **Pindai kartu**. Untuk mencoba pemindaian kartu di versi pra-rilis, Anda harus:
  - Menandatangani build pengujian Anda dengan kunci penandatanganan produksi Anda
  - Menambahkan sidik jari kunci penandatanganan pengujian Anda ke Google Pay dan Wallet Console

## Optional: Aktifkan Link

Aktifkan Link di [Setelan Metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) untuk memungkinkan pelanggan Anda menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman menggunakan tombol checkout ekspres satu klik Link.

### Teruskan email pelanggan Anda ke Mobile Payment Element

Link mengautentikasi pelanggan menggunakan alamat email mereka. Stripe merekomendasikan untuk mengisi informasi sebanyak mungkin untuk merampingkan proses checkout.

Untuk mengisikan otomatis nama pelanggan, alamat email, dan nomor telepon, berikan `defaultBillingDetails` dengan informasi pelanggan Anda ke `initPaymentSheet`.

```javascript
await initPaymentSheet({
  ...
  defaultBillingDetails: {
    name: 'Jenny Rosen',
    email: 'jenny.rosen@example.com',
    phone: '888-888-8888',
  },
});
```

## Optional: Aktifkan Apple Pay

### Mendaftar Apple Merchant ID

Dapatkan Apple Merchant ID dengan [mendaftar identifier baru](https://developer.apple.com/account/resources/identifiers/add/merchant) di situs web Apple Developer.

Isi formulir dengan keterangan dan identifier. Keterangan adalah untuk catatan Anda sendiri dan nanti dapat diubah. Stripe merekomendasikan penggunaan nama aplikasi Anda sebagai identifier (misalnya, `merchant.com.{{YOUR_APP_NAME}}`).

### Buat sertifikat Apple Pay yang baru

Buat sertifikat untuk aplikasi Anda guna mengenkripsi data pembayaran.

Buka [Pengaturan Sertifikat iOS](https://dashboard.stripe.com/settings/ios_certificates) di Dashboard, klik **Tambahkan aplikasi baru**, dan ikuti panduannya.

Unduh file Permintaan Penandatanganan Sertifikat (CSR) untuk mendapatkan sertifikat aman dari Apple yang memungkinkan Anda menggunakan Apple Pay.

Satu file CSR harus digunakan untuk menerbitkan tepat satu sertifikat. Jika Anda mengganti Apple Merchant ID, Anda harus membuka [Pengaturan Sertifikat iOS](https://dashboard.stripe.com/settings/ios_certificates) di Dashboard untuk mendapatkan CSR dan sertifikat baru.

### Integrasikan dengan Xcode

Tambahkan kemampuan Apple Pay ke aplikasi Anda. Di Xcode, buka pengaturan proyek, klik tab **Signing & Capabilities**, dan tambahkan kemampuan **Apple Pay**. Pada saat ini Anda mungkin diminta untuk masuk ke akun pengembang. Pilih identifikasi merchant yang Anda buat sebelumnya, dan aplikasi Anda siap menyetujui Apple Pay.
![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png)

Aktifkan kemampuan Apple Pay di Xcode

### Tambahkan Apple Pay

#### Pembayaran satu kali

Teruskan identifikasi merchant bila Anda membuat `StripeProvider`:

```javascript
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="<<YOUR_PUBLISHABLE_KEY>>"
      merchantIdentifier="MERCHANT_ID"
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

Saat Anda memanggil `initPaymentSheet`, teruskan [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams):

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    merchantCountryCode: 'US',
  },
});
```

#### Pembayaran rutin

Bila Anda memanggil `initPaymentSheet`, teruskan [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams) dengan `merchantCountryCode`yang diatur ke kode negara bisnis Anda.

Sesuai dengan [pedoman Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) untuk pembayaran rutin, Anda juga harus menetapkan `kartuItem` yang mencakup [RutinCartSummaryItem](https://stripe.dev/stripe-react-native/api-reference/modules/ApplePay.html#RecurringCartSummaryItem) dengan jumlah yang ingin Anda kenakan (misalnya, “59,95 USD per bulan”).

Anda juga dapat mengadopsi [token merchant](https://developer.apple.com/apple-pay/merchant-tokens/) dengan mengatur `type` di `request` ke `PaymentRequestType.Recurring`

Untuk mempelajari lebih lanjut cara menggunakan pembayaran rutin dengan Apple Pay, lihat [dokumentasi Apple PassKit](https://developer.apple.com/documentation/passkit/pkpaymentrequest).

#### iOS (React Native)

```javascript
const initializePaymentSheet = async () => {
  const recurringSummaryItem = {
    label: 'My Subscription',
    amount: '59.99',
    paymentType: 'Recurring',
    intervalCount: 1,
    intervalUnit: 'month',
    // Payment starts today
    startDate: new Date().getTime() / 1000,

    // Payment ends in one year
    endDate: new Date().getTime() / 1000 + 60 * 60 * 24 * 365,
  };

  const {error} = await initPaymentSheet({
    // ...
    applePay: {
      merchantCountryCode: 'US',
      cartItems: [recurringSummaryItem],
      request: {
        type: PaymentRequestType.Recurring,
        description: 'Recurring',
        managementUrl: 'https://my-backend.example.com/customer-portal',
        billing: recurringSummaryItem,
        billingAgreement:
          "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'",
      },
    },
  });
};
```

### Pelacakan pesanan

Untuk menambah informasi [pelacakan pesanan](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) di iOS 16 atau lebih baru, konfigurasikan fungsi callback `setOrderTracking`. Stripe memanggil implementasi Anda setelah pembayaran selesai, tetapi sebelum iOS menutup lembar Apple Pay.

Dalam implementasi fungsi callback `setOrderTracking`, ambil detail pesanan dari server Anda untuk pesanan yang sudah selesai, dan lewatkan detail ke fungsi `completion` yang disediakan.

Untuk mempelajari pelacakan pesanan selengkapnya, lihat [dokumentasi Apple’s Wallet Orders](https://developer.apple.com/documentation/walletorders).

#### iOS (React Native)

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    // ...
    setOrderTracking: async complete => {
      const apiEndpoint =
        Platform.OS === 'ios'
          ? 'http://localhost:4242'
          : 'http://10.0.2.2:4567';
      const response = await fetch(
        `${apiEndpoint}/retrieve-order?orderId=${orderId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (response.status === 200) {
        const orderDetails = await response.json();
        // orderDetails should include orderIdentifier, orderTypeIdentifier,
        // authenticationToken and webServiceUrl
        complete(orderDetails);
      }
    },
  },
});
```

## Optional: Aktifkan Google Pay

### Siapkan integrasi Anda

Untuk menggunakan Google Pay, pertama aktifkan Google Pay API dengan menambahkan yang berikut ini ke tag `<application>` **AndroidManifest.xml** Anda:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Untuk detail selengkapnya, lihat [Siapkan Google Pay API](https://developers.google.com/pay/api/android/guides/setup) untuk Android dari Google Pay.

### Tambahkan Google Pay

Bila Anda memprakarsai `PaymentSheet`, atur `merchantCountryCode` ke kode negara bisnis Anda dan atur `googlePay` ke true.

Anda juga dapat menggunakan lingkungan percobaan dengan meneruskan parameter `testEnv`. Anda hanya dapat mencoba Google Pay pada perangkat fisik Android. Ikuti [dokumen React Native](https://reactnative.dev/docs/running-on-device) untuk mencoba aplikasi Anda pada perangkat fisik.

```javascript
const { error, paymentOption } = await initPaymentSheet({
  // ...
  googlePay: {
    merchantCountryCode: 'US',
    testEnv: true, // use test environment
  },
});
```

## Optional: Sesuaikan lembaran [Sisi client]

Semua penyesuaian dikonfigurasi menggunakan `initPaymentSheet`.

### Penampilan

Sesuaikan warna, font, dan sebagainya agar sesuai dengan tampilan dan nuansa aplikasi Anda dengan menggunakan [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native).

### Nama tampilan merchant

Tentukan nama bisnis yang dilihat pelanggan dengan mengatur `merchantDisplayName`. Secara default, ini adalah nama aplikasi Anda.

```javascript
await initPaymentSheet({
  // ...
  merchantDisplayName: 'Example Inc.',
});
```

### Mode gelap

Secara default `PaymentSheet` akan beradaptasi otomatis dengan pengaturan penampilan skala-sistem pengguna (mode terang dan gelap). Anda dapat mengubahnya dengan mengatur properti `style` ke mode `alwaysLight` atau `alwaysDark` di iOS.

```javascript
await initPaymentSheet({
  // ...
  style: 'alwaysDark',
});
```

Di Android, atur mode terang atau gelap pada aplikasi Anda:

```
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

## Optional: Tangani keluar pengguna

`Lembar Pembayaran` menyimpan beberapa informasi secara lokal untuk mengingat apakah pengguna telah menggunakan Link dalam aplikasi. Untuk menghapus status internal `Lembar Pembayaran`, panggil `resetPaymentSheetCustomer()` saat pengguna keluar.

```javascript
export default function CheckoutScreen() {
  // continued from above
  const { initPaymentSheet, presentPaymentSheet, resetPaymentSheetCustomer } = useStripe();

  const logout = async () => {
    await resetPaymentSheetCustomer();
  };

  return (
    <Screen>
      <Button
        title="Checkout"
        onPress={openPaymentSheet}
      />
      <Button
        title="Checkout"
        onPress={logout}
      />
    </Screen>
  );
}
```

## Optional: Selesaikan pembayaran di UI Anda

Anda dapat menyajikan Lembar Pembayaran untuk hanya mengumpulkan detail metode pembayaran, kemudian memanggil metode `confirm` untuk menyelesaikan pembayaran di UI aplikasi Anda. Hal ini akan berguna jika Anda memiliki tombol beli custom atau memerlukan langkah tambahan setelah detail pembayaran dikumpulkan.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png)

> Sampel integrasi [tersedia di GitHub kami](https://github.com/stripe/stripe-react-native/blob/master/example/src/screens/PaymentsUICustomScreen.tsx).

1. Pertama, panggil `initPaymentSheet` dan teruskan `customFlow: true`. `initPaymentSheet` diselesaikan dengan opsi pembayaran awal yang berisi gambar dan label yang mewakili metode pembayaran pelanggan. Perbarui UI Anda dengan detail ini.

```javascript
const {
  initPaymentSheet,
  presentPaymentSheet,
  confirmPaymentSheetPayment,
} = useStripe()

const { error, paymentOption } = await initPaymentSheet({
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  paymentIntentClientSecret: paymentIntent,
  customFlow: true,
  merchantDisplayName: 'Example Inc.',
});
// Update your UI with paymentOption
```

1. Gunakan `presentPaymentSheet` untuk mengumpulkan detail pembayaran. Saat pelanggan selesai, lembaran akan menutup sendiri dan menyelesaikan janjinya. Perbarui UI Anda dengan detail metode pembayaran yang dipilih.

```javascript
const { error, paymentOption } = await presentPaymentSheet();
```

1. Gunakan `confirmPaymentSheetPayment` untuk mengonfirmasi pembayaran. Ini diselesaikan dengan hasil pembayaran.

```javascript
const { error } = await confirmPaymentSheetPayment();

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else {
  Alert.alert(
    'Success',
    'Your order is confirmed!'
  );
}
```

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.