# Payment Element Stripe

Terima metode pembayaran dari seluruh dunia dengan komponen UI yang aman dan dapat disematkan.

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();`.

Payment Element adalah komponen UI untuk web yang menerima 100+ metode pembayaran, memvalidasi input, dan menangani kesalahan. Gunakan komponen ini sendiri atau dengan Elements lain di frontend aplikasi web Anda.

## API yang kompatibel

Stripe menawarkan dua API pembayaran inti yang kompatibel dengan Elements. Kami merekomendasikan [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) untuk sebagian besar integrasi.

- Gunakan [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) untuk membangun alur checkout Anda. Checkout Sessions mencakup contoh penggunaan yang serupa dengan Payment Intents, termasuk pembayaran dasar yang menggunakan `price_data` atau checkout penuh dengan mata anggaran, pajak, diskon, pengiriman, langganan, atau [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (hanya tersedia dengan Checkout Sessions).

  Buat [halaman checkout dengan API Sesi Checkout](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

- [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) adalah API tingkat rendah yang hanya memodelkan langkah pembayaran. Anda meneruskan jumlah akhir dan membangun semua logika checkout sendiri, termasuk perhitungan pajak, diskon, pengiriman, langganan, dan konversi mata uang. Gunakan Payment Intents hanya jika Anda ingin mengelola status checkout Anda secara mendalam dan membangun fitur-fitur ini sendiri.

  Bangun [integrasi custom dari awal dengan Payment Intents API](https://docs.stripe.com/payments/advanced.md).
 (See full diagram at https://docs.stripe.com/payments/payment-element)
[Membangun integrasi lanjutan dengan Payment Element dan Sesi Checkout](https://docs.stripe.com/payments/quickstart-checkout-sessions.md): Bangun integrasi dengan Payment Element menggunakan Checkout Sessions API.

[Membangun integrasi dengan Payment Element dan Payment Intents](https://docs.stripe.com/payments/quickstart.md): Menggunakan Payment Intents API untuk membuat alur checkout Anda sendiri.

[Gandakan sampel aplikasi di GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element)

## Gabungkan elemen

Payment Element saling beroperasi dengan elemen lain. Sebagai contoh, formulir ini menggunakan satu elemen tambahan untuk [mengisi otomatis detail checkout](https://docs.stripe.com/payments/link.md), dan elemen lainnya untuk [mengumpulkan alamat pengiriman](https://docs.stripe.com/elements/address-element.md).

> Anda tidak dapat menghapus perjanjian hukum Link karena diperlukan untuk memastikan kepatuhan terhadap kesadaran pengguna yang tepat tentang persyaratan layanan dan kebijakan privasi. Itu [ketentuan](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) tidak berlaku untuk perjanjian legalLink.

![Formulir dengan info kontak, alamat pengiriman, dan kolom pembayaran. Info kontak diberi label Elemen Autentikasi Link, alamat pengiriman diberi label Elemen Alamat, dan kolom pembayaran diberi label Elemen Pembayaran.](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.f60af275f69b6e6e73c766d1f9928457.png)
Formulir pembayaran yang menggabungkan beberapa elemen

Untuk kode lengkap untuk contoh ini, lihat [Tambahkan Link ke integrasi Elements](https://docs.stripe.com/payments/link/add-link-elements-integration.md).

Anda juga dapat menggabungkan Payment Element dengan [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md). Dalam kasus ini, metode pembayaran dompet digital, seperti Apple Pay dan Google Pay, hanya ditampilkan di Express Checkout Element untuk menghindari duplikasi.

## Metode pembayaran

Stripe mengaktifkan metode pembayaran tertentu untuk Anda secara default. Kami juga dapat mengaktifkan metode pembayaran tambahan setelah memberi tahu Anda. Gunakan [Dashboard](https://dashboard.stripe.com/settings/payment_methods) untuk mengaktifkan atau menonaktifkan metode pembayaran setiap saat. Dengan Payment Element, Anda dapat menggunakan [metode pembayaran dinamis](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) untuk:

- Kelola metode pembayaran di [Dashboard](https://dashboard.stripe.com/settings/payment_methods) tanpa pemrograman
- Tampilkan secara dinamis opsi pembayaran yang paling relevan berdasarkan faktor-faktor seperti lokasi, mata uang, dan jumlah transaksi

Misalnya, jika pelanggan di Jerman membayar dalam EUR, mereka akan melihat semua metode pembayaran aktif yang menerima EUR, mulai dari metode yang banyak digunakan di Jerman.
![Berbagai metode pembayaran.](https://b.stripecdn.com/docs-statics-srv/assets/payment-element-methods.26cae03aff199d6f02b0d92bd324c219.png)

Tampilkan metode pembayaran dalam urutan yang relevan bagi pelanggan Anda

Untuk menyesuaikan lebih lanjut cara metode pembayaran dirender,  lihat [Sesuaikan metode pembayaran](https://docs.stripe.com/payments/customize-payment-methods.md). Untuk menambahkan metode pembayaran yang terintegrasi di luar Stripe, Anda dapat menggunakan [metode pembayaran khusus](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md).

Jika integrasi mengharuskan Anda mencantumkan metode pembayaran secara manual, lihat [Cantumkan metode pembayaran secara manual](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually).

## Tata letak

Anda dapat menyesuaikan tata letak Payment Element agar sesuai dengan alur checkout Anda. Gambar berikut adalah Payment Element yang sama yang ditampilkan menggunakan konfigurasi tata letak yang berbeda.
![Contoh dari tiga formulir checkout. Gambar menunjukkan opsi tab, tempat pelanggan memilih dari metode pembayaran yang ditampilkan sebagai tab atau dua opsi akordeon, tempat metode pembayaran dicantumkan secara vertikal. Anda dapat memilih untuk menampilkan tombol radio atau tidak pada tampilan akordeon.](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png)

Payment Element dengan tata letak yang berbeda.

#### Tab

Tata letak tab menampilkan metode pembayaran secara horizontal menggunakan tab. Untuk menggunakan tata letak ini, atur nilai untuk [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) ke `tabs`. Anda juga dapat menentukan properti lain, seperti [layout.defaultCollapsed](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-defaultCollapsed).

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};
const elements = stripe.elements({ clientSecret, appearance }); // Dalam integrasi yang berfungsi, ini adalah nilai yang diteruskan oleh backend Anda dengan detail seperti jumlah pembayaran. Lihat sampel lengkap untuk detailnya.
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```

