# Terima pembayaran

Terima pembayaran dengan aman secara online.

## Mulai di sini: Instal keterampilan agen

Stripe merekomendasikan penggunaan keterampilan resmi untuk berintegrasi dengan API menggunakan praktik terbaik. Ikuti petunjuk di bawah ini untuk mempelajari caranya.

**Tips: Gunakan curl alih-alih alat Fetch.** Keterampilan adalah file markdown 10–20 KB yang terperinci. Alat Fetch meringkasnya. `curl -sL` menjamin konten lengkap.

**Menggunakan `npx skills`**: Periksa apakah `npx` terinstal pada sistem. Jika `npx` tersedia, jalankan `npx skills add https://docs.stripe.com --list` untuk melihat daftar keterampilan yang tersedia, lalu jalankan `npx skills add https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` untuk menginstal keterampilan individu.

**Jika `npx skills` tidak tersedia**: Anda dapat menggunakan curl untuk mengambil indeks keterampilan yang tersedia, fungsinya, serta filenya dari `https://docs.stripe.com/.well-known/skills/index.json`… Untuk mengunduh keterampilan dan file terkait, gunakan curl untuk mengunduhnya dari `https://docs.stripe.com/.well-known/skills/<filepath>`…

Untuk artikel ini, kami menyarankan penggunaan keterampilan berikut: `stripe-best-practices`

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

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.

Buat formulir pembayaran atau gunakan halaman checkout yang telah dibuat sebelumnya untuk mulai menerima pembayaran online.

# Payment Intents API


