# Sesuaikan perilaku pengalihan Tampilkan halaman konfirmasi dengan informasi pesanan pelanggan Anda. # Halaman yang di-hosting > This is a Halaman yang di-hosting for when payment-ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/checkout/custom-success-page?payment-ui=stripe-hosted. Jika platform Connect Anda menggunakan [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), gunakan [panduan](https://docs.stripe.com/connect/use-accounts-as-customers.md) kami untuk mengganti referensi `Customer` dan kejadian dalam kode Anda dengan referensi Accounts v2 API yang setara. Jika Anda memiliki integrasi Checkout yang menggunakan halaman yang dihosting, Stripe mengarahkan pelanggan Anda ke halaman sukses yang Anda buat dan hosting di situs Anda. Anda dapat menggunakan detail dari [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions.md) untuk menampilkan halaman konfirmasi pesanan untuk pelanggan Anda (misalnya, nama atau jumlah pembayaran) setelah pembayaran. ## Alihkan pelanggan ke halaman berhasil. Untuk menggunakan detail dari Sesi Checkout: 1. Ubah [success_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-success_url) untuk meneruskan Identifikasi Sesi Checkout ke sisi client. 1. Cari Sesi Checkout menggunakan identifikasi di halaman berhasil Anda. 1. Gunakan Sesi Checkout untuk menyesuaikan apa yang ditampilkan di halaman berhasil Anda. > #### Webhook diwajibkan untuk proses pemenuhan. > > Anda tidak dapat sepenuhnya mengandalkan pemicu pemenuhan dari halaman checkout Anda, karena tidak ada jaminan bahwa pelanggan akan mengakses halaman tersebut. Sebagai contoh, pelanggan mungkin berhasil melakukan pembayaran namun kehilangan koneksi internet sebelum halaman checkout Anda selesai dimuat. > > [Siapkan penanganan peristiwa webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted#create-payment-event-handler) sehingga Stripe dapat mengirimkan peristiwa pembayaran secara langsung ke server Anda, tanpa melalui sisi client. Webhook menyediakan metode yang paling andal untuk mengonfirmasi kapan pembayaran telah diterima. Apabila pengiriman peristiwa webhook gagal, Stripe [akan mencoba ulang beberapa kali](https://docs.stripe.com/webhooks.md#automatic-retries). ## Ubah URL berhasil (Server-side) Tambahkan `{CHECKOUT_SESSION_ID}` templat variabel ke `success_url` saat Anda membuat Sesi Checkout. Perhatikan bahwa ini adalah string literal dan harus ditambahkan persis seperti yang Anda lihat di sini. Jangan menggantinya dengan ID Sesi Checkout—ini terjadi secara otomatis setelah pelanggan Anda membayar dan diarahkan ke halaman keberhasilan. #### Ruby ```ruby session = Stripe::Checkout::Session.create(success_url: "http://yoursite.com/order/success?session_id={CHECKOUT_SESSION_ID}", # other options..., ) ``` ## Buat halaman berhasil (Server-side) Cari Sesi Checkout menggunakan identifikasi dan buat halaman berhasil untuk menampilkan informasi pesanan. Contoh ini mencetak nama pelanggan: #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key = '<>' require 'sinatra' get '/order/success' dosession = Stripe::Checkout::Session.retrieve(params[:session_id]) customer = Stripe::Customer.retrieve(session.customer) "

Thanks for your order, #{customer.name}!