#### Akordeon dengan tombol radio

Tata letak akordeon menampilkan metode pembayaran secara vertikal menggunakan akordeon. Untuk menggunakan tata letak ini, atur nilai untuk [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) ke `accordion`. Anda juga dapat menentukan properti lain, seperti [layout.radios](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-radios) untuk menampilkan tombol radio.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: 'always',
    spacedAccordionItems: false
  }
};
const clientSecret = {{CLIENT_SECRET}}; // Dalam integrasi yang berfungsi, ini adalah nilai yang diteruskan oleh backend Anda dengan detail seperti jumlah pembayaran. Lihat sampel lengkap untuk detailnya.
const elements = stripe.elements({ clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```

#### Akordeon tanpa tombol radio

Tata letak akordeon menampilkan metode pembayaran secara vertikal menggunakan akordeon. Untuk menggunakan tata letak ini, atur nilai untuk [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) ke `accordion`. Anda juga dapat menentukan properti lain, seperti [layout.spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) untuk membuat ruang vertikal tambahan.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: 'never',
    spacedAccordionItems: true
  }
};
const clientSecret = {{CLIENT_SECRET}}; // Dalam integrasi yang berfungsi, ini adalah nilai yang diteruskan oleh backend Anda dengan detail seperti jumlah pembayaran. Lihat sampel lengkap untuk detailnya.
const elements = stripe.elements({ clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```

## Penampilan

Gunakan Appearance API untuk mengontrol gaya semua elemen. Pilih tema atau perbarui detail spesifik.
![Contoh mode terang dan gelap untuk formulir checkout elemen pembayaran.](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Contohnya, pilih tema “flat” dan kesampingkan warna teks primer.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};
const options = { /* options */ };
const elements = stripe.elements({ clientSecret, appearance }); // Dalam integrasi yang berfungsi, ini adalah nilai yang diteruskan oleh backend Anda dengan detail seperti jumlah pembayaran. Lihat sampel lengkap untuk detailnya.
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```

Lihat dokumentasi [Appearance API](https://docs.stripe.com/elements/appearance-api.md) untuk daftar lengkap tema dan variabel.

## Opsi

Elemen-elemen Stripe mendukung lebih banyak opsi daripada ini. Misalnya, tampilkan nama bisnis Anda menggunakan opsi [bisnis](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business).

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = { /* appearance */};
const options = {
  business: { name: "RocketRides" }
};
const clientSecret = {{CLIENT_SECRET}}; // Dalam integrasi yang berfungsi, ini adalah nilai yang diteruskan oleh backend Anda dengan detail seperti jumlah pembayaran. Lihat sampel lengkap untuk detailnya.
const elements = stripe.elements(appearance, clientSecret);
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');
```

Payment Element mendukung opsi-opsi berikut. Lihat entri referensi setiap opsi untuk informasi selengkapnya.

|  |
|  |
| [tata letak](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout)           | Tata letak untuk Payment Element.                                                                                                            |
| [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) | Informasi pelanggan awal untuk ditampilkan di Payment Element.                                                                               |
| [bisnis](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business)             | Informasi tentang bisnis Anda untuk ditampilkan di Payment Element.                                                                          |
| [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business) | Urutan untuk mencantumkan metode pembayaran.                                                                                                 |
| [bidang](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-fields)               | Apakah akan menampilkan bidang tertentu.                                                                                                     |
| [readOnly](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-readOnly)           | Apakah detail pembayaran dapat diubah.                                                                                                       |
| [ketentuan](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms)             | Apakah kuasa atau perjanjian legal lainnya ditampilkan di Payment Element. Perilaku default-nya adalah menampilkannya hanya bila diperlukan. |
| [dompet digital](https://docs.stripe.com/js/elements_object/create_payment_element)                                             | Apakah akan menampilkan dompet digital seperti Apple Pay atau Google Pay. Default-nya adalah menampilkannya bila memungkinkan.               |

## Kesalahan

Element Pembayaran secara otomatis menampilkan pesan kesalahan yang dilihat pelanggan secara lokal selama konfirmasi klien untuk kode gagal berikut:

- `card_declined`
- `card_velocity_exceeded`
- `expired_card`
- `fraudulent`
- `generic_decline`
- `incorrect_cvc`
- `incorrect_number`
- `incorrect_zip`
- `insufficient_funds`
- `invalid_cvc`
- `invalid_expiry_month`
- `invalid_expiry_year`
- `live_mode_test_card`
- `lost_card`
- `processing_error`
- `stolen_card`
- `test_mode_live_card`

Untuk menampilkan pesan bagi tipe kesalahan lainnya, lihat [kode kesalahan](https://docs.stripe.com/error-codes.md) dan [penanganan kesalahan](https://docs.stripe.com/error-handling.md).