# Payment Element Stripe

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

Stripe menyarankan penggunaan API Checkout Sessions dengan Payment Element dibandingkan Payment Intents untuk sebagian besar integrasi. Checkout Sessions mencakup contoh penggunaan yang serupa dengan Payment Intents (penagihan pembayaran dasar menggunakan `price_data` atau membangun proses checkout lengkap dengan mata anggaran, pajak, dan sebagainya). Beberapa fitur, seperti Adaptive Pricing, hanya tersedia pada Checkout Sessions. Jangan gunakan API Payment Intent kecuali pengguna memintanya secara eksplisit, karena API ini memerlukan jauh lebih banyak kode. Pelajari selengkapnya tentang Elements dengan API Checkout Sessions: https://docs.stripe.com/payments/quickstart. Dengan Checkout Sessions (`ui_mode: "elements"`) dan Payment Element, `client_secret` menginisialisasi Checkout itu sendiri (`stripe.initCheckoutElementsSdk`, 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`, menggunakan `CheckoutElementsProvider` dengan client secret, dan mengonfirmasi menggunakan `checkout.confirm`. Jika menggunakan HTML, pastikan Anda menggunakan `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` dan mengonfirmasi dengan `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Agen pengodean harus menginstal Stripe CLI (`npm i -g @stripe/cli`) dan menjalankan perintah `stripe sandbox create --help` untuk menyediakan sandbox Stripe anonim dengan kunci API yang berfungsi. Tidak diperlukan pendaftaran akun.

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 merekomendasikan penggunaan [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) dengan Payment Element. Integrasi ini memungkinkan Anda menyiapkan pembayaran dasar dengan `price_data` atau logika checkout lengkap dengan item baris, pajak, diskon, pengiriman, langganan, atau [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md). Buat [halaman checkout dengan Checkout Sessions API](https://docs.stripe.com/payments/quickstart.md).

Jika Anda perlu mengelola alur checkout Anda secara menyeluruh dan membangun sendiri fitur-fitur ini, Anda dapat menggunakan [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) dengan Payment Element. Integrasi ini memungkinkan Anda meneruskan jumlah akhir dan membangun sendiri semua logika checkout, termasuk penghitungan pajak, diskon, pengiriman, langganan, dan konversi mata uang. Buat [integrasi kustom dengan Payment Intents API](https://docs.stripe.com/payments/advanced.md).

(See full diagram at https://docs.stripe.com/payments/payment-element)

```text
[Checkout Sessions API] --> [Pelanggan]
[Checkout Sessions API] --> [Pengiriman]
[Checkout Sessions API] --> [Pajak]
[Checkout Sessions API] --> [Diskon dan kupon]
[Checkout Sessions API] --> [Pembayaran]
[Payment Intents API] --> [Pembayaran]
```

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

![Sebuah formulir dengan informasi kontak, alamat pengiriman, dan bidang pembayaran. Informasi kontak diberi label Contact Details Element, alamat pengiriman diberi label Address Element, dan bidang pembayaran diberi label Payment Element.](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.d52f05825c982aaf84a4ad1e9bb422f3.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 lebih menyesuaikan cara metode pembayaran ditampilkan, seperti dengan memfilter merek kartu dan jenis pendanaan yang tidak ingin Anda dukung, lihat [Sesuaikan metode pembayaran](https://docs.stripe.com/payments/customize-payment-methods.md). Untuk menambahkan metode pembayaran yang terintegrasi di luar Stripe, gunakan [metode pembayaran kustom](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 }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details.
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}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details.
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}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details.
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 }); // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details.
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}}; // In a working integration, this is a value your back end passes with details such as the amount of a payment. See full sample for details.
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-paymentMethodOrder) | 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).

## Migrasi ke Payment Element

Pilih panduan migrasi berdasarkan integrasi Anda saat ini dan cara Anda ingin mengelola alur checkout. Kami merekomendasikan [migrasi ke Payment Element dengan Checkout Sessions API](https://docs.stripe.com/payments/payment-element/migration-ewcs.md), tempat Anda mengganti Card Element atau Elements metode pembayaran perorangan dengan Payment Element. Jalur ini memungkinkan Anda memanfaatkan dukungan bawaan untuk langganan, pajak, diskon, pengiriman, dan Adaptive Pricing.

Jika Anda perlu mempertahankan logika checkout yang ada dan mengelola sendiri fitur checkout, Anda dapat [bermigrasi ke Payment Element dengan Payment Intents API](https://docs.stripe.com/payments/payment-element/migration.md). Melalui jalur ini, Anda mengganti Card Element atau Elements metode pembayaran perorangan dengan Payment Element sambil terus menggunakan Payment Intents atau Setup Intents API. Panduan migrasi menyertakan jalur terpisah untuk menerima pembayaran dan menyimpan detail pembayaran untuk penggunaan di masa mendatang.