Buat formulir pembayaran kustom menggunakan [Stripe Elements](https://docs.stripe.com/payments/elements.md) dan [Payment Intents API](https://docs.stripe.com/api/payment_intents.md). Lihat bagaimana integrasi ini [dibandingkan dengan tipe integrasi Stripe lainnya](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

Payment Intents API adalah API tingkat rendah yang dapat Anda gunakan untuk membuat alur checkout atau pembayaran Anda sendiri, tetapi memerlukan lebih banyak kode dan pemeliharaan berkelanjutan yang signifikan. Kami merekomendasikan [Payment Element dengan Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) untuk sebagian besar integrasi karena mencakup alur pembayaran yang serupa dengan Payment Intents. Pelajari lebih lanjut tentang [kapan harus menggunakan Checkout Sessions, bukan PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Kode sisi client dan sisi server membuat formulir checkout yang menerima berbagai metode pembayaran.

#### Upaya integrasi
Complexity: 4/5
#### Tipe integrasi

Gabungkan komponen UI ke dalam alur pembayaran custom

#### Penyesuaian UI

Penyesuaian tingkat CSS dengan [Appearance API](https://docs.stripe.com/elements/appearance-api.md)

> #### Tertarik menggunakan Stripe Tax, diskon, pengiriman, atau konversi mata uang?
> 
> Stripe memiliki integrasi Payment Element yang mengelola pajak, diskon, pengiriman, dan konversi mata uang. Lihat [buat halaman checkout](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) untuk mempelajari lebih lanjut.

## Siapkan Stripe [Sisi server]

Pertama, [buat akun Stripe](https://dashboard.stripe.com/register) atau [masuk](https://dashboard.stripe.com/login).

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.

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

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

Objek [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) mewakili maksud Anda menagih pembayaran dari pelanggan dan melacak upaya charge dan perubahan status selama proses pembayaran.
Gambaran umum tingkat tinggi tentang integrasi pembayaran yang dijelaskan dalam dokumen ini. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Buat PaymentIntent

Buat PaymentIntent pada server Anda dengan [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) dan [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). Di versi terbaru API, menentukan parameter `automatic_payment_methods` bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default. 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.

Stripe menggunakan [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) Anda untuk menampilkan metode pembayaran yang telah Anda aktifkan. Untuk melihat bagaimana metode pembayaran Anda muncul bagi pelanggan, masukkan ID transaksi atau atur jumlah pesanan dan mata uang di [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Untuk mengesampingkan metode pembayaran, cantumkan secara manual metode apa pun yang ingin Anda aktifkan menggunakan atribut [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

```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"
```

> Selalu putuskan berapa banyak yang akan di-charge di sisi server, lingkungan tepercaya, bukan di klien. Ini mencegah pelanggan yang berniat jahat untuk dapat memilih harga mereka sendiri.

### Ambil client secret

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

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

## Kumpulkan detail pembayaran [Sisi client]

Kumpulkan 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 mengirimkan informasi pembayaran dengan aman ke Stripe melalui koneksi HTTPS. Hindari penempatan Payment Element dalam iframe lain karena sejumlah metode pembayaran memerlukan pengalihan ke halaman lain untuk konfirmasi pembayaran.

Jika Anda memilih untuk menggunakan iframe dan ingin menerima Apple Pay atau Google Pay, iframe harus memiliki atribut [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) yang ditetapkan ke `"payment *"` setara.

Alamat halaman checkout harus dimulai dengan `https://` rather daripada `http://` for integrasi Anda untuk bekerja. Anda dapat menguji integrasi tanpa menggunakan HTTPS, tetapi jangan lupa [mengaktifkannya](https://docs.stripe.com/security/guide.md#tls) saat Anda siap menerima pembayaran langsung.

#### HTML + JS

### Siapkan Stripe.js

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

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

Tangani client secret dengan hati-hati karena dapat menyelesaikan charge. Jangan mencatatnya, menyematkannya di URL, atau memaparkannya kepada siapa pun kecuali pelanggan.

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

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);

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

```

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

Untuk menggunakan komponen Payment Element, bungkus komponen halaman checkout 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/payment_intents/object.md#payment_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 CheckoutForm from './CheckoutForm';

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

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

export default CheckoutForm;
```

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

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

### Minta token merchant Apple Pay

Jika Anda telah mengonfigurasi integrasi untuk [menerima pembayaran Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), sebaiknya konfigurasikan antarmuka Apple Pay untuk mengembalikan token merchant guna mengaktifkan transaksi yang diinisiasi merchant (MIT). [Minta jenis token merchant yang relevan](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) di Elemen Pembayaran.

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

Saat membuat [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) di server Anda, buat juga [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) dengan memberikan ID pelanggan (menggunakan `customer` untuk objek `Customer` atau `customer_account` untuk objek `Account` yang dikonfigurasi untuk pelanggan) serta 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) metode pembayaran tersimpan mana yang ingin Anda aktifkan. Misalnya, 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 menawarkan pelanggan untuk menyimpan detail pembayaran mereka agar dapat digunakan 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 Accounts v2 sudah tersedia secara umum bagi pengguna Connect, dan dalam tahap pratinjau publik bagi pengguna Stripe lainnya. Jika Anda merupakan bagian dari program pratinjau Accounts v2, Anda wajib menentukan [versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) di dalam kode.
> 
> Untuk meminta akses ke pratinjau Akun v2, 
> 
> Untuk sebagian besar contoh penggunaan, sebaiknya Anda [memodelkan pelanggan Anda sebagai objek Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) alih-alih menggunakan objek [Pelanggan](https://docs.stripe.com/api/customers.md).

#### 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.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    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.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    # 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 PaymentIntent 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 PaymentIntent, Stripe.js secara otomatis mengontrol pengaturan [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) pada PaymentIntent dan [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.

### Terapkan pengumpulan kembali CVC

Secara opsional, tentukan `require_cvc_recollection` [ketika membuat PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) untuk memberlakukan pengumpulan kembali CVC saat pelanggan membayar dengan kartu.

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

## 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).
![Autentikasi atau daftarkan dengan Link langsung di Payment Element saat checkout](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Kumpulkan 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: Ambil pembaruan dari server [Sisi client]

Anda sebaiknya memperbarui atribut pada PaymentIntent setelah menampilkan Payment Element, seperti [amount](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (misalnya, kode diskon atau biaya pengiriman). Anda dapat [memperbarui PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) di server, kemudian panggil [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) untuk melihat jumlah baru yang tercermin di Payment Element. Contoh ini menunjukkan kepada Anda cara membuat endpoint server yang memperbarui jumlah pada PaymentIntent:

#### 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>>')
get '/update' do
  intent = client.v1.payment_intents.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end
```

Contoh ini memperagakan cara memperbarui UI untuk mencerminkan perubahan ini pada sisi client:

```javascript
(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();
```

## Serahkan pembayaran ke Stripe [Sisi client]

Gunakan [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) untuk menyelesaikan pembayaran menggunakan detail dari Payment Element. Berikan [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) ke fungsi ini untuk menunjukkan ke mana Stripe harus mengalihkan pengguna setelah menyelesaikan pembayaran. Pengguna Anda mungkin pertama kali diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum diarahkan ulang ke `return_url`. Pembayaran kartu segera dialihkan ke `return_url` bila pembayaran berhasil.

Jika tidak ingin dialihkan untuk pembayaran kartu setelah pembayaran selesai, Anda dapat mengatur [pengalihan](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_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.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    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`.
  }
});
```

#### React

Untuk memanggil [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) 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 CheckoutForm = () => {
  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;
    }
const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      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)
      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 CheckoutForm;
```

Pastikan `return_url` sesuai dengan halaman pada situs web Anda yang menyediakan status pembayaran. Bila Stripe mengarahkan ulang pelanggan ke `return_url`, kami menyediakan parameter query URL berikut ini:

| Parameter                      | Keterangan                                                                                                                             |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | Identifier unik untuk `PaymentIntent`.                                                                                                 |
| `payment_intent_client_secret` | [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dari objek `PaymentIntent`. |

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

Gunakan salah satu parameter query untuk mengambil PaymentIntent. Periksa [status PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) untuk memutuskan apa yang akan ditampilkan kepada pelanggan Anda. Anda juga dapat menambahkan parameter query Anda sendiri saat memberikan `return_url`, yang akan tetap ada selama proses pengalihan.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

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

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `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 (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

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

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `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 (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## Tangani kejadian pascapembayaran [Sisi server]

Stripe mengirim kejadian [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) ketika selesai pembayaran. Gunakan [alat webhook Dashboard](https://dashboard.stripe.com/webhooks) atau ikuti [panduan webhook](https://docs.stripe.com/webhooks/quickstart.md) untuk menerima kejadian ini dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.

Dengarkan kejadian ini daripada menunggu callback dari client. Di client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi, dan klien jahat dapat memanipulasi respons. Penyiapan integrasi untuk mendengarkan kejadian asinkron memungkinkan Anda menyetujui [berbagai tipe metode pembayaran](https://stripe.com/payments/payment-methods-guide) dengan satu integrasi tunggal.

Selain menangani kejadian `payment_intent.succeeded`, kami merekomendasikan penanganan kejadian ini yang lain ketika menagih pembayaran dengan Payment Element:

| Kejadian                                                                                                                        | Keterangan                                                                                                                                                                                                                                                                                 | Tindakan                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Dikirim bila pelanggan berhasil menyelesaikan pembayaran.                                                                                                                                                                                                                                  | Kirimi pelanggan konfirmasi pesanan dan *penuhi* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) pesanan mereka.     |
| [payment_intent. pemrosesan](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)        | Dikirim bila pelanggan berhasil memprakarsai pembayaran, tetapi pembayaran itu belum selesai. Kejadian ini paling umum dikirim saat pelanggan memprakarsai debit bank. Kejadian diikuti dengan kejadian `payment_intent.succeeded` atau `payment_intent.payment_failed` di masa mendatang. | Kirimi pelanggan konfirmasi pesanan yang menunjukkan bahwa pembayaran mereka menunggu penyelesaian. Untuk barang digital, Anda mungkin ingin memenuhi pesanan sebelum menunggu pembayaran selesai. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Dikirim bila pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal.                                                                                                                                                                                                          | Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan.                                                                |

## Coba integrasi Anda

Untuk mencoba integrasi pembayaran custom Anda:

1. Buat Payment Intent dan ambil client secret.
2. Isilah detail pembayaran dengan metode dari tabel berikut.
   - Masukkan tanggal mendatang untuk tanggal kedaluwarsa kartu.
   - Masukkan nomor 3 angka untuk CVC.
   - Masukkan kode pos tagihan.
3. Serahkan pembayaran ke Stripe. Anda dialihkan ke `return_url`.
4. Masuk ke Dashboard dan cari pembayaran pada [halaman Transaksi](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Jika pembayaran berhasil, Anda akan melihatnya dalam daftar tersebut.
5. Klik pembayaran Anda untuk melihat detail selengkapnya, seperti informasi tagihan dan daftar barang yang dibeli. Anda dapat menggunakan informasi ini untuk memenuhi pesanan.

Pelajari selengkapnya tentang [percobaan integrasi Anda](https://docs.stripe.com/testing.md).

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu 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 dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Dompet

| Metode pembayaran | Skenario                                                                                                                                                                                           | Cara mencoba                                                                                                                                                                                             |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi segera](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang. | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang. |

#### Pengarahan ulang bank

| Metode pembayaran                      | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                              |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung BECS                    | Pelanggan Anda berhasil membayar dengan Debit Langsung BECS.                                                                                                                                              | Isi formulir menggunakan nomor akun `900123456` dan BSB `000000`. PaymentIntent yang telah dikonfirmasi awalnya akan berstatus `processing`, kemudian berubah menjadi status `succeeded` setelah 3 menit. |
| Debit Langsung BECS                    | Pembayaran pelanggan Anda gagal dengan kode kesalahan `account_closed`.                                                                                                                                   | Isi formulir menggunakan nomor akun `111111113` dan BSB `000000`.                                                                                                                                         |
| Bancontact, EPS, iDEAL, dan Przelewy24 | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.    |
| Pay by Bank                            | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                      |
| Pay by Bank                            | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                        |
| BLIK                                   | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                |

#### Debit bank

| Metode pembayaran   | Skenario                                                                                         | Cara mencoba                                                                                                                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Debit Langsung SEPA | Pelanggan Anda berhasil membayar dengan Debit Langsung SEPA.                                     | Isilah formulir menggunakan nomor akun `AT321904300235473204`. Transisi PaymentIntent yang telah dikonfirmasi awalnya menjadi sedang diproses, kemudian akan berubah menjadi status berhasil setelah tiga menit kemudian. |
| Debit Langsung SEPA | Transisi status maksud pembayaran pelanggan dari `processing` menjadi `requires_payment_method`. | Isilah formulir menggunakan nomor akun `AT861904300235473202`.                                                                                                                                                            |

#### Voucher

| Metode pembayaran | Skenario                                                 | Cara mencoba                                                                                           |
| ----------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Boleto, OXXO      | Pelanggan Anda membayar dengan voucher OXXO atau Boleto. | Pilih Boleto atau OXXO sebagai metode pembayaran dan serahkan pembayaran. Tutup dialog setelah muncul. |

Lihat [Pengujian](https://docs.stripe.com/testing.md) untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.

## Optional: Tambahkan metode pembayaran lainnya

Payment Element [mendukung banyak metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) secara default. Anda harus mengambil langkah tambahan untuk mengaktifkan dan menampilkan sebagian metode pembayaran.

### Affirm

Untuk mulai menggunakan Affirm, Anda harus mengaktifkannya di [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Saat membuat PaymentIntent dengan metode pembayaran Affirm, Anda perlu menyertakan [alamat pengiriman](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Contoh ini menyarankan penerusan informasi pengiriman pada client setelah pelanggan [memilih metode pembayaran mereka](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Pelajari selengkapnya tentang penggunaan [Affirm](https://docs.stripe.com/payments/affirm.md) dengan Stripe.

#### HTML + JS

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

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

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US'
        }
      },

    }
  });

  if (error) {
    // This point is reached if there's 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 is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

```jsx

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  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;
    }

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://my-site.com/order/123/complete',shipping: {
          name: 'Jenny Rosen',
          address: {
            line1: '1 Street',
            city: 'Seattle',
            state: 'WA',
            postal_code: '95123',
            country: 'US'
          }
        },

      }
    });


    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 CheckoutForm;
```

#### Coba Affirm

Pelajari cara menguji berbagai skenario menggunakan tabel berikut:

| Skenario                                                                 | Cara mencoba                                                                               |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| Pelanggan Anda berhasil membayar dengan Affirm.                          | Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran. |
| Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Affirm. | Isi formulir dan klik **Percobaan pembayaran gagal** pada halaman pengarahan ulang.        |

### Afterpay (Clearpay)

Saat membuat PaymentIntent dengan metode pembayaran Afterpay, Anda perlu menyertakan [alamat pengiriman](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Pelajari selengkapnya tentang penggunaan [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) dengan Stripe.

Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe secara otomatis menampilkan metode pembayaran yang tersedia berdasarkan faktor seperti nominal transaksi, mata uang, dan alur pembayaran. Pada versi API terbaru, pengisian parameter `automatic_payment_methods` bersifat opsional karena Stripe sudah mengaktifkan fungsionalitas ini secara default. Pastikan Anda telah mengaktifkan Afterpay / Clearpay di [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```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 "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

#### Coba Afterpay (Clearpay)

Pelajari cara menguji berbagai skenario menggunakan tabel berikut:

| Skenario                                                                   | Cara mencoba                                                                               |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| Pelanggan Anda berhasil membayar dengan Afterpay.                          | Isi formulir (pastikan untuk menyertakan alamat pengiriman) dan autentikasikan pembayaran. |
| Pelanggan Anda gagal mengautentikasi di halaman pengarahan ulang Afterpay. | Isi formulir dan klik **Percobaan pembayaran gagal** pada halaman pengarahan ulang.        |

### Apple Pay dan Google Pay

Saat Anda [mengaktifkan pembayaran kartu](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), kami menampilkan Apple Pay dan Google Pay untuk pelanggan yang lingkungannya memenuhi [ketentuan tampilan dompet digital](https://docs.stripe.com/testing/wallets.md). Untuk terima pembayaran dari dompet digital ini, Anda juga harus:

- Aktifkan di [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods). Apple Pay diaktifkan secara default.
- Sajikan aplikasi Anda melalui HTTPS dalam pengembangan dan produksi.
- [Daftarkan domain Anda](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- [Mendapatkan pembaruan dari server](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) jika Anda memperbarui jumlah [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) agar modal pembayaran dompet digital tetap sinkron.

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

Pelajari selengkapnya tentang penggunaan [Apple Pay](https://docs.stripe.com/apple-pay.md) dan [Google Pay](https://docs.stripe.com/google-pay.md) dengan Stripe.

### ACH Direct Debit

Saat menggunakan Payment Element dengan metode pembayaran ACH Direct Debit, ikuti langkah-langkah ini:

1. Membuat file yang dikonfigurasi pelanggan objek [Akun](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) atau objek [Pelanggan](https://docs.stripe.com/api/customers/create.md) untuk mewakili pelanggan Anda.

#### Akun v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-05-27.preview" \
  --json '{
    "configuration": {
        "customer": {}
    }
  }'
```

#### Pelanggan v1

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

1. Tentukan ID pelanggan saat membuat `PaymentIntent`.

   #### 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 setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}"
   ```

   #### 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 setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}"
   ```

2. Pilih [metode verifikasi](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method).

Saat menggunakan metode pembayaran ACH Direct Debit dengan Payment Element, Anda hanya dapat memilih `automatic` atau `instant`.

Pelajari selengkapnya tentang penggunaan [ACH Direct Debit](https://docs.stripe.com/payments/ach-direct-debit.md) dengan Stripe.

#### Coba ACH Direct Debit

| Skenario                                                                                | Cara mencoba                                                                                                                                                                                                                                                                                                                               |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan verifikasi instan. | Pilih **Rekening bank AS** dan isi formulir. Klik lembaga percobaan. Ikuti instruksi pada jendela untuk menautkan rekening bank Anda. Klik tombol pembayaran Anda.                                                                                                                                                                         |
| Pelanggan Anda berhasil membayar dengan rekening bank AS menggunakan mikrodeposit.      | Pilih **rekening bank AS** dan isi formulir. Klik **Masukkan detail bank secara manual**. Ikuti petunjuk pada modal untuk menautkan rekening bank Anda. Anda dapat menggunakan ini [nomor akun uji](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Klik tombol pembayaran Anda. |
| Pelanggan Anda gagal menyelesaikan proses penautan rekening bank.                       | Pilih **rekening bank AS** dan klik lembaga percobaan atau **Masukkan detail bank secara manual**. Tutup jendela tanpa menyelesaikannya.                                                                                                                                                                                                   |

### BLIK

Ketika menggunakan Payment Element dengan BLIK, pengguna dapat menutup modal yang memintanya untuk mengotorisasi pembayaran di aplikasi perbankan mereka. Hal ini memicu pengalihan ke `return_url` Anda dan tidak mengembalikan pengguna ke halaman checkout. Pelajari selengkapnya tentang penggunaan [BLIK](https://docs.stripe.com/payments/blik.md) dengan Stripe.

Untuk menangani pengguna yang menutup modal, di pengendali sisi server untuk `return_url`, periksa `status` Payment Intent untuk melihat apakah `succeeded` atau masih `requires_action` (artinya pengguna telah menutup modal tanpa memberi otorisasi), menangani setiap kasus sesuai kebutuhan.

### Metode pembayaran kode QR

Ketika menggunakan Payment Element dengan metode pembayaran berbasis kode QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), pengguna dapat menutup modal kode QR. Hal ini memicu pengalihan ke `return_url` Anda dan tidak mengembalikan pengguna ke halaman checkout.

Untuk menangani pengguna yang menutup modal kode QR, di penangan sisi server untuk `return_url` Anda, periksa `status` Payment Intent untuk melihat apakah `succeeded` atau masih `requires_action` (berarti pengguna telah menutup modal tanpa membayar), menangani setiap kasus sesuai kebutuhan.

Atau, cegah pengalihan otomatis ke `return_url` Anda dengan meneruskan parameter opsional lanjutan [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), yang mencegah pengalihan ketika menutup kode QR modal.

### Cash App Pay

Payment Element menampilkan formulir dinamis secara berbeda di web desktop atau web seluler karena menggunakan metode autentikasi pelanggan yang berbeda. Pelajari selengkapnya tentang penggunaan [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) dengan Stripe.

#### Elemen aplikasi web seluler

Cash App Pay adalah metode pembayaran berbasis pengalihan di web seluler. Aplikasi ini mengalihkan pelanggan ke Cash App dalam mode live atau halaman pembayaran percobaan di lingkungan percobaan. Setelah pembayaran selesai, mereka dialihkan ke `return_url`, terlepas dari apakah Anda mengatur `redirect=if_required` atau tidak.

#### Elemen aplikasi web desktop

Cash App Pay adalah metode pembayaran kode QR di web desktop, di mana Payment Element membuat modal kode QR. Pelanggan Anda perlu memindai kode QR dengan aplikasi pemindaian kode QR atau aplikasi seluler Cash App.

Dalam mode live, ini mengalihkan pelanggan ke `return_url` segera setelah mereka dialihkan ke Cash App. Di lingkungan percobaan, mereka dapat menyetujui atau menolak pembayaran sebelum dialihkan ke `return_url`. Pelanggan juga dapat menutup modal kode QR sebelum menyelesaikan pembayaran, yang memicu pengalihan ke `return_url`.

Pastikan `return_url` sesuai dengan halaman di situs web Anda untuk memeriksa `status` Tujuan Pembayaran. `status` Tujuan Pembayaran dapat berupa `succeeded`, `failed`, atau `requires_action` (misalnya, pelanggan telah menutup modal tanpa memindai kode QR).

Atau, cegah pengalihan otomatis ke `return_url` Anda dengan meneruskan parameter opsional lanjutan `redirect=if_required`, yang mencegah pengalihan ketika menutup modal kode QR.

### PayPal

Untuk menggunakan PayPal, pastikan Anda menggunakan [domain terdaftar](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

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

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Siapkan pembayaran mendatang](https://docs.stripe.com/payments/save-and-reuse.md)
- [Simpan detail pembayaran selama pembayaran](https://docs.stripe.com/payments/save-during-payment.md)
- [Hitung pajak penjualan, GST, dan PPN dalam alur pembayaran Anda](https://docs.stripe.com/tax/standalone-tax-api.md)