# Simpan metode pembayaran pelanggan tanpa melakukan pembayaran

Pelajari cara menyimpan metode pembayaran dan menagihnya nanti.

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=embedded-components.

[Checkout Sessions API dalam mode `setup`](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) memungkinkan Anda menyimpan detail pembayaran pelanggan tanpa pembayaran awal. Hal ini bermanfaat jika Anda ingin melakukan onboarding pelanggan sekarang, menyiapkan mereka untuk pembayaran, dan menagih mereka menggunakan Payment Intents API di masa depan saat mereka sedang offline.

Gunakan integrasi ini untuk menyiapkan pembayaran rutin atau untuk melakukan pembayaran satu kali dengan jumlah akhir yang ditentukan kemudian, sering kali setelah pelanggan menerima layanan Anda.

> #### Transaksi menggunakan kartu
> 
> Transaksi dengan kartu, seperti [pengumpulan detail kartu melalui Stripe Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md), menggunakan proses berbeda untuk menyimpan metode pembayaran.

## Kepatuhan

Anda bertanggung jawab atas kepatuhan Anda terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Persyaratan ini umumnya berlaku jika Anda ingin menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang, seperti menampilkan metode pembayaran pelanggan dalam alur checkout untuk pembelian di masa mendatang atau mengenakan saat mereka tidak aktif menggunakan situs web atau aplikasi Anda. Tambahkan ketentuan di situs web atau aplikasi Anda yang menyatakan rencana Anda menyimpan detail metode pembayaran dan mengizinkan pelanggan untuk ikut serta.

Saat Anda menyimpan metode pembayaran, Anda hanya diperbolehkan menggunakannya sesuai dengan ketentuan penggunaan spesifik yang telah Anda cantumkan. Untuk men-charge melalui metode pembayaran saat pelanggan sedang offline dan menyimpannya sebagai opsi untuk pembelian di masa mendatang, pastikan Anda mengumpulkan persetujuan secara eksplisit dari pelanggan untuk penggunaan khusus tersebut. Sebagai contoh, sertakan kotak centang bertuliskan ‘Simpan metode pembayaran saya untuk penggunaan di masa mendatang’ untuk mendapatkan persetujuan mereka.

Untuk menagih pelanggan saat mereka sedang offline, pastikan ketentuan Anda mencakup hal-hal berikut:

- Persetujuan pelanggan untuk melakukan pembayaran atau serangkaian pembayaran atas nama mereka untuk transaksi tertentu.
- Waktu yang diantisipasi dan frekuensi pembayaran (misalnya, jika charge dijadwalkan untuk angsuran berkala, pembayaran langganan, atau pengisian saldo tidak terjadwal).
- Cara Anda menentukan jumlah pembayaran.
- Kebijakan pembatalan Anda, jika metode pembayarannya untuk layanan langganan.

Pastikan Anda menyimpan catatan persetujuan tertulis pelanggan Anda terhadap ketentuan ini.