" end ``` ## Coba integrasi Untuk mengonfirmasi bahwa pengalihan Anda berfungsi sesuai perkiraan: 1. Klik tombol checkout. 1. Isi nama pelanggan dan detail pembayaran lainnya. 1. Klik **Bayar**. Jika berhasil, Anda akan dialihkan ke halaman berhasil dengan pesan custom. Sebagai contoh, jika Anda menggunakan pesan dalam sampel kode, halaman berhasil akan menampilkan pesan ini: **Terima kasih atas pesanan Anda, Jenny Rosen! # Halaman tersemat > This is a Halaman tersemat for when payment-ui is embedded-form. View the full page at https://docs.stripe.com/payments/checkout/custom-success-page?payment-ui=embedded-form. Jika platform Connect Anda menggunakan [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), gunakan [panduan](https://docs.stripe.com/connect/use-accounts-as-customers.md) kami untuk mengganti referensi `Customer` dan kejadian dalam kode Anda dengan referensi Accounts v2 API yang setara. Jika memiliki integrasi Checkout yang menggunakan formulir tersemat, Anda dapat menyesuaikan cara dan apakah Stripe mengalihkan pelanggan setelah mereka menyelesaikan pembayaran. Anda dapat meminta Stripe selalu mengalihkan pelanggan, hanya mengalihkan untuk sejumlah metode pembayaran, atau sepenuhnya menonaktifkan pengalihan. Untuk menyiapkan pengalihan, tentukan halaman kembali di [parameter](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Atau, Anda dapat: - [Hanya mengalihkan pelanggan jika metode pembayaran memerlukannya](https://docs.stripe.com/payments/checkout/custom-success-page.md#redirect-if-required) (misalnya, halaman otorisasi bank untuk metode berbasis debit). - Tidak menggunakan halaman pengembalian dan [menonaktifkan metode pembayaran berbasis pengalihan](https://docs.stripe.com/payments/checkout/custom-success-page.md#disable-redirects). > #### Webhook diwajibkan untuk proses pemenuhan. > > Anda tidak dapat sepenuhnya mengandalkan pemicu pemenuhan dari halaman checkout Anda, karena tidak ada jaminan bahwa pelanggan akan mengakses halaman tersebut. Sebagai contoh, pelanggan mungkin berhasil melakukan pembayaran namun kehilangan koneksi internet sebelum halaman checkout Anda selesai dimuat. > > [Siapkan penanganan peristiwa webhook](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-form#create-payment-event-handler) sehingga Stripe dapat mengirimkan peristiwa pembayaran secara langsung ke server Anda, tanpa melalui sisi client. Webhook menyediakan metode yang paling andal untuk mengonfirmasi kapan pembayaran telah diterima. Apabila pengiriman peristiwa webhook gagal, Stripe [akan mencoba ulang beberapa kali](https://docs.stripe.com/webhooks.md#automatic-retries). ## Alihkan pelanggan ke halaman pengembalian Saat membuat [Sesi Checkout](https://docs.stripe.com/api/checkout/sessions.md), Anda menentukan URL halaman pengembalian di [parameter](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) `return_url`. Sertakan variabel templat `{CHECKOUT_SESSION_ID}` di URL. Saat mengalihkan pelanggan, Checkout mengganti variabel dengan Identifikasi Sesi Checkout sebenarnya. Ketika menampilkan halaman pengembalian Anda, ambil status Sesi Checkout dengan Identifikasi Sesi Checkout di URL. ```javascript app.get('/session_status', async (req, res) => { const session = await stripe.checkout.sessions.retrieve(req.query.session_id); const customer = await stripe.customers.retrieve(session.customer); res.send({ status: session.status, payment_status: session.payment_status, customer_email: customer.email }); }); ``` Tangani hasilnya sesuai dengan status sesi sebagai berikut: - `complete`: Pembayaran berhasil. Gunakan informasi dari Sesi Checkout untuk menampilkan halaman berhasil. - `open`: Pembayaran gagal atau dibatalkan. Pasang ulang Checkout agar pelanggan Anda dapat mencoba lagi. ```javascript const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page } ``` ## Metode pembayaran berbasis pengalihan Selama pembayaran, sejumlah metode pembayaran mengalihkan pelanggan ke halaman perantara, seperti halaman otorisasi bank. Saat mereka menyelesaikan halaman tersebut, Stripe mengalihkan mereka ke halaman pengembalian. ### Hanya mengalihkan untuk metode pembayaran berbasis pengalihan Jika Anda tidak ingin mengalihkan pelanggan setelah pembayaran yang tidak memerlukan pengalihan, atur [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) ke `if_required`. Hal itu mengalihkan hanya pelanggan yang memproses pembayaran dengan metode pembayaran berbasis pengalihan. Untuk pembayaran kartu, Checkout menampilkan status berhasil default, bukan pengalihan. Untuk menggunakan status berhasil sendiri, teruskan callback [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) yang akan menghancurkan instance Checkout dan menampilkan status berhasil Custom Anda. `onComplete` dipanggil bila Sesi Checkout Session berhasil diselesaikan, atau bila kejadian webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) dikirim. #### HTML+JS ```javascript const stripe = Stripe('<>'); initialize(); async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Example `onComplete` callback const handleComplete = async function() { // Destroy Checkout instance checkout.destroy() // Retrieve details from server (which loads Checkout Session) const details = await retrievePurchaseDetails(); // Show custom purchase summary showPurchaseSummary(details); } const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### React ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ``` ### Nonaktifkan metode pembayaran berbasis pengalihan Jika Anda tidak ingin membuat halaman pengembalian, buat Sesi Checkout dengan [redirect_on_completion](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-redirect_on_completion) yang diatur ke `never`. Ini menonaktifkan metode pembayaran berbasis pengalihan: - Jika menggunakan [Metode pembayaran dinamis](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), Anda tetap dapat mengelola metode pembayaran dari Dashboard, tetapi metode pembayaran yang memerlukan pengalihan tidak memenuhi syarat. - Jika menentukan metode pembayaran secara manual dengan [payment_method_types](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-payment_method_types), Anda tidak dapat menyertakan metode pembayaran berbasis pengalihan. Mengatur `redirect_on_completion: never` menghapus persyaratan `return_url`. Untuk sesi ini, Checkout akan merender status berhasil default alih-alih pengalihan. Untuk sesi ini, Anda dapat menggunakan status berhasil [onComplete](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-onComplete) callback yang menghancurkan instance Checkout dan menampilkan status sukses kustom Anda. `onComplete` dipanggil bila Sesi Checkout Session berhasil diselesaikan, atau bila kejadian webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) dikirim. #### HTML+JS ```javascript const stripe = Stripe('<>'); initialize(); async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Example `onComplete` callback const handleComplete = async function() { // Destroy Checkout instance checkout.destroy() // Retrieve details from server (which loads Checkout Session) const details = await retrievePurchaseDetails(); // Show custom purchase summary showPurchaseSummary(details); } const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, onComplete: handleComplete }); checkout.mount('#checkout'); } ``` #### React ```jsx const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; const [isComplete, setIsComplete] = useState(false); const handleComplete = () => setIsComplete(true); return isComplete ? ( ) : ( ) } ```