# Buat halaman checkout custom yang menyertakan Link
Integrasikan Link menggunakan Payment Element atau Link Authentication Element.
Jika platform Connect Anda menggunakan [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), gunakan [panduan](https://docs.stripe.com/connect/use-accounts-as-customers.md) kami untuk mengganti referensi `Customer` dan kejadian dalam kode Anda dengan referensi Accounts v2 API yang setara.
Panduan ini memandu Anda melalui cara menerima pembayaran dengan [Link](https://docs.stripe.com/payments/link.md) menggunakan [Pembayaran Intents API](https://docs.stripe.com/api/payment_intents.md) dan baik [Element Pembayaran](https://docs.stripe.com/payments/payment-element.md) atau [Link Elemen Autentikasi](https://docs.stripe.com/payments/elements/link-authentication-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.
- **Link Element Autentikasi:** Anda dapat menggunakan Element Autentikasi Link untuk membuat satu bidang input email untuk pengumpulan email dan autentikasi Link. Sebaiknya lakukan ini jika Anda menggunakan [Element Alamat](https://docs.stripe.com/elements/address-element.md).
Mengumpulkan 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 melakukan autentikasi pelanggan menggunakan alamat email mereka. Tergantung pada alur checkout Anda, tersedia beberapa pilihan: meneruskan email ke Payment Element, mengumpulkannya langsung di dalam Payment Element, atau menggunakan Link Authentication Element. Dari pilihan tersebut, 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 terkumpul di formulir checkout untuk proses yang lebih cepat
Link memberikan perintah autentikasi untuk pelanggan yang sudah terdaftar
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:
Integrasikan Link menggunakan Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Opsi integrasi ini tidak mengumpulkan alamat pengiriman pelanggan. Jika Anda perlu mengumpulkan alamat pengiriman, integrasikan Link menggunakan Authentication Element, Address Element, dan Payment Element dari Link.
#### 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 Link Authentication 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.
Gunakan alur integrasi yang menerapkan elemen-elemen berikut: Authentication Element Link, Payment Element, dan Address Element opsional.
Halaman checkout yang mengaktifkan Link memiliki Authentication Element Link di awal, diikuti oleh Address Element, dan Payment Element di akhir. Anda juga dapat menampilkan Authentication Element Link pada halaman terpisah, dalam urutan yang sama, untuk alur checkout multi-halaman.
Buat formulir pembayaran menggunakan beberapa Elements
Integrasi berfungsi sebagai berikut:
Diagram yang menjelaskan cara mengintegrasikan Link menggunakan Link Authentication 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");
```
#### Gunakan Link Authentication Element
Elemen Autentikasi Link 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 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, bungkus formulir pembayaran Anda dengan komponen `Elements`, 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 formulir, ganti input yang ada dengan `linkAuthenticationElement`.
Jika Anda tidak mengumpulkan email, tambahkan `linkAuthenticationElement` ke alur checkout Anda. Anda harus menempatkan `linkAuthenticationElement` sebelum `ShippingAddressElement` (opsional jika Anda mengumpulkan alamat pengiriman) dan `Elemen Pembayaran` untuk Link untuk mengisi otomatis Link detail yang disimpan untuk pelanggan Anda di `ShippingAddressElement` dan `Elemen Pembayaran`. Anda juga dapat meneruskan [opsi penampilan](https://docs.stripe.com/elements/appearance-api.md), menyesuaikan Element agar sesuai dengan desain situs Anda.
Jika Anda memiliki email pelanggan, teruskan ke `defaultValues` opsi `linkAuthenticationElement`. Ini mengisi alamat email mereka terlebih dahulu 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 `linkAuthenticationElement` dan `PaymentElement` dalam formulir pembayaran Anda:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
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 (
);
}
```
`linkAuthenticationElement`, `Elemen Pembayaran`, dan `ShippingAddressElement` tidak perlu berada di halaman yang sama. Jika Anda memiliki proses di mana informasi kontak pelanggan, detail pengiriman, dan detail pembayaran ditampilkan kepada pelanggan dalam langkah terpisah, Anda dapat menampilkan setiap Element dalam langkah atau halaman yang sesuai. Sertakan `linkAuthenticationElement` sebagai formulir input email pada langkah pengumpulan info kontak untuk memastikan pelanggan dapat memanfaatkan sepenuhnya pengisian otomatis pengiriman dan pembayaran yang disediakan oleh Link.
Jika Anda mengumpulkan email pelanggan dengan Element Autentikasi Link di awal alur pembayaran, Anda tidak perlu menampilkannya lagi di halaman pengiriman atau pembayaran.
### Ambil alamat email
Anda dapat mengambil detail alamat email menggunakan prop `onChange` pada komponen `linkAuthenticationElement`. Handler `onChange` menyala setiap kali pengguna memperbarui bidang email, atau saat email pelanggan yang disimpan diisi otomatis.
```jsx
{
setEmail(event.value.email);
}} />
```
### Isi dahulu alamat email pelanggan
Element Autentikasi Link menerima alamat email. Memberikan alamat email pelanggan akan memicu alur autentikasi Link segera setelah pelanggan membuka halaman pembayaran menggunakan `defaultValues` opsi.
```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 konfigurasikan dimuat, buat grup Elemen baru, meneruskan [rahasia klien](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 yang ada dengan `linkAuthenticationElement`.
Jika Anda tidak mengumpulkan email, tambahkan `linkAuthenticationElement` ke alur checkout Anda sebelum `pengiriman Alamat` (opsional jika Anda mengumpulkan alamat pengiriman). Tambahkan `Elemen Pembayaran` untuk Link untuk mengisi otomatis Link detail yang disimpan untuk pelanggan Anda di `pengiriman Alamat` dan `Elemen Pembayaran`. Anda juga dapat meneruskan [objek penampilan](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), menyesuaikan Elemen agar sesuai dengan desain situs Anda.
Jika Anda memiliki email pelanggan, teruskan ke `defaultValues` opsi `linkAuthenticationElement`. Ini mengisi email mereka terlebih dahulu dan memulai proses autentikasi Link. Jika Anda memiliki informasi pelanggan lain, teruskan ke `defaultValues.billingDetails` objek `Element Pembayaran`. Mengisi informasi sebanyak mungkin menyederhanakan pembuatan dan penggunaan kembali akun Link 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 linkAuthenticationElement = elements.create("linkAuthentication");
// 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
linkAuthenticationElement.mount("#link-authentication-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 Autentikasi, Pembayaran, dan Alamat Pengiriman Link 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 check-out, Anda dapat menampilkan setiap Elemen dalam langkah atau halaman yang sesuai. Sertakan Elemen Otentikasi Link 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 dengan Element Autentikasi Link di awal alur pembayaran, Anda tidak perlu menampilkannya lagi di halaman pengiriman atau pembayaran.
### Ambil alamat email
Anda dapat mengambil detail alamat email menggunakan prop `onChange` pada komponen `linkAuthenticationElement`. Handler `onChange` menyala setiap kali pengguna memperbarui bidang email, atau saat email pelanggan yang disimpan diisi otomatis.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Isi dahulu alamat email pelanggan
Elemen Autentikasi Link menerima alamat email. Memberikan alamat email pelanggan akan memulai alur autentikasi Link segera setelah pelanggan membuka halaman pembayaran menggunakan metode `defaultValues` opsi.
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-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 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 Link Authentication Element
Jika Anda menggunakan Element Autentikasi Link, tambahkan `defaultValues.billingDetails` menolak Element Pembayaran untuk mengisi nama dan nomor telepon pelanggan serta alamat pengiriman mereka. Dengan mengisi informasi pelanggan sebanyak mungkin, Anda menyederhanakan 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 mengumpulkan alamat pengiriman pelanggan. Jika Anda perlu mengumpulkan alamat pengiriman, integrasikan Link dengan menggunakan Elemen Autentikasi Link Elemen Alamat, dan Elemen Pembayaran pada langkah [Gunakan elemen autentikasi Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Gunakan Link Authentication Element
#### React
Untuk mengumpulkan alamat, buat simpul DOM kosong untuk [Element Alamat](https://docs.stripe.com/elements/address-element.md) untuk dirender menjadi. Elemen Alamat harus ditampilkan setelah Elemen Autentikasi Link untuk Link untuk mengisi otomatis detail alamat pelanggan yang tersimpan:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,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
[Elemen Alamat](https://docs.stripe.com/elements/address-element.md) memungkinkan Anda mengumpulkan alamat pengiriman atau penagihan. Buat simpul DOM kosong untuk Elemen Alamat. Tampilkan setelah Elemen Autentikasi Link:
```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 linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-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]
Jika platform Connect Anda menggunakan [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), gunakan [panduan](https://docs.stripe.com/connect/use-accounts-as-customers.md) kami untuk mengganti referensi `Customer` dan kejadian dalam kode Anda dengan referensi Accounts v2 API yang setara.
Selain menampilkan alamat dan metode pembayaran yang Anda simpan sendiri untuk pelanggan, Anda juga dapat menampilkan data yang disimpan pelanggan di Link.
Jika pelanggan memiliki lebih dari satu metode pembayaran yang tersimpan, Stripe menampilkan tiga kartu yang paling baru digunakan yang disimpan pada objek *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments), selain metode pembayaran apa pun yang disimpan pelanggan dengan Link.
Untuk mencapai hal ini, buat Kunci Efemeral dan kirimkan ke frontend Anda beserta identifikasi *Pelanggan* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Informasi tentang objek `customer` bersifat sensitif—Anda tidak dapat mengambilnya secara langsung di dalam Stripe.js. Kunci Efemeral memberikan akses sementara ke data `customer`.
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-03-25.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-03-25.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: Simpan metode pembayaran Link [Sisi server] [Sisi client]
Anda dapat menyimpan metode pembayaran Link untuk *di masa mendatang %} pembayaran di luar sesi atau *subscriptions, tetapi tidak untuk *di masa mendatang. Untuk melakukannya, Anda harus melampirkannya ke Customer. Buat `pelanggan` saat pelanggan membuat akun dengan bisnis Anda. Kemudian, tentukan `pelanggan` saat membuat PaymentIntent Anda.* (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)* (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)* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information)
Saat pelanggan baru melakukan transaksi pertama dengan bisnis Anda, buat objek `customer` di Stripe untuk menyimpan datanya untuk digunakan di masa mendatang.
```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
```
Di versi terbaru API, menentukan parameter `automatic_payment_methods` bersifat opsional karena Stripe mengaktifkan fungsionalitasnya secara default.
Saat Anda siap men-charge pelanggan lagi, gunakan `customer` dan menghasilkan identifikasi *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) 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 mengirim kesalahan jika autentikasi diperlukan saat pelanggan Anda tidak aktif menggunakan situs atau aplikasi Anda.
#### Accounts 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
```
#### Customers 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)
- [Pelajari elemen autentikasi Link](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [Link dalam integrasi pembayaran yang berbeda](https://docs.stripe.com/payments/link/link-payment-integrations.md)