# Buat halaman checkout custom yang menyertakan Link
Integrasikan Link menggunakan Payment Element atau Contact Details Element.
Panduan ini memandu Anda tentang cara menerima pembayaran dengan [Link](https://docs.stripe.com/payments/link.md) menggunakan [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) dan [Payment Element](https://docs.stripe.com/payments/payment-element.md) atau [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-element.md).
Ada tiga cara untuk mengamankan alamat email pelanggan untuk autentikasi dan pendaftaran Link:
- **Masukkan alamat email:** Anda dapat meneruskan alamat email ke Payment Element menggunakan [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Jika Anda sudah mengumpulkan alamat email dan atau nomor telepon pelanggan di alur checkout, kami merekomendasikan pendekatan ini.
- **Kumpulkan alamat email:** Anda dapat mengumpulkan alamat email langsung di Payment Element. Jika Anda tidak mengumpulkan alamat email di mana pun dalam alur checkout, kami merekomendasikan pendekatan ini.
- **Contact Details Element:** Anda dapat menggunakan Contact Details Element untuk membuat satu kolom masukan email untuk pengumpulan email dan autentikasi Link. Kami menyarankan hal ini jika Anda menggunakan [Address Element](https://docs.stripe.com/elements/address-element.md).
Kumpulkan alamat email pelanggan untuk autentikasi atau pendaftaran Link
## Siapkan Stripe [Sisi server]
Pertama, [buat akun Stripe](https://dashboard.stripe.com/register) atau [masuk](https://dashboard.stripe.com/login).
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]
Stripe menggunakan objek [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) untuk mewakili maksud Anda menagih pembayaran dari pelanggan, melacak upaya charge, dan perubahan status pembayaran di seluruh proses.
Jika Anda mengumpulkan detail kartu untuk [penggunaan di masa mendatang dengan Tujuan Penyiapan](https://docs.stripe.com/payments/save-and-reuse.md), daftarkan metode pembayaran secara manual sebagai ganti menggunakan metode pembayaran dinamis. Untuk menggunakan Link tanpa metode pembayaran dinamis, perbarui integrasi Anda dengan meneruskan `tautan` untuk `payment_method_types`.
Saat Anda membuat PaymentIntent, [tawarkan secara dinamis kepada pelanggan Anda metode pembayaran yang paling relevan](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), termasuk Link, dengan menggunakan metode pembayaran dinamis. Untuk menggunakan metode pembayaran dinamis, jangan sertakan parameter `payment_method_types`. Secara opsional, Anda juga dapat mengaktifkan `automatic_payment_methods`.
> Jika integrasi Anda tidak menetapkan parameter `payment_method_types`, beberapa metode pembayaran diaktifkan secara otomatis, termasuk kartu dan dompet digital.
Untuk menambahkan Link ke integrasi Elements Anda menggunakan metode pembayaran dinamis:
1. Di Dashboard Anda, pada [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods), aktifkan Link.
1. Jika saat ini Anda memiliki integrasi yang mencantumkan metode pembayaran secara manual, hapus parameter [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) dari integrasi Anda.
### 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
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the PaymentIntent
erb :checkout
end
```
## Kumpulkan email pelanggan
Link mengautentikasi pelanggan dengan menggunakan alamat email mereka. Bergantung pada alur checkout, Anda memiliki opsi berikut: meneruskan email ke Payment Element, memungutnya secara langsung di dalam Payment Element, atau menggunakan Contact Details Element. Dari beberapa opsi ini, Stripe merekomendasikan untuk meneruskan alamat email pelanggan ke Payment Element jika tersedia.
#### Teruskan email
Jika *salah satu* dari hal berikut berlaku untuk Anda:
- Anda mengetahui alamat email pelanggan Anda sebelum tiba di halaman pembayaran (dari profil pelanggan, misalnya).
- Anda tidak perlu mengumpulkan alamat pengiriman dari pelanggan Anda.
- Anda lebih suka menggunakan bidang input email Anda sendiri yang Anda tempatkan di depan formulir pembayaran.
Kemudian, integrasikan Link dengan meneruskan email pelanggan ke Payment Element, yang akan mempercepat proses checkout dengan memicu alur autentikasi Link segera setelah pelanggan mencapai tahap pembayaran. Opsi ini mengintegrasikan satu elemen, yaitu Payment Element.
Link mengisi otomatis email yang dikumpulkan di formulir checkout untuk checkout yang lebih cepat
Link memberikan permintaan autentikasi untuk pelanggan yang sudah ada
Dalam alur ini, Anda tetap mengumpulkan email di kolom formulir Anda sendiri *sebelum* pelanggan mencapai tahap pembayaran, lalu meneruskan email tersebut ke Payment Element. Payment Element akan mengautentikasi pelanggan saat pembayaran dan menampilkan detail pembayaran yang tersimpan di akun Link mereka, atau menampilkan formulir pembuatan akun Link setelah memasukkan detail kartu. Berikut adalah tampilannya:
Integrate Link using the Payment Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Opsi integrasi ini tidak memungut alamat pengiriman pelanggan. Jika Anda perlu memungut alamat pengiriman, integrasikan Link dengan menggunakan Contact Details Element, Address Element, dan Payment Element.
#### Kumpulkan email
Autentikasi Link di dalam Payment Element memungkinkan pelanggan Anda memasukkan alamat email langsung di Payment Element tanpa memerlukan pekerjaan integrasi tambahan.
Dalam alur ini, pelanggan Anda memasukkan alamat email mereka dan melakukan autentikasi atau mendaftar ke Link langsung di dalam Payment Element selama proses checkout. Jika pelanggan belum mendaftar ke Link dan mereka memilih metode pembayaran yang didukung di Payment Element, mereka akan diminta untuk menyimpan detail mereka menggunakan Link. Bagi mereka yang sudah terdaftar, Link akan mengisi informasi pembayaran mereka secara otomatis.
#### Gunakan Contact Details Element
Jika *salah satu* dari hal berikut berlaku untuk Anda:
- Anda menginginkan komponen tunggal yang dioptimalkan untuk pengumpulan email dan autentikasi Link.
- Anda perlu mengumpulkan alamat pengiriman dari pelanggan Anda.
Kemudian gunakan alur integrasi yang mengimplementasikan beberapa elemen ini: Contact Details Element, Payment Element, dan Address Element opsional.
Halaman checkout yang didukung Link memiliki Contact Details Element di awal, diikuti oleh Address Element, dan Payment Element di akhir. Anda juga dapat menampilkan Contact Details Element di halaman terpisah, dengan urutan yang sama, untuk alur checkout pada beberapa halaman.
Buat formulir pembayaran menggunakan beberapa Elements
Integrasi berfungsi sebagai berikut:
A diagram describing how to integrate Link using the Contact Details Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## Siapkan formulir pembayaran Anda [Sisi client]
Sekarang Anda dapat menyiapkan formulir pembayaran custom dengan komponen UI siap-rakit Elements. Alamat halaman pembayaran Anda harus dimulai dengan `https://` bukan `http://` agar integrasi Anda berfungsi. Anda dapat mencoba integrasi tanpa menggunakan HTTPS. [Aktifkan HTTPS](https://docs.stripe.com/security/guide.md#tls) saat Anda siap menerima pembayaran live.
#### Teruskan email
Payment Element menampilkan formulir kontak pelanggan yang telah diisi sebelumnya yang menyertakan nomor telepon dan alamat email. Ini juga membuat formulir dinamis yang memungkinkan pelanggan Anda untuk memilih jenis metode pembayaran. Formulir ini secara otomatis mengumpulkan semua detail pembayaran yang diperlukan untuk jenis metode pembayaran yang dipilih oleh pelanggan.
Terlebih lagi, Element Pembayaran menangani tampilan metode pembayaran yang disimpan Link untuk pelanggan yang diautentikasi.
#### React
### Siapkan Stripe Elements
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
```
### Buat formulir pembayaran
Di halaman pembayaran, bungkus formulir pembayaran Anda dengan komponen `Elements`, meneruskan [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Jika Anda memiliki informasi pelanggan lain, teruskan ke `defaultValues.billingDetails` objek untuk objek `Elemen Pembayaran`. Mengisi informasi sebanyak mungkin menyederhanakan pembuatan dan penggunaan kembali akun Link untuk pelanggan Anda. Anda juga dapat meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), menyesuaikan Elements agar sesuai dengan desain situs Anda.
Kemudian, render `Elemen Pembayaran` dalam formulir pembayaran Anda. Kami merekomendasikan untuk menyerahkan setidaknya alamat email pelanggan ke [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) untuk mengisi data mereka untuk Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Siapkan Stripe Elements
Sertakan skrip Stripe.js ke `head` file HTML di halaman pembayaran Anda. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-host sendiri salinannya.
```html
Checkout
```
Buat instance [objek Stripe](https://docs.stripe.com/js.md#stripe-function) dengan menyediakan [kunci API](https://docs.stripe.com/keys.md) yang dapat dipublikasikan sebagai parameter pertama:
```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('<>');
```
### Tambahkan elements Link ke halaman pembayaran Anda
Di halaman pembayaran Anda, buat simpul DOM kosong dengan ID unik agar Element dapat dirender:
```html
```
Saat formulir yang baru saja Anda konfigurasi dimuat, buat grup Element baru, dengan meneruskan [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Anda juga dapat meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), menyesuaikan Elements agar cocok dengan desain situs Anda.
Jika Anda memiliki informasi pelanggan lain, teruskan ke `defaultValues.billingDetails` objek `Elemen Pembayaran`. Mengisi informasi sebanyak mungkin menyederhanakan pembuatan dan penggunaan kembali akun Link untuk pelanggan Anda.
Terakhir, buat instance dari setiap Elements dan pasang ke node DOM yang sesuai:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Kumpulkan email
Payment Element menampilkan formulir kontak pelanggan yang telah diisi sebelumnya yang menyertakan nomor telepon dan alamat email. Ini juga membuat formulir dinamis yang memungkinkan pelanggan Anda untuk memilih jenis metode pembayaran. Formulir ini secara otomatis mengumpulkan semua detail pembayaran yang diperlukan untuk jenis metode pembayaran yang dipilih oleh pelanggan.
Terlebih lagi, Element Pembayaran menangani tampilan metode pembayaran yang disimpan Link untuk pelanggan yang diautentikasi. Untuk integrasi ini, Anda harus membiarkan Link diaktifkan di [Pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods).
#### React
### Siapkan Stripe Elements
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
```
### Buat formulir pembayaran
Di halaman pembayaran, bungkus formulir pembayaran Anda dengan komponen `Elements`, meneruskan [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Jika Anda memiliki informasi pelanggan lain, teruskan ke `defaultValues.billingDetails` objek untuk objek `Elemen Pembayaran`. Mengisi informasi sebanyak mungkin menyederhanakan pembuatan dan penggunaan kembali akun Link untuk pelanggan Anda. Anda juga dapat meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), menyesuaikan Elements agar sesuai dengan desain situs Anda.
Kemudian, render `Elemen Pembayaran` dalam formulir pembayaran Anda. Kami merekomendasikan untuk menyerahkan setidaknya alamat email pelanggan ke [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) untuk mengisi data mereka untuk Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Siapkan Stripe Elements
Sertakan skrip Stripe.js ke `head` file HTML di halaman pembayaran Anda. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-host sendiri salinannya.
```html
Checkout
```
Buat instance [objek Stripe](https://docs.stripe.com/js.md#stripe-function) dengan menyediakan [kunci API](https://docs.stripe.com/keys.md) yang dapat dipublikasikan sebagai parameter pertama:
```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('<>');
```
### Tambahkan elements Link ke halaman pembayaran Anda
Di halaman pembayaran Anda, buat simpul DOM kosong dengan ID unik agar Element dapat dirender:
```html
```
Saat formulir yang baru saja Anda konfigurasi dimuat, buat grup Element baru, dengan meneruskan [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Anda juga dapat meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), menyesuaikan Elements agar cocok dengan desain situs Anda.
Jika Anda memiliki informasi pelanggan lain, teruskan ke `defaultValues.billingDetails` objek `Elemen Pembayaran`. Mengisi informasi sebanyak mungkin menyederhanakan pembuatan dan penggunaan kembali akun Link untuk pelanggan Anda.
Terakhir, buat instance dari setiap Elements dan pasang ke node DOM yang sesuai:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Menggunakan Elemen Detail Kontak
Contact Details Element menampilkan masukan alamat email. Saat Link mencocokkan email pelanggan dengan akun Link yang ada, sistem akan mengirimkan kode sekali pakai yang aman ke telepon pelanggan untuk autentikasi. Jika pelanggan berhasil melakukan autentikasi, Stripe akan secara otomatis menampilkan alamat dan metode pembayaran mereka yang disimpan di Link untuk digunakan.
Integrasi ini juga membuat Elemen Pembayaran, yang merender formulir dinamis yang memungkinkan pelanggan Anda memilih jenis metode pembayaran. Formulir secara otomatis mengumpulkan semua detail pembayaran yang diperlukan untuk jenis metode pembayaran yang dipilih oleh pelanggan. Elemen Pembayaran juga menangani tampilan metode pembayaran yang disimpan Link untuk pelanggan yang diautentikasi.
#### React
### Siapkan Stripe Elements
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
```
Di halaman pembayaran Anda, bungkus formulir pembayaran Anda dengan komponen `Elements`, dengan meneruskan [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dari [langkah sebelumnya](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Jika Anda sudah mengumpulkan email pelanggan di bagian lain dari formulir Anda, ganti input Anda yang ada dengan `ContactDetailsElement`.
Jika Anda tidak mengumpulkan email, tambahkan `ContactDetailsElement` ke alur checkout Anda. Anda harus menempatkan `ContactDetailsElement` sebelum `ShippingAddressElement` (opsional jika Anda mengumpulkan alamat pengiriman) dan `PaymentElement` agar Link mengisi otomatis detail yang disimpan Link untuk pelanggan Anda di `ShippingAddressElement` dan `PaymentElement`. Anda juga dapat meneruskan [opsi penampilan](https://docs.stripe.com/elements/appearance-api.md), menyesuaikan Elements agar cocok dengan desain situs Anda.
Jika Anda memiliki email pelanggan, teruskan ke opsi `defaultValues` dari `ContactDetailsElement`. Ini akan mengisi otomatis alamat email mereka dan memulai proses autentikasi Link.
Jika Anda memiliki informasi pelanggan lain, teruskan ke `defaultValues.billingDetails` objek untuk objek `Elemen Pembayaran`. Mengisi informasi sebanyak mungkin menyederhanakan pembuatan dan penggunaan kembali akun Link untuk pelanggan Anda.
Kemudian, render komponen `ContactDetailsElement` dan `PaymentElement` di formulir pembayaran Anda:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
ContactDetailsElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
`ContactDetailsElement`, `PaymentElement`, dan `ShippingAddressElement` tidak harus berada di halaman yang sama. Jika Anda memiliki proses yang menampilkan informasi kontak pelanggan, detail pengiriman, dan detail pembayaran kepada pelanggan dalam langkah-langkah yang terpisah, Anda dapat menampilkan setiap Element di langkah atau halaman yang sesuai. Sertakan `ContactDetailsElement` sebagai formulir input email dalam langkah pengumpulan info kontak untuk memastikan pelanggan dapat sepenuhnya memanfaatkan pengisian otomatis pengiriman dan pembayaran yang disediakan oleh Link.
Jika Anda mengumpulkan email pelanggan Anda dengan Elemen Detail Kontak di awal alur checkout, Anda tidak perlu menampilkannya lagi di halaman pengiriman atau pembayaran.
### Ambil alamat email
Anda dapat mengambil detail alamat email menggunakan prop `onChange` pada komponen `ContactDetailsElement`. Handler `onChange` terpicu setiap kali pengguna memperbarui bidang email, atau saat email pelanggan yang disimpan diisi otomatis.
```jsx
{
setEmail(event.value.email);
}} />
```
### Isi dahulu alamat email pelanggan
Contact Details Element menerima alamat email. Memberikan alamat email pelanggan memicu alur autentikasi Link segera setelah pelanggan mendarat di halaman pembayaran menggunakan opsi `defaultValues`.
```jsx
```
#### HTML + JS
### Siapkan Stripe Elements
Sertakan skrip Stripe.js ke `head` file HTML di halaman pembayaran Anda. Selalu muat Stripe.js secara langsung dari js.stripe.com agar tetap mematuhi PCI. Jangan menyertakan skrip dalam paket atau meng-host sendiri salinannya.
```html
Checkout
```
Buat instance [objek Stripe](https://docs.stripe.com/js.md#stripe-function) dengan menyediakan [kunci API](https://docs.stripe.com/keys.md) yang dapat dipublikasikan sebagai parameter pertama:
```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('<>');
```
### Tambahkan elements Link ke halaman pembayaran Anda
Di halaman pembayaran Anda, buat simpul DOM kosong dengan identifikasi unik agar Element dapat dirender:
```html
```
Saat formulir yang baru saja Anda konfigurasi dimuat, buat grup Elements baru, dengan meneruskan [Client Secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Jika Anda sudah mengumpulkan email pelanggan di formulir pembayaran, ganti input Anda yang ada dengan `contactDetailsElement`.
Jika Anda tidak mengumpulkan email, tambahkan `contactDetailsElement` ke alur checkout Anda sebelum `shippingAddress` (opsional jika Anda mengumpulkan Alamat Pengiriman). Tambahkan `PaymentElement` agar Link mengisi otomatis detail pelanggan Anda yang disimpan Link di `shippingAddress` dan `PaymentElement`. Anda juga dapat meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), yang menyesuaikan Elements agar cocok dengan desain situs Anda.
Jika Anda memiliki email pelanggan, teruskan ke opsi `defaultValues` dari `contactDetailsElement`. Ini akan mengisi otomatis email mereka dan memulai proses autentikasi Link. Jika Anda memiliki informasi pelanggan lainnya, teruskan ke objek `defaultValues.billingDetails` dari `PaymentElement`. Mengisi otomatis sebanyak mungkin informasi akan menyederhanakan pembuatan akun Link dan penggunaan kembali untuk pelanggan Anda.
Terakhir, buat instance dari setiap Element dan pasang ke node DOM yang sesuai:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const contactDetailsElement = elements.create("contactDetails");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```
`linkAuthenticationElement` merender input alamat email. Jika Link mencocokkan email pelanggan dengan akun Link yang ada, kode satu kali yang aman akan dikirimkan kepada pelanggan ke ponsel mereka untuk diautentikasi. Jika pelanggan berhasil mengautentikasi, Stripe menampilkan alamat dan metode pembayaran yang disimpan Link secara otomatis sehingga mereka dapat menggunakannya.
`PaymentElement` merender formulir dinamis yang memungkinkan pelanggan Anda memilih jenis metode pembayaran. Formulir secara otomatis mengumpulkan semua detail pembayaran yang diperlukan untuk jenis metode pembayaran yang dipilih oleh pelanggan. `PaymentElement` juga menangani tampilan Link-metode pembayaran yang disimpan Link untuk pelanggan yang diautentikasi.
Elemen Detail Kontak, Pembayaran, dan Alamat Pengiriman tidak harus berada di halaman yang sama. Jika Anda memiliki proses di mana informasi kontak pelanggan, informasi pengiriman, dan detail pembayaran ditampilkan kepada pelanggan dalam langkah-langkah terpisah saat checkout, Anda dapat menampilkan setiap Elemen pada langkah atau halaman yang sesuai. Sertakan Elemen Detail Kontak sebagai formulir input email dalam langkah pengumpulan informasi kontak untuk memastikan pelanggan dapat memanfaatkan sepenuhnya pengisian otomatis yang disediakan oleh Link.
Jika Anda mengumpulkan email pelanggan Anda dengan Elemen Detail Kontak di awal alur checkout, Anda tidak perlu menampilkannya lagi di halaman pengiriman atau pembayaran.
### Ambil alamat email
Anda dapat mengambil detail alamat email menggunakan prop `onChange` pada komponen `contactDetailsElement`. Handler `onChange` terpicu setiap kali pengguna memperbarui bidang email, atau ketika email pelanggan yang disimpan diisi otomatis.
```javascript
contactDetailsElement.on('change', (event) => {
const email = event.value.email;
});
```
### Isi dahulu alamat email pelanggan
Elemen Detail Kontak menerima alamat email. Memberikan alamat email pelanggan akan memulai alur autentikasi Link segera setelah pelanggan tiba di halaman pembayaran menggunakan opsi `defaultValues`.
```javascript
// Create contactDetails element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
```
## Optional: Isi dahulu data pelanggan tambahan [Sisi client]
Jika Anda memilikinya, mengisi informasi pelanggan terlebih dahulu semakin menyederhanakan proses checkout dan mengurangi entri data manual.
#### Teruskan email
Elemen Pembayaran menerima `defaultValues.billingDetails` yang memungkinkan Anda mengisi nama dan nomor telepon pelanggan serta alamat email dan pengiriman mereka. Dengan mengisi informasi pelanggan sebanyak mungkin, Anda menyederhanakan pembuatan dan penggunaan kembali akun Link.
Isi otomatis alamat email, nomor telepon, dan nama pelanggan Anda untuk menyederhanakan proses pendaftaran Link
Anda dapat memberikan nilai berikut ke objek `defaultValues.billingDetails`:
| Nilai | Diperlukan | Format |
| --------- | ---------- | ---------------------------------------------------------------------------------- |
| `email` | Diperlukan | string |
| `name` | Opsional | string |
| `phone` | Opsional | string |
| `address` | Opsional | Objek JSON dengan bidang `postal_code`, dan `country`. Semua bidang adalah string. |
Meneruskan `defaultValues.billingDetails` ke Payment Element tergantung pada jika Anda mengumpulkan informasi di halaman terpisah sebelum Payment Element atau di halaman yang sama.
#### Sebelum Payment Element
Jika Anda mengumpulkan informasi di halaman terpisah sebelum Payment Element, Anda dapat mengisi nilai terlebih dahulu dengan meneruskan `defaultValues.billingDetails` saat membuat Payment Element:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Halaman yang sama dengan Payment Element
Jika Anda mengumpulkan informasi di halaman yang sama dengan Payment Element, Anda dapat mengisi nilai terlebih dahulu dengan memperbarui Payment Element dengan `defaultValues.billingDetails`.
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Teruskan email ke Contact Details Element
Jika Anda menggunakan Contact Details Element, tambahkan objek `defaultValues.billingDetails` ke Payment Element untuk mengisi otomatis nama dan nomor telepon pelanggan serta alamat pengiriman mereka. Dengan mengisi otomatis sebanyak mungkin informasi pelanggan, Anda dapat menyederhanakan proses pembuatan dan penggunaan kembali akun Link.
Isi alamat email, nomor telepon, dan nama pelanggan Anda untuk menyederhanakan proses pendaftaran Link
Anda dapat memberikan nilai berikut ke objek `defaultValues.billingDetails`:
| Nilai | Diperlukan | Format |
| --------- | ---------- | ---------------------------------------------------------------------------------- |
| `name` | Opsional | string |
| `phone` | Opsional | string |
| `address` | Opsional | Objek JSON dengan bidang `postal_code`, dan `country`. Semua bidang adalah string. |
Payment Element dengan semua nilainya yang telah diisikan sebelumnya terlihat mirip dengan contoh berikut:
#### React
```jsx
;
```
#### HTML+JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: Kumpulkan alamat pengiriman [Sisi client]
#### Teruskan email
Opsi integrasi ini tidak memungut alamat pengiriman pelanggan. Jika Anda perlu memungut alamat pengiriman, integrasikan Link dengan menggunakan Contact Details Element, Address Element, dan Payment Element dalam langkah [Menggunakan Contact Details Element](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Menggunakan Contact Details Element
#### React
Untuk mengumpulkan alamat, buat sebuah node DOM kosong sebagai tempat merender [Address Element](https://docs.stripe.com/elements/address-element.md). Address Element harus ditampilkan setelah Contact Details Element agar Link dapat mengisi otomatis detail alamat pelanggan yang tersimpan:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
ContactDetailsElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Tampilkan `AddressElement` sebelum `PaymentElement`. `PaymentElement` secara dinamis mendeteksi data alamat yang dikumpulkan oleh `AddressElement`, menyembunyikan bidang yang tidak diperlukan, dan mengumpulkan detail alamat tagihan tambahan seperlunya.
### Mengambil informasi alamat
`AddressElement` secara otomatis meneruskan alamat pengiriman bila pelanggan menyerahkan pembayaran, tetapi Anda juga dapat mengambil detail alamat pada frontend menggunakan properti `onChange`. Penangan `onChange` mengirim kejadian setiap kali pengguna memperbarui bidang di Address Element atau memilih alamat yang disimpan:
```jsx
{
setAddressState(event.value);
}} />
```
### Isi otomatis alamat pengiriman
Gunakan [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) untuk mengisi informasi alamat secara otomatis, sehingga mempercepat proses pembayaran bagi pelanggan Anda.
```jsx
```
#### HTML + JS
[Address Element](https://docs.stripe.com/elements/address-element.md) memungkinkan Anda mengumpulkan alamat pengiriman atau penagihan. Buat node DOM kosong untuk Address Element. Tampilkan setelah Contact Details Element:
```html
```
Kemudian, buat instance Address Element, dan pasang ke node DOM.
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const contactDetailsElement = elements.create("contactDetails");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Tampilkan Address Element sebelum Payment Element. Payment Element secara dinamis mendeteksi data alamat yang dikumpulkan oleh Address Element, menyembunyikan bidang yang tidak diperlukan, dan mengumpulkan detail alamat tagihan tambahan seperlunya.
### Ambil informasi alamat
Address Element secara otomatis meneruskan alamat pengiriman saat pelanggan mengirimkan pembayaran, tetapi Anda juga dapat mengambil detail alamat di frontend menggunakan kejadian `change`. Penangan kejadian `change` mengirim setiap kali pengguna memperbarui bidang apa pun di Address Element, atau setelah memilih alamat yang disimpan:
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Isi otomatis alamat pengiriman
Gunakan [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) untuk mengisi informasi alamat secara otomatis, sehingga mempercepat proses pembayaran bagi pelanggan Anda.
```javascript
// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
mode: 'shipping',
defaultValues: {
name: 'Jane Doe',
address: {
line1: '354 Oyster Point Blvd',
line2: '',
city: 'South San Francisco',
state: 'CA',
postal_code: '94080',
country: 'US',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: Sesuaikan penampilan [Sisi client]
Setelah menambahkan Elements ini ke halaman, Anda dapat menyesuaikan [appearance](https://docs.stripe.com/elements/appearance-api.md#theme) agar sesuai dengan desain Anda selengkapnya:
Sesuaikan penampilan Elements Anda
## Serahkan pembayaran ke Stripe [Sisi client]
Gunakan [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) untuk menyelesaikan pembayaran dengan detail yang dikumpulkan dari pelanggan Anda di formulir Elements yang berbeda. 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 mengalihkan pengguna setelah menyelesaikan pembayaran.
Pengguna Anda mungkin terlebih dahulu diarahkan ulang ke situs perantara, seperti halaman otorisasi bank, sebelum Stripe mengalihkannya ke `return_url`.
Secara default, pembayaran kartu dan bank segera dialihkan ke `return_url` saat pembayaran berhasil. Jika tidak ingin dialihkan ke `return_url`, Anda dapat menggunakan [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) untuk mengubah perilaku.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(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_url` sesuai dengan halaman pada situs web Anda yang menyediakan [status pembayaran](https://docs.stripe.com/payments/payment-intents/verifying-status.md) dari `PaymentIntent` bila Anda menampilkan halaman pengembalian. Saat Stripe mengalihkan pelanggan ke `return_url`, Anda dapat menggunakan parameter query URL berikut untuk memverifikasi status pembayaran. Anda juga dapat menambahkan parameter query sendiri ketika memberikan `return_url`. Parameter query ini bertahan selama proses pengalihan.
| 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`. |
## Optional: Pisahkan otorisasi dan penarikan [Sisi server]
Link mendukung [otorisasi dan penangkapan terpisah](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Anda harus menangkap pembayaran Link resmi dalam waktu 7 hari sejak otorisasi. Jika tidak, otorisasi akan dibatalkan secara otomatis dan Anda tidak dapat menangkap pembayaran tersebut.
### Beri tahu Stripe untuk memberi otorisasi saja
Untuk menunjukkan bahwa Anda ingin memisahkan otorisasi dan penarikan, atur [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) ke `manual` ketika membuat PaymentIntent. Parameter ini menginstruksikan Stripe untuk hanya mengotorisasikan jumlah pada metode pembayaran pelanggan.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### Tarik dana
Setelah otorisasi berhasil, [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) PaymentIntent beralih ke `requires_capture`. Untuk menarik dana yang diotorisasi, buat permintaan [penarikan](https://docs.stripe.com/api/payment_intents/capture.md) PaymentIntent. Total jumlah yang diotorisasi ditarik secara default—Anda tidak dapat menarik lebih dari ini, tetapi Anda dapat menarik lebih sedikit.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Opsional) Batalkan otorisasi
Jika perlu membatalkan otorisasi, Anda dapat [membatalkan PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).
## 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 webhook untuk menerima kejadian ini](https://docs.stripe.com/webhooks/quickstart.md) dan menjalankan tindakan, seperti mengirim email konfirmasi pesanan kepada pelanggan Anda, mencatat penjualan di database, atau memulai alur kerja pengiriman.
Konfigurasikan integrasi Anda untuk mendengarkan kejadian ini daripada menunggu callback dari client. Saat Anda menunggu callback dari client, pelanggan dapat menutup jendela browser atau keluar dari aplikasi sebelum callback mengeksekusi. Menyiapkan 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`, Anda juga dapat menangani dua kejadian penting lainnya 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 dari Stripe bila pelanggan berhasil menyelesaikan suatu 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.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Dikirim dari Stripe ketika pelanggan mencoba melakukan pembayaran, tetapi pembayaran itu gagal. | Jika transisi pembayaran dilakukan dari `processing` menjadi `payment_failed`, tawarkan upaya lain untuk membayar kepada pelanggan. |
## Uji integrasinya
> Jangan simpan data pengguna nyata di akun sandbox Link. Perlakukan mereka seolah-olah tersedia untuk umum, karena akun pengujian ini dikaitkan dengan kunci yang dapat dipublikasikan Anda.
Saat ini, Link hanya berfungsi dengan kartu kredit, kartu debit, dan pembelian rekening bank AS yang memenuhi syarat. Link membutuhkan [pendaftaran domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
Anda dapat membuat akun sandbox untuk Link menggunakan alamat email yang valid. Tabel berikut menunjukkan nilai kode sandi satu kali tetap yang diterima Stripe untuk mengautentikasi akun sandbox:
| Nilai | Hasil |
| --------------------------------------------- | ------------------------------------ |
| 6 angka lainnya yang tidak tercantum di bawah | Berhasil |
| 000001 | Kesalahan, kode tidak valid |
| 000002 | Kesalahan, kode kedaluwarsa |
| 000003 | Kesalahan, upaya maksimum terlampaui |
Untuk mencoba metode pembayaran tertentu, lihat [contoh percobaan Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Berbagai sumber pendanaan
Saat Stripe menambahkan dukungan sumber pendanaan tambahan, Anda tidak perlu memperbarui integrasi. Stripe secara otomatis mendukungnya dengan waktu penyelesaian transaksi dan jaminan yang sama seperti pembayaran kartu dan rekening bank.
### Autentikasi kartu dan 3D Secure
Link mendukung *3D Secure 2 (3DS2)* (3D Secure 2 (3DS2) removes friction from the authentication process and improves the purchase experience compared to 3D Secure 1. It's the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and is a key mechanism for businesses to request exemptions to SCA) untuk pembayaran kartu. 3DS2 mengharuskan pelanggan untuk menyelesaikan langkah verifikasi tambahan dengan penerbit kartu saat pembayaranmenyiapkan pembayaran. Pembayaran yang telah berhasil diautentikasi menggunakan 3D Secure dilindungi oleh liability shift.
Untuk memicu alur tantangan autentikasi 3DS2 dengan Link di sandbox, gunakan kartu pengujian berikut dengan CVC, kode pos, dan tanggal kedaluwarsa di masa mendatang: 4000000000003220.
Di sandbox, proses autentikasi menampilkan halaman autentikasi rekaan. Pada halaman tersebut, Anda dapat memberikan otorisasi ataupun membatalkan penyiapan. Pemberian otorisasi pembayaran menyimulasikan autentikasi yang berhasil dan mengalihkan Anda ke URL kembali yang telah ditentukan. Mengeklik tombol **Kegagalan** menyimulasikan percobaan autentikasi yang tidak berhasil.
Untuk detail selengkapnya, lihat [halaman autentikasi 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Saat menguji alur 3DS, hanya kartu pengujian untuk 3DS2 yang akan memicu autentikasi pada Link.
## Optional: Tampilkan data yang disimpan pelanggan [Sisi server] [Sisi client]
Selain menampilkan alamat dan metode pembayaran yang Anda simpan sendiri untuk pelanggan, Anda juga dapat menampilkan data yang disimpan pelanggan di Link.
> #### Menggunakan API Akun v2 untuk mewakili pelanggan
>
> API Akun v2 umumnya tersedia untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Jika Anda adalah bagian dari pratinjau Akun v2, Anda perlu menentukan [Tentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dalam kode Anda.
>
> 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).
Jika pelanggan memiliki lebih dari satu metode pembayaran yang disimpan, Stripe akan menampilkan tiga kartu tersimpan yang terakhir digunakan, selain metode pembayaran apa pun yang telah mereka simpan dengan Link.
Untuk melakukannya, buat Ephemeral Key dan kirimkan ke front end Anda bersama dengan ID `Account` (untuk pelanggan yang direpresentasikan sebagai objek `Account` yang dikonfigurasi pelanggan) atau ID `Customer` (untuk pelanggan yang direpresentasikan sebagai objek `Customer`). Karena informasi tentang pelanggan bersifat sensitif, Anda tidak dapat mengambilnya secara langsung dalam Stripe.js, tetapi Ephemeral Key memberikan akses sementara ke data ini.
#### Akun v2
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-04-22.dahlia" \
-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
#### Pelanggan v1
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-04-22.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
Di sisi client, ambil `customerOptions` dengan `clientSecret`.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
Kemudian, teruskan nilai `customerOptions.ephemeralKey` dan `customerOptions.customer` ke opsi `customerOptions` pada [kelompok Elements](https://docs.stripe.com/js/elements_object/create). Anda juga harus meneruskan tanda beta `elements_customers_beta_1` saat memuat instance Stripe.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-04-22.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Save Link payment methods [Sisi server] [Sisi client]
Anda dapat menyimpan metode pembayaran Link untuk *pembayaran di luar sesi (off-session)* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) atau *langganan* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) di masa mendatang, tetapi tidak untuk *pembayaran di dalam sesi (on-session)* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) di masa mendatang. Untuk melakukannya, Anda harus melampirkannya ke pelanggan yang direpresentasikan baik sebagai objek `Account` yang dikonfigurasi pelanggan atau sebagai objek `Customer`.
> #### Menggunakan API Akun v2 untuk mewakili pelanggan
>
> API Akun v2 umumnya tersedia untuk pengguna Connect, dan dalam pratinjau publik untuk pengguna Stripe lainnya. Jika Anda adalah bagian dari pratinjau Akun v2, Anda perlu menentukan [Tentukan versi pratinjau](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dalam kode Anda.
>
> 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
Saat pelanggan Anda membuat akun atau melakukan transaksi pertama mereka dengan bisnis Anda, buat objek `Account` yang dikonfigurasi pelanggan untuk menyimpan data mereka untuk penggunaan di masa mendatang. Kemudian, tentukan `customer_account` saat membuat `PaymentIntent` Anda.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d setup_future_usage=off_session
```
Saat Anda siap menagih pelanggan lagi, gunakan ID `customer_account` dan ID *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) yang dihasilkan untuk membuat `PaymentIntent` baru.
#### Pelanggan v1
Saat pelanggan Anda membuat akun atau melakukan transaksi pertama mereka dengan bisnis Anda, buat objek `Customer` untuk menyimpan data mereka untuk penggunaan di masa mendatang. Kemudian, tentukan `customer` saat membuat `PaymentIntent` Anda.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
Saat Anda siap menagih pelanggan lagi, gunakan ID `customer` dan ID *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) yang dihasilkan untuk membuat `PaymentIntent` baru.
Atur [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) ke `true`. Hal ini menyebabkan `PaymentIntent` mengirimkan error jika autentikasi diperlukan saat pelanggan Anda tidak sedang aktif menggunakan situs atau aplikasi Anda.
#### Akun v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Pelanggan v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## 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
- [Apa itu Link](https://docs.stripe.com/payments/link.md)
- [Link dengan Elemen](https://docs.stripe.com/payments/link/elements-link.md)
- [Link di elemen pembayaran](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Jelajahi Contact Details Element](https://docs.stripe.com/payments/link/contact-details-element.md)
- [Link dalam integrasi pembayaran yang berbeda](https://docs.stripe.com/payments/link/link-payment-integrations.md)