> Jika Anda perlu menggunakan konfirmasi sisi server manual atau integrasi Anda memerlukan penyajian metode pembayaran secara terpisah, lihat [panduan alternatif](https://docs.stripe.com/payments/save-and-reuse-cards-only.md) .

## 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 pelanggan [Sisi server]

Untuk menyiapkan metode pembayaran bagi pembayaran di masa mendatang, Anda harus menautkannya ke sebuah objek yang merepresentasikan pelanggan Anda. Saat pelanggan membuat akun atau melakukan transaksi pertama dengan bisnis Anda, buatlah salah satu dari: objek [Akun](https://docs.stripe.com/api/v2/core/accounts/create.md) yang dikonfigurasi untuk pelanggan melalui Accounts v2 API, atau objek [Pelanggan](https://docs.stripe.com/api/customers/create.md) melalui Customers API.

> #### Menggunakan API Akun v2 untuk mewakili pelanggan
> 
> API Akun v2 umumnya tersedia untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Jika Anda adalah bagian dari pratinjau Akun v2, Anda perlu menentukan [Tentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dalam kode Anda.
> 
> Untuk meminta akses ke pratinjau Akun v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

#### Akun v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-04-22.preview"
```

#### Pelanggan v1

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

## Gunakan mode penyiapan [Sisi server]

Buat Sesi Checkout dengan [mode=setup](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode).

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=setup \
  -d ui_mode=elements \
  -d currency=usd
```

## Melampirkan metode pembayaran ke Pelanggan [Sisi server]

Jika Anda tidak membuat Sesi Checkout dengan pelanggan yang sudah ada, gunakan ID dari *PaymentMethod* ke [melampirkan](https://docs.stripe.com/api/payment_methods/attach.md) metode pembayaran ke pelanggan.

Jika tidak, metode pembayaran secara otomatis dilampirkan pada pelanggan yang Anda tentukan saat membuat Sesi Checkout.

#### Akun v2

```curl
curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}"
```

#### Pelanggan v1

```curl
curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}"
```

## Mengambil metode pembayaran [Sisi server]

Setelah pelanggan berhasil menyelesaikan Sesi Checkout mereka, tangani webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Ambil objek Sesi dalam webhook, lalu lakukan hal-hal berikut:

- Dapatkan nilai kunci [setup_intent](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-setup_intent), yaitu ID SetupIntent yang dibuat selama Sesi Checkout.
- Gunakan ID SetupIntent untuk [mengambil](https://docs.stripe.com/api/setup_intents/retrieve.md) objek SetupIntent. Objek yang dikembalikan berisi ID [payment_method](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-payment_method) yang dapat Anda lampirkan ke pelanggan pada langkah berikutnya.

Pelajari lebih lanjut tentang [menyiapkan webhook](https://docs.stripe.com/webhooks.md).

## Charge metode pembayaran nanti [Sisi server]

Setelah Anda melampirkan PaymentMethod ke pelanggan, Anda dapat melakukan pembayaran *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) menggunakan [PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method):

- Atur salah satu dari [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) ke ID `Account` atau [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) ke ID `Customer`, serta atur [payment_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) ke ID `PaymentMethod`.
- Atur [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) ke `true` untuk menunjukkan bahwa pelanggan tidak berada di alur checkout Anda selama percobaan pembayaran dan tidak dapat memenuhi permintaan autentikasi yang dibuat oleh pihak lain, seperti penerbit kartu, bank, atau lembaga pembayaran lainnya. Jika, selama alur checkout, pihak lain meminta autentikasi, Stripe meminta pembebasan menggunakan informasi pelanggan dari transaksi *on-session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) sebelumnya. Jika kondisi untuk pengecualian tidak terpenuhi, PaymentIntent mungkin menghasilkan kesalahan.
- Tetapkan nilai properti [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) milik PaymentIntent ke `true`, yang menyebabkan konfirmasi segera terjadi saat Anda membuat PaymentIntent.

#### Akun v2

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d off_session=true \
  -d confirm=true
```

#### Pelanggan v1

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d off_session=true \
  -d confirm=true
```

Jika percobaan pembayaran gagal, permintaan juga gagal dengan kode status HTTP 402, dan status PaymentIntent adalah requires_payment_method**. Beritahu pelanggan agar kembali ke aplikasi Anda (misalnya, dengan mengirimkan email atau notifikasi dalam aplikasi) dan arahkan pelanggan ke sesi Checkout baru untuk memilih metode pembayaran lain.

#### 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]=1099" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```

#### 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]=1099" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```


# Setup Intents API

> This is a Setup Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=elements.

[Setup Intents API](https://docs.stripe.com/api/setup_intents.md) memungkinkan Anda menyimpan detail pembayaran pelanggan tanpa pembayaran pertama. Hal ini berguna jika Anda ingin melakukan onboarding pelanggan sekarang, menyiapkannya untuk pembayaran, dan menagih di masa mendatang—saat pelanggan offline.

Gunakan integrasi ini untuk menyiapkan pembayaran rutin atau untuk melakukan pembayaran satu kali dengan jumlah akhir yang ditentukan kemudian, sering kali setelah pelanggan menerima layanan Anda.

> #### Transaksi dengan kartu fisik
> 
> Transaksi dengan kartu fisik, seperti mengumpulkan detail kartu melalui Stripe Terminal, menggunakan proses yang berbeda untuk menyimpan metode pembayaran. Untuk detailnya, lihat [dokumentasi Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md).

## Kepatuhan

Anda bertanggung jawab atas kepatuhan terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Persyaratan ini umumnya berlaku jika Anda ingin menyimpan metode pembayaran pelanggan untuk digunakan di masa mendatang, seperti menampilkan metode pembayaran pelanggan dalam alur checkout untuk pembelian di masa mendatang atau men-charge saat pelanggan tidak aktif menggunakan situs web atau aplikasi Anda. Tambahkan ketentuan di situs web atau aplikasi Anda yang menyatakan rencana Anda menyimpan detail metode pembayaran dan mengizinkan pelanggan untuk ikut serta.

Saat Anda menyimpan metode pembayaran, Anda hanya diperbolehkan menggunakannya sesuai dengan ketentuan penggunaan spesifik yang telah Anda cantumkan. Untuk men-charge melalui metode pembayaran saat pelanggan sedang offline dan menyimpannya sebagai opsi untuk pembelian di masa mendatang, pastikan Anda mengumpulkan persetujuan secara eksplisit dari pelanggan untuk penggunaan khusus tersebut. Sebagai contoh, sertakan kotak centang bertuliskan “Simpan metode pembayaran saya untuk penggunaan di masa mendatang” untuk mendapatkan persetujuan mereka.

Untuk men-charge saat offline, pastikan ketentuan Anda mencakup hal-hal berikut:

- Persetujuan pelanggan untuk melakukan pembayaran atau serangkaian pembayaran atas nama mereka untuk transaksi tertentu.
- Waktu dan frekuensi pembayaran yang diantisipasi (misalnya, jika charge untuk angsuran terjadwal, pembayaran langganan, atau penambahan saldo tidak terjadwal).
- Cara Anda menentukan jumlah pembayaran.
- Kebijakan pembatalan Anda, jika metode pembayarannya untuk layanan langganan.

Pastikan Anda menyimpan catatan persetujuan tertulis dari pelanggan atas ketentuan ini.

> Jika Anda perlu menggunakan konfirmasi sisi server manual atau integrasi Anda memerlukan penyajian metode pembayaran secara terpisah, lihat [panduan alternatif](https://docs.stripe.com/payments/save-and-reuse-cards-only.md) kami.

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

## Aktifkan metode pembayaran

Lihat [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) dan aktifkan metode pembayaran yang ingin Anda dukung. Anda memerlukan setidaknya satu metode pembayaran yang diaktifkan untuk membuat *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method).

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.

## Buat Pelanggan [Sisi server]

Untuk menyiapkan metode pembayaran bagi pembayaran di masa mendatang, Anda harus menautkannya ke sebuah objek yang merepresentasikan pelanggan Anda. Saat pelanggan membuat akun atau melakukan transaksi pertama dengan bisnis Anda, buatlah salah satu dari: objek [Akun](https://docs.stripe.com/api/v2/core/accounts/create.md) yang dikonfigurasi untuk pelanggan melalui Accounts v2 API, atau objek [Pelanggan](https://docs.stripe.com/api/customers/create.md) melalui Customers API.

> #### Menggunakan API Akun v2 untuk mewakili pelanggan
> 
> API Akun v2 umumnya tersedia untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Jika Anda adalah bagian dari pratinjau Akun v2, Anda perlu menentukan [Tentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dalam kode Anda.
> 
> Untuk meminta akses ke pratinjau Akun v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

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

## Buat SetupIntent [Sisi server]

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

[SetupIntent](https://docs.stripe.com/api/setup_intents.md) adalah objek yang mewakili maksud Anda untuk menyiapkan metode pembayaran pelanggan bagi pembayaran mendatang. Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan pada `SetupIntent`. Anda dapat memungkinkan Stripe secara otomatis menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, batasan metode pembayaran, dan paramater lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran meningkatkan konversi dan yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan. Metode pembayaran dengan prioritas yang lebih rendah akan disembunyikan di bawah menu yang dapat diperluas.

#### Mengelola metode pembayaran dari Dashboard

Sebagian metode pembayaran tidak dapat disimpan untuk pembayaran mendatang, dan pelanggan tidak melihatnya sebagai opsi ketika menyiapkan pembayaran mendatang. Untuk detail selengkapnya tentang mengelola metode pembayaran, lihat [Opsi integrasi metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md).

Anda dapat membuat SetupIntent secara opsional dengan mengaktifkan `automatic_payment_methods`, dan SetupIntent dibuat dengan menggunakan metode pembayaran yang Anda konfigurasikan di Dashboard. Menentukan parameter `automatic_payment_methods` bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default di versi terbaru API.

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.

#### Akun v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

#### Pelanggan v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

#### Cantumkan metode pembayaran secara manual

Buat SetupIntent pada server Anda dengan daftar [metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md) yang ingin Anda dukung.

#### Akun v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "payment_method_types[]=bancontact" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=ideal"
```

#### Pelanggan v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]=bancontact" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=ideal"
```

### Ambil client secret

SetupIntent 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 SetupIntent
  {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/setup_intents/object.md#setup_intent_object-client_secret) di formulir checkout Anda. Di kode sisi server Anda, ambil client secret dari SetupIntent:

#### 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 SetupIntent
  erb :checkout
end
```

> #### Menggunakan Radar
> 
> Ketika menyimpan metode pembayaran pelanggan tanpa pembayaran awal, [Radar](https://docs.stripe.com/radar.md) tidak bertindak pada SetupIntent secara default. Jika Anda ingin mengaktifkan ini sebagai default, buka [pengaturan Radar](https://dashboard.stripe.com/settings/radar) dan aktifkan **Gunakan Radar pada metode pembayaran yang disimpan untuk penggunaan mendatang**.

## Kumpulkan detail pembayaran [Sisi client]

Anda siap untuk mengumpulkan 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 secara aman mengirim informasi pembayaran ke Stripe melalui koneksi HTTPS. Alamat halaman checkout harus dimulai dengan `https://`, bukan `http://` agar integrasi Anda dapat berfungsi. Anda dapat mencoba integrasi tanpa melakukannya, tetapi ingatlah untuk [mengaktifkan HTTPS](https://docs.stripe.com/security/guide.md#tls) bila sudah siap menerima pembayaran live.

#### HTML+JS

### Siapkan Stripe.js

Payment Element tersedia secara otomatis sebagai fitur Stripe.js. Sertakan skrip Stripe.js di halaman checkout Anda dengan menambahkannya ke `head` file HTML Anda. Selalu muat Stripe.js langsung dari js.stripe.com agar tetap sesuai dengan PCI. Jangan sertakan skrip dalam bundel atau simpan 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 penyiapan pembayaran Anda

Payment Element membutuhkan tempat tinggal di halaman penyiapan pembayaran Anda. Buat node DOM kosong (wadah) dengan identifikasi 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 dari Payment Element dan pasang ke node DOM kontainer. Teruskan [client secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) dari langkah sebelumnya ke `options` saat Anda membuat instance [Elements](https://docs.stripe.com/js/elements_object/create):

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

// Set up Stripe.js and Elements using the SetupIntent's client secretconst elements = stripe.elements(options);

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

```

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 sesuai dengan desain situs Anda dengan meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) ke dalam `options` saat membuat instance `elements`. Stripe Elements adalah penagihan komponen UI drop-in. Untuk menyesuaikan formulir Anda lebih lanjut atau mengumpulkan informasi pelanggan yang berbeda, lihat [dokumen Elements](https://docs.stripe.com/payments/elements.md).

### Minta token merchant Apple Pay

Jika Anda menerima pembayaran Apple Pay, disarankan untuk mengonfigurasi [opsi](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` guna menyesuaikan tampilan di antarmuka Apple Pay. Dengan melakukan ini, [token merchant](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) milik Apple Pay akan digunakan. Contoh berikut menunjukkan konfigurasi untuk pembayaran yang dimulai pada 5 Januari 2030. Informasi ini akan tercermin di antarmuka Apple Pay.

```javascript
const paymentElement = elements.create('payment', {
  applePay: {
    deferredPaymentRequest: {
      paymentDescription: 'My deferred payment',
      managementURL: 'https://example.com/billing',
      deferredBilling: {
        amount: 2500,
        label: 'Deferred Fee',
        deferredPaymentDate: new Date('2030-01-05')
      },
    }
  },
  // Other options
});
```

#### 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 Element ke halaman penyiapan pembayaran Anda

Untuk menggunakan komponen Payment Element, bungkus komponen halaman penyiapan pembayaran 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/setup_intents/object.md#setup_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 SetupForm from './SetupForm';

// 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 SetupIntent's client secret
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <SetupForm />
    </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 SetupForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default SetupForm;
```

Stripe Elements adalah pengumpulan 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`.

### Minta token merchant Apple Pay

Jika Anda menerima pembayaran Apple Pay, disarankan untuk mengonfigurasi [opsi](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` guna menyesuaikan tampilan di antarmuka Apple Pay. Dengan melakukan ini, [token merchant](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) milik Apple Pay akan digunakan. Contoh berikut menunjukkan konfigurasi untuk pembayaran yang dimulai pada 5 Januari 2030. Informasi ini akan tercermin di antarmuka Apple Pay.

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

const SetupForm = () => {
  const options = {
    applePay: {
      deferredPaymentRequest: {
        paymentDescription: 'My deferred payment',
        managementURL: 'https://example.com/billing',
        deferredBilling: {
          amount: 2500,
          label: 'Deferred Fee',
          deferredPaymentDate: new Date('2030-01-05')
        },
      }
    },
    // Other options
  };

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

export default SetupForm;
```

### Konfigurasikan mata uang

Ketika menggunakan SetupIntents dengan [automatic_payment_methods](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods), Anda dapat menentukan mata uang saat [membuat Payment Element.](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-currency) Payment Element menampilkan metode pembayaran yang diaktifkan dan mendukung mata uang yang disediakan. Untuk detail selengkapnya, lihat [dokumentasi Payment Element](https://docs.stripe.com/payments/payment-methods/integration-options.md).

### 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.

## Optional: Link in your checkout page [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).
![Authenticate or enroll with Link directly in the Payment Element during 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: 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

Buat [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) di server Anda dengan memberikan ID pelanggan (menggunakan `customer` untuk objek `Customer` atau `customer_account` untuk objek `Account` yang dikonfigurasi untuk pelanggan) dan 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-payment_method_save) metode pembayaran tersimpan mana yang ingin Anda aktifkan. Sebagai contoh, 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 memungkinkan pelanggan menyimpan detail pembayaran mereka untuk penggunaan 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 umumnya tersedia untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Jika Anda adalah bagian dari pratinjau Akun v2, Anda perlu menentukan [Tentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dalam kode Anda.
> 
> Untuk meminta akses ke pratinjau Akun v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

#### 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.setup_intents.create({
    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.setup_intents.create({
    # 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 SetupIntent 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');
```

Saat mengonfirmasi SetupIntent, Stripe.js secara otomatis mengontrol pengaturan [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.

### 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
  }
})
```

## Serahkan detail pembayaran ke Stripe [Sisi client]

Gunakan [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) untuk menyelesaikan penyiapan menggunakan detail yang dikumpulkan oleh Payment Element. Berikan [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) ke fungsi ini sehingga Stripe dapat mengalihkan pengguna setelah mereka menyelesaikan penyiapan. Kami mungkin pertama kali mengalihkan mereka ke situs perantara, seperti halaman otorisasi bank, sebelum mengalihkan mereka ke `return_url`.

Jika pelanggan Anda menyimpan detail kartu mereka, kami segera mengalihkan mereka ke `return_url` bila penyiapan berhasil. Jika tidak ingin dialihkan untuk pembayaran kartu, Anda dapat mengatur [pengalihan](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_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.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/account/payments/setup-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.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) 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 SetupForm = () => {
  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 null;
    }
const {error} = await stripe.confirmSetup({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/account/payments/setup-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 SetupForm;
```

Pastikan `return_url` sesuai dengan halaman di situs web Anda yang [memberikan status](https://docs.stripe.com/payments/payment-intents/verifying-status.md) dari `SetupIntent`. Stripe menyediakan URL berikut untuk memverifikasi status ketika pelanggan diarahkan kembali ke `return_url`. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan `return_url`, dan parameter tersebut bertahan selama proses pengalihan.

| Parameter                    | Keterangan                                                                                                                       |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `setup_intent`               | Identifier unik untuk `SetupIntent`.                                                                                             |
| `setup_intent_client_secret` | [Client secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) dari objek `SetupIntent`. |

Anda dapat menggunakan [stripe.retrieveSetupIntent](https://docs.stripe.com/js/setup_intents/retrieve_setup_intent) untuk mengambil `SetupIntent` menggunakan parameter kueri `setup_intent_client_secret`. Konfirmasi `SetupIntent` yang berhasil akan menyimpan ID `PaymentMethod` yang dihasilkan (pada `result.setupIntent.payment_method`) ke `Account` atau `Customer` yang dikonfigurasi untuk pelanggan tersebut.

#### HTML+JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('{PUBLISHABLE_KEY}');

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

// Retrieve the SetupIntent
stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the SetupIntent `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 (setupIntent.status) {
    case 'succeeded': {
      message.innerText = 'Success! Your payment method has been saved.';
      break;
    }

    case 'processing': {
      message.innerText = "Processing payment details. We'll update you when processing is complete.";
      break;
    }

    case 'requires_payment_method': {
      message.innerText = 'Failed to process payment details. Please try another payment method.';

      // Redirect your user back to your payment page to attempt collecting
      // payment again

      break;
    }
  }
});
```

#### React

```jsx

// PaymentStatus.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 "setup_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'setup_intent_client_secret'
    );

    // Retrieve the SetupIntent
    stripe
      .retrieveSetupIntent(clientSecret)
      .then(({setupIntent}) => {
        // Inspect the SetupIntent `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 (setupIntent.status) {
          case 'succeeded':
            setMessage('Success! Your payment method has been saved.');
            break;

          case 'processing':
            setMessage("Processing payment details. We'll update you when processing is complete.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Failed to process payment details. Please try another payment method.');
            break;
        }
      });
  }, [stripe]);


  return message
};

export default PaymentStatus;
```

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

## Charge metode pembayaran yang disimpan nanti [Sisi server]

> #### Kepatuhan
> 
> Anda bertanggung jawab atas kepatuhan terhadap semua hukum, peraturan, dan aturan jaringan yang berlaku saat menyimpan detail pembayaran pelanggan. Saat menampilkan metode pembayaran sebelumnya kepada pelanggan akhir untuk pembelian di masa mendatang, pastikan Anda mencantumkan metode pembayaran yang telah mendapatkan persetujuan dari pelanggan untuk menyimpan detail metode pembayaran untuk penggunaan khusus di masa mendatang. Untuk membedakan antara metode pembayaran yang dilampirkan pada pelanggan yang dapat dan tidak dapat ditampilkan kepada pelanggan akhir Anda sebagai metode pembayaran tersimpan untuk pembelian di masa mendatang, gunakan parameter [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Untuk menemukan metode pembayaran yang akan di-charge, buat daftar metode pembayaran yang terkait dengan pelanggan Anda. Contoh ini menampilkan daftar kartu, tetapi Anda dapat mencantumkan [jenis](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) apa pun yang didukung.

> #### Menggunakan API Akun v2 untuk mewakili pelanggan
> 
> API Akun v2 umumnya tersedia untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Jika Anda adalah bagian dari pratinjau Akun v2, Anda perlu menentukan [Tentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dalam kode Anda.
> 
> Untuk meminta akses ke pratinjau Akun v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

#### Akun v2

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=card
```

#### Pelanggan v1

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=card
```

Saat Anda siap men-charge pelanggan secara *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), gunakan ID `Pelanggan` atau ID `Akun` yang dikonfigurasi pelanggan serta ID `PaymentMethod` untuk membuat `PaymentIntent` dengan nominal dan mata uang pembayaran. Tetapkan beberapa parameter lain untuk melakukan pembayaran off-session:

- Atur [off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-off_session) ke true untuk menunjukkan bahwa pelanggan tidak berada dalam alur checkout Anda untuk menanggapi permintaan autentikasi apa pun. Jika, selama alur checkout Anda, mitra (seperti penerbit kartu atau bank) meminta autentikasi, Stripe akan meminta pembebasan menggunakan informasi pelanggan dari transaksi *on-session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) sebelumnya. Jika syarat pengecualian tidak terpenuhi, `PaymentIntent` mungkin menghasilkan error.
- Atur [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) ke true untuk memicu konfirmasi segera saat `PaymentIntent` dibuat.
- Atur [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) ke ID `PaymentMethod`.
- Bergantung pada cara Anda merepresentasikan pelanggan dalam integrasi Anda, atur [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) ke ID `Account` yang dikonfigurasi untuk pelanggan atau atur [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) ke ID `Customer`.

#### Akun v2

```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 "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  --data-urlencode "return_url=https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

#### Pelanggan v1

```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 "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  --data-urlencode "return_url=https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

Bila upaya pembayaran gagal, permintaan juga gagal dengan kode status HTTP 402 dan status PaymentIntent adalah *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Anda harus memberi tahu pelanggan agar kembali ke aplikasi untuk menyelesaikan pembayaran (misalnya dengan mengirimkan email atau notifikasi dalam-aplikasi).

Periksa kode [kesalahan](https://docs.stripe.com/api/errors/handling.md) yang dimunculkan oleh pustaka API Stripe. Jika pembayaran gagal karena kode penolakan [authentication_required](https://docs.stripe.com/declines/codes.md), gunakan client secret PaymentIntent yang ditolak dengan confirmPayment agar pelanggan dapat mengautentikasi pembayaran.

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

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

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    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`.
  }
});
```

> `stripe.confirmPayment` dapat perlu waktu beberapa detik untuk menyelesaikan. Sambil menunggu, nonaktifkan formulir Anda agar tidak diserahkan kembali dan tampilkan indikator menunggu seperti spinner. Jika Anda menerima kesalahan, tampilkan kepada pelanggan, aktifkan kembali formulir, dan sembunyikan indikator menunggu. Jika pelanggan harus melakukan langkah tambahan untuk menyelesaikan pembayaran, seperti autentikasi, Stripe.js akan memandu mereka menjalani proses itu.

Jika pembayaran gagal karena alasan lain, seperti dana tidak mencukupi, kirim pelanggan Anda ke halaman pembayaran untuk memasukkan metode pembayaran baru. Anda dapat menggunakan kembali PaymentIntent yang ada untuk mencoba lagi pembayaran dengan detail pembayaran baru.

## Coba integrasi

Gunakan detail pembayaran percobaan dan halaman pengarahan ulang percobaan untuk memverifikasi integrasi Anda. Klik tab di bawah guna melihat detail untuk setiap metode pembayaran.

#### Kartu

| Metode pembayaran | Skenario                                                                                                                                                                                                                                                                                                       | Cara mencoba                                                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| Kartu kredit      | Penyiapan kartu berhasil dan tidak 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 `4242 4242 4242 4242` dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.      |
| Kartu kredit      | Kartu ini memerlukan autentikasi untuk penyiapan awal, kemudian berhasil untuk pembelian berikutnya.                                                                                                                                                                                                           | Isilah formulir kartu kredit kami menggunakan nomor kartu kredit `4000 0025 0000 3155` dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| Kartu kredit      | Kartu ini memerlukan autentikasi untuk penyiapan awal dan juga memerlukan autentikasi untuk pembelian berikutnya.                                                                                                                                                                                              | Isilah formulir kartu kredit kami menggunakan nomor kartu kredit `4000 0027 6000 3184` dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| Kartu kredit      | Kartu ini ditolak selama penyiapan.                                                                                                                                                                                                                                                                            | Isilah formulir kartu kredit menggunakan nomor kartu kredit `4000 0000 0000 9995` dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos.      |

#### Pengarahan ulang bank

| Metode pembayaran   | Skenario                                                                                                                                                                        | Cara mencoba                                                                                                                                                                             |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bancontact          | Pelanggan Anda berhasil menyiapkan metode pembayaran Debit Langsung SEPA untuk penggunaan mendatang dengan menggunakan Bancontact.                                              | Gunakan sembarang nama di formulir Bancontact, kemudian klik **Otorisasikan penyiapan percobaan** di halaman pengarahan ulang.                                                           |
| Bancontact          | Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Bancontact.                                                                                                    | Gunakan sembarang nama di formulir Bancontact, kemudian klik **Gagalkan penyiapan percobaan** di halaman pengarahan ulang.                                                               |
| Debit Langsung BECS | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS.                                                                                                                    | Isi formulir menggunakan nomor rekening `900123456`. Status `PaymentIntent` yang dikonfirmasi awalnya akan beralih ke `processing`, kemudian menjadi `succeeded` dalam 3 menit kemudian. |
| Debit Langsung BECS | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`.                                                                                                         | Isilah formulir menggunakan nomor akun `111111113`.                                                                                                                                      |
| iDEAL               | Pelanggan Anda berhasil menyiapkan metode pembayaran [Debit Langsung SEPA](https://docs.stripe.com/payments/sepa-debit.md) untuk penggunaan mendatang dengan menggunakan iDEAL. | Gunakan sembarang nama dan bank di formulir iDEAL, kemudian klik **Otorisasikan penyiapan percobaan** di halaman pengarahan ulang.                                                       |
| iDEAL               | Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang iDEAL.                                                                                                         | Pilih sembarang bank dan gunakan sembarang nama di formulir iDEAL, kemudian klik **Gagalkan penyiapan percobaan** di halaman pengarahan ulang.                                           |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                           | Cara mencoba                                                                                                                                                                                        |
| ------------------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                       | Isi formulir menggunakan nomor rekening `AT321904300235473204`. Status `PaymentIntent` yang dikonfirmasi awalnya akan beralih ke `processing`, kemudian menjadi `succeeded` dalam 3 menit kemudian. |
| Debit Langsung SEPA | Status `PaymentIntent` pelanggan Anda beralih dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                      |

### Coba men-charge PaymentMethod Debit SEPA yang disimpan

Mengonfirmasi `SetupIntent` menggunakan iDEAL, Bancontact, atau Sofort akan menghasilkan [SEPA Direct Debit](https://docs.stripe.com/payments/sepa-debit.md) *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs). SEPA Direct Debit adalah metode pembayaran [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) yang beralih ke status perantara `processing` sebelum beralih beberapa hari kemudian ke status `succeeded` atau `requires_payment_method`.

#### Email

Atur `payment_method.billing_details.email` ke salah satu nilai berikut untuk menguji transisi status `PaymentIntent`. Anda dapat menyertakan teks kustom Anda sendiri di awal alamat email yang diikuti dengan garis bawah. Misalnya, `test_1_generatedSepaDebitIntentsFail@example.com` menghasilkan PaymentMethod Debit Langsung SEPA yang selalu gagal saat digunakan dengan `PaymentIntent`.

| Alamat Email                                                       | Keterangan                                                                                                                    |
| ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| `generatedSepaDebitIntentsSucceed@example.com`                     | Status `PaymentIntent` bertransisi dari `processing` ke `succeeded`.                                                          |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | Status `PaymentIntent` bertransisi dari `processing` ke `succeeded` setelah setidaknya tiga menit.                            |
| `generatedSepaDebitIntentsFail@example.com`                        | Status `PaymentIntent` bertransisi dari `processing` ke `requires_payment_method`.                                            |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | Status `PaymentIntent` bertransisi dari `processing` ke `requires_payment_method` setelah setidaknya tiga menit.              |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | Status `PaymentIntent` bertransisi dari `processing` ke `succeeded`, tetapi sengketa dibuat segera.                           |
| `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | Status `PaymentIntent` bertransisi dari `processing` ke `requires_payment_method` dengan kode kegagalan `insufficient_funds`. |

#### PaymentMethod

Gunakan PaymentMethods ini untuk menguji transisi status `PaymentIntent`. Token ini berguna untuk pengujian otomatis guna segera melampirkan PaymentMethod ke SetupIntent di server.

| Metode Pembayaran                                                    | Keterangan                                                                                                                    |
| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `pm_bancontact_generatedSepaDebitIntentsSucceed`                     | Status `PaymentIntent` bertransisi dari `processing` ke `succeeded`.                                                          |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed`              | Status `PaymentIntent` bertransisi dari `processing` ke `succeeded` setelah setidaknya tiga menit.                            |
| `pm_bancontact_generatedSepaDebitIntentsFail`                        | Status `PaymentIntent` bertransisi dari `processing` ke `requires_payment_method`.                                            |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                 | Status `PaymentIntent` bertransisi dari `processing` ke `requires_payment_method` setelah setidaknya tiga menit.              |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`             | Status `PaymentIntent` bertransisi dari `processing` ke `succeeded`, tetapi sengketa dibuat segera.                           |
| `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | Status `PaymentIntent` bertransisi dari `processing` ke `requires_payment_method` dengan kode kegagalan `insufficient_funds`. |

## Optional: Sesuaikan tata letak [Sisi client]

Anda dapat menyesuaikan tata letak Payment Element (akordeon atau tab) agar sesuai dengan antarmuka checkout Anda. Untuk informasi selengkapnya tentang setiap properti, lihat [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).

#### Akordeon

Anda dapat mulai menggunakan fitur tata letak dengan meneruskan `type` tata letak dan properti opsional lainnya saat membuat Payment Element:

```javascript
const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: 'always',
    spacedAccordionItems: false
  }
});
```

#### Tab

### Tentukan tata letak

Tetapkan nilai untuk tata letak ke `tabs`. Anda juga memiliki opsi untuk menentukan properti lain, seperti contoh berikut:

```javascript
const paymentElement = elements.create('payment', {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
});
```

Gambar berikut adalah Payment Element yang sama yang ditampilkan menggunakan konfigurasi tata letak yang berbeda:
![Tiga pengalaman formulir checkout](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png)

Tata letak Payment Element

## Optional: Apple Pay dan Google Pay [Sisi client]

Saat Anda [mengaktifkan pembayaran kartu](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=elements#create-intent), kami menampilkan Apple Pay dan Google Pay untuk pelanggan yang lingkungannya memenuhi [ketentuan tampilan dompet](https://docs.stripe.com/testing/wallets.md). Untuk menerima pembayaran dari dompet ini, Anda juga harus:

- Aktifkan di [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods). Apple Pay diaktifkan secara default.
- [Daftarkan domain Anda](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

> #### 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.

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

- [Terima pembayaran](https://docs.stripe.com/payments/accept-a-payment.md)
- [Simpan detail pembayaran selama pembayaran](https://docs.stripe.com/payments/save-during-payment.md)
- [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md)
- [Kirim faktor risiko lengkap](https://docs.stripe.com/radar/optimize-risk-factors.md)