# Stripe Web Elements

Buat alur checkout Anda sendiri dengan komponen UI siap-rakit.

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

[Stripe Elements](https://stripe.com/payments/elements) adalah satu set komponen UI siap-rakit untuk membangun alur web Anda. Ini tersedia sebagai fitur [Stripe.js](https://docs.stripe.com/js.md), pustaka dasar JavaScript kami untuk membangun alur pembayaran. Stripe.js membuat token detail pembayaran sensitif dalam satu Element tanpa pernah berinteraksi dengan server Anda.

- [Metode pembayaran global](https://docs.stripe.com/payments/payment-methods/overview.md): Akses ke lebih dari 100 metode pembayaran global, termasuk dompet digital, seperti [Apple Pay](https://docs.stripe.com/apple-pay.md).

- [](https://docs.stripe.com/payments/link.md): Bantu pelanggan Anda memproses pembayaran lebih cepat dengan membiarkan mereka memilih metode pembayaran yang disimpan saat checkout, bukan memasukkan informasi pembayaran.

- [Metode pembayaran tersimpan](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components): Simpan, gunakan kembali, serta kelola kartu dan rekening bank dengan fitur bawaan.

- Kepatuhan: Stripe menyediakan antarmuka yang kompatibel secara global dan menangani persyaratan untuk menampilkan mandat dan pemberitahuan persetujuan kepada pembeli.

- Formulir terbaru: Formulir yang dilokalkan dengan penanganan kesalahan bawaan. Stripe terus memperbarui persyaratan setiap penyedia metode pembayaran.

- [Pengumpulan alamat](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components): Kumpulkan alamat tagihan sepenuhnya atau sebagian dengan segala metode pembayaran.

- [Penyesuaian penampilan](https://docs.stripe.com/elements/appearance-api.md): Sesuaikan tampilan dan nuansa Elements agar sesuai dengan desain situs Anda.

- Fitur lainnya: Fitur tambahan, seperti [CVC recollection](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection) dan [kontrol atas brand kartu yang Anda terima](https://docs.stripe.com/payments/customize-payment-methods.md#filter-card-brands).

Jelajahi demo



## Mulai

Jika Anda tidak melihat Element di bawah ini, temukan selengkapnya di [Referensi API Stripe.js](https://docs.stripe.com/js/element/other_element).

[Payment Element](https://docs.stripe.com/payments/payment-element.md): Terima pembayaran dengan satu atau beberapa metode pembayaran secara aman, termasuk kartu.

[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Tampilkan Dompet digital populer seperti Apple Pay, Google Pay, dan PayPal.

[Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience.

[Address Element](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses.

[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): Secara otomatis memberi tahu pelanggan tentang paket Beli sekarang, Bayar nanti yang tersedia.

[Currency Selector Element (Hanya Checkout Session API)](https://docs.stripe.com/elements/currency-selector-element.md): Mungkinkan pelanggan membayar dalam mata uang lokal dengan Adaptive Pricing.

[Elemen ID Pajak](https://docs.stripe.com/elements/tax-id-element.md): Kumpulkan ID pajak bisnis untuk invoice dan pengembalian dana PPn.

## 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/elements)