# Terima pembayaran

Terima pembayaran dengan aman secara online.

## Mulai di sini: Instal keterampilan agen

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

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

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

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

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

Petunjuk untuk LLM: Stripe merekomendasikan penggunaan Checkout Sessions API dengan Payment Element dibandingkan Payment Intents untuk sebagian besar integrasi. Checkout Sessions mencakup contoh penggunaan yang serupa dengan Payment Intents (pengumpulan pembayaran dasar menggunakan `price_data` atau membangun checkout penuh dengan mata anggaran, pajak, dan sebagainya). Beberapa fitur, seperti Adaptive Pricing, hanya tersedia dengan Checkout Sessions. Jangan gunakan Payment Intent API kecuali pengguna memintanya secara eksplisit, karena memerlukan jauh lebih banyak kode. Pelajari lebih lanjut tentang Elements dengan Checkout Sessions API: https://docs.stripe.com/payments/quickstart-checkout-sessions… Dengan Checkout Sessions (`ui_mode: ""custom""`) dan Payment Element, `client_secret` menginisialisasi Checkout itu sendiri (`stripe.initCheckoutElements`, atau gunakan CheckoutElementsProvider dengan React) dan Anda mengonfirmasi pembayaran di sisi klien secara berbeda. Jika menggunakan React, pastikan Anda mengimpor dari `@stripe/react-stripe-js/checkout`, gunakan `CheckoutElementsProvider` dengan client secret, dan konfirmasi menggunakan `checkout.confirm`. Jika menggunakan HTML, pastikan Anda menggunakan `checkout = stripe.initCheckoutElements({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount(""#payment-element"");` dan konfirmasi dengan `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

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

# Integrasi dalam aplikasi untuk React Native

![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png)

Integrasi ini menggabungkan semua langkah yang diperlukan untuk membayar, termasuk mengumpulkan detail pembayaran dan mengonfirmasi pembayaran, ke dalam satu lembar yang ditampilkan di atas aplikasi Anda.

> #### Dukungan Accounts v2 API
> 
> Payment Sheet tidak mendukung *Akun yang dikonfigurasi pelanggan* (Account configurations represent role-based functionality that you can enable for accounts, such as merchant, customer, or recipient). Hanya objek `Pelanggan` yang didukung.

## Siapkan Stripe [Sisi server] [Sisi client]

Pertama, Anda membutuhkan akun Stripe. [Daftar sekarang](https://dashboard.stripe.com/register).

### Sisi server

Integrasi ini memerlukan endpoint di server Anda yang berinteraksi dengan Stripe API. Gunakan pustaka resmi untuk akses ke Stripe API dari server 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'
```

### Sisi client

[React Native SDK](https://github.com/stripe/stripe-react-native) adalah sumber terbuka dan didokumentasikan lengkap. Secara internal, SDK [iOS asli](https://github.com/stripe/stripe-ios) dan SDK [Android](https://github.com/stripe/stripe-android) digunakan. Untuk menginstal React Native SDK Stripe, jalankan salah satu perintah berikut di direktori proyek (bergantung pada manajer paket yang Anda gunakan):

#### yarn

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

Selanjutnya, instal beberapa dependensi lain yang diperlukan:

- Untuk iOS, buka direktori **ios** dan jalankan `pod install` untuk memastikan bahwa Anda juga menginstal dependensi asli yang diperlukan.
- Untuk Android, tidak ada lagi ketergantungan yang harus diinstal.

> Sebaiknya ikuti [panduan TypeScript resmi](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) untuk menambahkan dukungan TypeScript.

### Inisialisasi Stripe

Untuk menginisialisasi Stripe di aplikasi React Native, bungkus layar pembayaran dengan komponen `StripeProvider`, atau gunakan metode inisialisasi `initStripe`. Hanya [kunci yang dapat dipublikasikan](https://docs.stripe.com/keys.md#obtain-api-keys) API di `publishableKey` yang diperlukan. Contoh berikut menunjukkan cara menginisialisasi Stripe menggunakan komponen `StripeProvider`.

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> Gunakan [kunci percobaan](https://docs.stripe.com/keys.md#obtain-api-keys) API Anda saat mencoba serta mengembangkan, dan kunci [mode live](https://docs.stripe.com/keys.md#test-live-modes) bila Anda memublikasikan aplikasi.

## Aktifkan metode pembayaran

Lihat [pengaturan metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods).

Secara default, Stripe mengaktifkan kartu dan metode pembayaran umum lainnya yang dapat membantu menjangkau lebih banyak pelanggan, tetapi sebaiknya aktifkan metode pembayaran tambahan yang relevan untuk bisnis dan pelanggan Anda. Lihat [Dukungan metode pembayaran](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) untuk dukungan produk dan metode pembayaran, dan [halaman skema biaya](https://stripe.com/pricing/local-payment-methods) kami untuk mengetahui biayanya.

## Tambahkan endpoint [Sisi server]

> #### Catatan
> 
> Untuk menampilkan PaymentSheet sebelum membuat PaymentIntent, lihat [Kumpulkan detail pembayaran sebelum membuat Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Integrasi ini menggunakan tiga objek API Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.

1. (Opsional) Objek [Akun yang dikonfigurasi pelanggan](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) atau [Pelanggan](https://docs.stripe.com/api/customers.md): Untuk menyiapkan metode pembayaran untuk pembayaran mendatang, Anda harus melampirkannya ke pelanggan. Buat objek yang mewakili pelanggan Anda saat mereka membuat akun di bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek `Akun` atau `Pelanggan` sebelum pembayaran dan menghubungkannya dengan representasi internal akun pelanggan Anda nanti.

1. (Opsional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): Informasi pada objek yang mewakili pelanggan Anda bersifat sensitif dan tidak dapat diambil langsung dari aplikasi. `CustomerSession` memberikan SDK akses berlingkup sementara ke `Akun` atau `Pelanggan` dan menyediakan opsi konfigurasi tambahan. Lihat daftar lengkap [opsi konfigurasi](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Jika Anda tidak pernah menyimpan kartu untuk pelanggan dan tidak mengizinkan pelanggan lama menggunakan kembali kartu yang disimpan, Anda dapat meniadakan objek `Akun` atau `Pelanggan` dan objek `CustomerSession` dari integrasi Anda.

Karena alasan keamanan, aplikasi Anda tidak dapat membuat objek ini. Sebagai gantinya, tambahkan endpoint di server Anda yang:

1. Mengambil `Akun` atau `Pelanggan`, atau membuat yang baru.
1. Membuat [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) untuk `Akun` atau `Pelanggan`.
1. Membuat `PaymentIntent` dengan [jumlah](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [mata uang](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), serta [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) atau [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer).
1. Mengembalikan *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)) dari `PaymentIntent`, `client_secret` dari `CustomerSession`, ID dari `Akun` atau `Pelanggan`, dan [publishable key](https://dashboard.stripe.com/apikeys) Anda ke aplikasi.

Metode pembayaran yang ditampilkan kepada pelanggan selama proses checkout juga disertakan dalam PaymentIntent. Anda dapat mengizinkan Stripe menarik metode pembayaran dari pengaturan Dashboard atau Anda dapat mencantumkannya secara manual. Terlepas dari opsi yang Anda pilih, ketahui mata uang yang diteruskan di PaymentIntent memfilter metode pembayaran yang ditampilkan kepada pelanggan. Misalnya, jika Anda meneruskan `eur` pada PaymentIntent dan mengaktifkan OXXO di Dashboard, OXXO tidak akan ditampilkan kepada pelanggan karena OXXO tidak mendukung pembayaran `eur`.

Kecuali jika integrasi Anda memerlukan opsi berbasis kode untuk menawarkan metode pembayaran, Stripe merekomendasikan opsi otomatis. Hal ini karena Stripe mengevaluasi mata uang, pembatasan metode pembayaran, dan parameter lainnya untuk menentukan daftar metode pembayaran yang didukung. Metode pembayaran yang meningkatkan konversi serta yang paling relevan dengan mata uang dan lokasi pelanggan akan diprioritaskan.

#### Kelola metode pembayaran dari Dashboard

Anda dapat mengelola metode pembayaran dari [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe menangani pengembalian metode pembayaran yang memenuhi syarat berdasarkan faktor-faktor seperti jumlah transaksi, mata uang, dan alur pembayaran. PaymentIntent dibuat menggunakan metode pembayaran yang Anda konfigurasikan di Dashboard. Jika tidak ingin menggunakan Dashboard atau jika ingin menentukan metode pembayaran secara manual, Anda dapat mencantumkannya menggunakan atribut `payment_method_types`.

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \

  -d "automatic_payment_methods[enabled]"=true \
```

#### Cantumkan metode pembayaran secara manual

#### curl

```bash
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[mobile_payment_element][enabled]"=true \
  -d "components[mobile_payment_element][features][payment_method_save]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \
  -d "components[mobile_payment_element][features][payment_method_remove]"=enabled

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "payment_method_types[]"="bancontact" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="ideal" \
  -d "payment_method_types[]"="klarna" \
  -d "payment_method_types[]"="sepa_debit" \
```

> Setiap metode pembayaran perlu mendukung mata uang yang diteruskan di PaymentIntent dan bisnis Anda perlu berlokasi di salah satu negara yang didukung oleh setiap metode pembayaran. Lihat halaman [Opsi integrasi metode pembayaran](https://docs.stripe.com/payments/payment-methods/integration-options.md) untuk detail selengkapnya tentang apa yang didukung.

## Kumpulkan detail pembayaran [Sisi client]

Sebelum menampilkan Payment Element seluler, halaman checkout Anda harus:

- Tampilkan produk yang sedang dibeli dan jumlah totalnya
- Kumpulkan setiap informasi pengiriman yang diperlukan
- Sertakan tombol checkout untuk menyajikan UI Stripe

Dalam checkout aplikasi Anda, buat permintaan jaringan ke endpoint backend yang Anda buat di langkah sebelumnya dan panggil `initPaymentSheet` dari hook `useStripe`.

#### Akun v2

```javascript
export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer_account } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer_account,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer_account,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerAccountId: customer_account,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business accepts payment
      // methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

#### Pelanggan v1

```javascript

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Ketika pelanggan mengetuk tombol **Checkout**, panggil `presentPaymentSheet()` untuk membuka lembaran. Setelah pelanggan menyelesaikan pembayaran ini, lembaran akan ditutup dan janji akan diselesaikan dengan `StripeError<PaymentSheetError>` opsional.

```javascript
export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Jika tidak ada kesalahan, beri tahu pelanggan bahwa prosesnya sudah selesai (misalnya, dengan menampilkan layar konfirmasi pesanan).

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.

## Siapkan URL kembali Anda (hanya iOS) [Sisi client]

Bila pelanggan keluar dari aplikasi Anda (misalnya untuk melakukan autentikasi di Safari atau aplikasi perbankan), sediakan cara agar pelanggan dapat kembali ke aplikasi Anda secara otomatis. Banyak tipe metode pembayaran *memerlukan* URL kembali. Jika Anda tidak memberikannya, kami tidak dapat menyajikan metode pembayaran yang mengharuskan URL kembali kepada pengguna, sekalipun Anda telah mengaktifkannya.

Untuk memberikan URL kembali:

1. [Daftarkan](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) URL custom. Tautan universal tidak didukung.
1. [Konfigurasikan](https://reactnative.dev/docs/linking) URL custom Anda.
1. Siapkan komponen root Anda untuk meneruskan URL ke SDK Stripe seperti yang ditunjukkan di bawah ini.

> Jika Anda menggunakan Expo, [atur skema](https://docs.expo.io/guides/linking/#in-a-standalone-app) di file `app.json`.

```jsx
import { useEffect, useCallback } from 'react';
import { Linking, View } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}
```

Selain itu, atur `returnURL` bila Anda memanggil metode `initPaymentSheet`:

```js
await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});
```

Untuk informasi selengkapnya tentang skema URL asli, baca dokumen [Android](https://developer.android.com/training/app-links/deep-linking) dan [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app).

## Tangani kejadian pascapembayaran

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

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

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

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

## Coba integrasi

#### Kartu

| Nomor kartu         | Skenario                                                                                                                                                                                                                                                                                     | Cara mencoba                                                                                                         |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Pembayaran kartu berhasil dan tidak memerlukan autentikasi.                                                                                                                                                                                                                                  | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000002500003155    | Pembayaran kartu memerlukan *autentikasi* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 4000000000009995    | Kartu ini ditolak dengan kode penolakan seperti `insufficient_funds`.                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |
| 6205500000000000004 | Kartu UnionPay memiliki panjang variabel 13–19 angka.                                                                                                                                                                                                                                        | Isilah formulir kartu kredit menggunakan nomor kartu kredit dengan sembarang tanggal kedaluwarsa, CVC, dan kode pos. |

#### Pengarahan ulang bank

| Metode pembayaran | Skenario                                                                                                                                                                                                  | Cara mencoba                                                                                                                                                                                           |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Bancontact, iDEAL | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi segera dan berbasis pengarahan ulang.                                                    | Pilih sembarang metode pembayaran berbasis pengarahan ulang, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang. |
| Pay by Bank       | Pelanggan Anda berhasil membayar menggunakan metode pembayaran dengan [notifikasi tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) dan berbasis pengarahan ulang.      | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Selesaikan pembayaran percobaan** di halaman pengarahan ulang.                                   |
| Pay by Bank       | Pelanggan Anda gagal melakukan autentikasi di halaman pengarahan ulang untuk metode pembayaran dengan notifikasi tertunda dan berbasis pengarahan ulang.                                                  | Pilih metode pembayaran, isilah detail yang diperlukan, dan konfirmasikan pembayaran. Kemudian klik **Gagalkan pembayaran percobaan** di halaman pengarahan ulang.                                     |
| BLIK              | Pembayaran BLIK gagal dalam berbagai cara — kegagalan langsung (misalnya, kode kedaluwarsa atau tidak valid), kesalahan tertunda (bank menolak) atau waktu habis (pelanggan tidak merespons tepat waktu). | Gunakan pola email untuk [menyimulasikan berbagai kegagalan.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                             |

#### Debit bank

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

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

## Aktifkan pemindaian kartu [Sisi client]

> Pengaktifan pemindaian kartu diperlukan untuk proses peninjauan aplikasi iOS Apple. Pemindaian kartu tidak diperlukan untuk proses peninjauan aplikasi Android, tetapi sebaiknya aktifkan.

### iOS

Untuk mengaktifkan dukungan pemindaian kartu untuk iOS, atur `NSCameraUsageDescription` (**Privacy - Camera Usage Description**) di dalam `Info.plist` aplikasi Anda, dan berikan alasan untuk mengakses kamera (misalnya, “Untuk memindai kartu”).

### (Opsional) Android

Untuk mengaktifkan dukungan pemindaian kartu, [minta akses produksi](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) ke Google Pay API dari [Google Pay dan Wallet Console](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite).

- Jika Anda sudah mengaktifkan Google Pay, fitur pemindaian kartu tersedia secara otomatis di UI kami pada perangkat yang memenuhi syarat. Untuk mempelajari lebih lanjut mengenai perangkat yang memenuhi syarat, baca [Google Pay API](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition)
- **Penting:** Fitur pemindaian kartu hanya muncul di versi yang ditandatangani dengan kunci penandatanganan yang sama yang terdaftar di [Google Pay & Wallet Console](https://pay.google.com/business/console). Pembuatan percobaan atau debug menggunakan kunci penandatanganan yang berbeda (misalnya, pembuatan yang didistribusikan melalui Firebase App Tester) tidak akan menampilkan opsi **Pindai kartu**. Untuk mencoba pemindaian kartu di versi pra-rilis, Anda harus:
  - Menandatangani build pengujian Anda dengan kunci penandatanganan produksi Anda
  - Menambahkan sidik jari kunci penandatanganan pengujian Anda ke Google Pay dan Wallet Console

Jika aplikasi Anda tidak didukung Google Pay, Anda dapat menggunakan pemindai kartu Stripe.

> Pemindai kartu Stripe saat ini tersedia dalam pratinjau publik.

Untuk mengaktifkan dukungan pemindaian kartu, tambahkan `stripecardscan` ke dalam blok `dependencies` dari file [app/build.gradle](https://developer.android.com/studio/build/dependencies) Anda:

#### Groovy

```groovy
implementation 'com.stripe:stripecardscan:23.9.2'
```

## Optional: Enable Link

Aktifkan Link di [Setelan Metode pembayaran](https://dashboard.stripe.com/settings/payment_methods) untuk memungkinkan pelanggan Anda menyimpan dan menggunakan kembali informasi pembayaran mereka dengan aman menggunakan tombol checkout ekspres satu klik Link.

### Teruskan email pelanggan Anda ke Mobile Payment Element

Link mengautentikasi pelanggan menggunakan alamat email mereka. Stripe merekomendasikan untuk mengisi informasi sebanyak mungkin untuk merampingkan proses checkout.

Untuk mengisikan otomatis nama pelanggan, alamat email, dan nomor telepon, berikan `defaultBillingDetails` dengan informasi pelanggan Anda ke `initPaymentSheet`.

```javascript
await initPaymentSheet({
  ...
  defaultBillingDetails: {
    name: 'Jenny Rosen',
    email: 'jenny.rosen@example.com',
    phone: '888-888-8888',
  },
});
```

### Tangani proses keluar pengguna

`Lembar Pembayaran` menyimpan beberapa informasi secara lokal untuk mengingat apakah pengguna telah menggunakan Link dalam aplikasi. Untuk menghapus status internal `Lembar Pembayaran`, panggil `resetPaymentSheetCustomer()` saat pengguna keluar.

```javascript
export default function CheckoutScreen() {
  // continued from above
  const { initPaymentSheet, presentPaymentSheet, resetPaymentSheetCustomer } = useStripe();

  const logout = async () => {
    await resetPaymentSheetCustomer();
  };

  return (
    <Screen>
      <Button
        title="Checkout"
        onPress={openPaymentSheet}
      />
      <Button
        title="Checkout"
        onPress={logout}
      />
    </Screen>
  );
}
```

## Optional: Aktifkan Apple Pay

### Mendaftar Apple Merchant ID

Dapatkan Apple Merchant ID dengan [mendaftar identifier baru](https://developer.apple.com/account/resources/identifiers/add/merchant) di situs web Apple Developer.

Isi formulir dengan keterangan dan identifier. Keterangan adalah untuk catatan Anda sendiri dan nanti dapat diubah. Stripe merekomendasikan penggunaan nama aplikasi Anda sebagai identifier (misalnya, `merchant.com.{{YOUR_APP_NAME}}`).

### Buat sertifikat Apple Pay yang baru

Buat sertifikat untuk aplikasi Anda guna mengenkripsi data pembayaran.

Buka [Pengaturan Sertifikat iOS](https://dashboard.stripe.com/settings/ios_certificates) di Dashboard, klik **Tambahkan aplikasi baru**, dan ikuti panduannya.

Unduh file Permintaan Penandatanganan Sertifikat (CSR) untuk mendapatkan sertifikat aman dari Apple yang memungkinkan Anda menggunakan Apple Pay.

Satu file CSR harus digunakan untuk menerbitkan tepat satu sertifikat. Jika Anda mengganti Apple Merchant ID, Anda harus membuka [Pengaturan Sertifikat iOS](https://dashboard.stripe.com/settings/ios_certificates) di Dashboard untuk mendapatkan CSR dan sertifikat baru.

### Integrasikan dengan Xcode

Tambahkan kemampuan Apple Pay ke aplikasi Anda. Di Xcode, buka pengaturan proyek, klik tab **Signing & Capabilities**, dan tambahkan kemampuan **Apple Pay**. Pada saat ini Anda mungkin diminta untuk masuk ke akun pengembang. Pilih identifikasi merchant yang Anda buat sebelumnya, dan aplikasi Anda siap menyetujui Apple Pay.
![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png)

Aktifkan kemampuan Apple Pay di Xcode

### Tambahkan Apple Pay

#### Pembayaran satu kali

Teruskan identifikasi merchant bila Anda membuat `StripeProvider`:

```javascript
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="<<YOUR_PUBLISHABLE_KEY>>"
      merchantIdentifier="MERCHANT_ID"
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

Saat Anda memanggil `initPaymentSheet`, teruskan [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams):

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    merchantCountryCode: 'US',
  },
});
```

#### Pembayaran rutin

Bila Anda memanggil `initPaymentSheet`, teruskan [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams) dengan `merchantCountryCode`yang diatur ke kode negara bisnis Anda.

Sesuai dengan [pedoman Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) untuk pembayaran rutin, Anda juga harus menetapkan `kartuItem` yang mencakup [RutinCartSummaryItem](https://stripe.dev/stripe-react-native/api-reference/modules/ApplePay.html#RecurringCartSummaryItem) dengan jumlah yang ingin Anda kenakan (misalnya, “59,95 USD per bulan”).

Anda juga dapat mengadopsi [token merchant](https://developer.apple.com/apple-pay/merchant-tokens/) dengan mengatur `type` di `request` ke `PaymentRequestType.Recurring`

Untuk mempelajari lebih lanjut cara menggunakan pembayaran rutin dengan Apple Pay, lihat [dokumentasi Apple PassKit](https://developer.apple.com/documentation/passkit/pkpaymentrequest).

#### iOS (React Native)

```javascript
const initializePaymentSheet = async () => {
  const recurringSummaryItem = {
    label: 'My Subscription',
    amount: '59.99',
    paymentType: 'Recurring',
    intervalCount: 1,
    intervalUnit: 'month',
    // Payment starts today
    startDate: new Date().getTime() / 1000,

    // Payment ends in one year
    endDate: new Date().getTime() / 1000 + 60 * 60 * 24 * 365,
  };

  const {error} = await initPaymentSheet({
    // ...
    applePay: {
      merchantCountryCode: 'US',
      cartItems: [recurringSummaryItem],
      request: {
        type: PaymentRequestType.Recurring,
        description: 'Recurring',
        managementUrl: 'https://my-backend.example.com/customer-portal',
        billing: recurringSummaryItem,
        billingAgreement:
          "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'",
      },
    },
  });
};
```

### Pelacakan pesanan

Untuk menambah informasi [pelacakan pesanan](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) di iOS 16 atau lebih baru, konfigurasikan fungsi callback `setOrderTracking`. Stripe memanggil implementasi Anda setelah pembayaran selesai, tetapi sebelum iOS menutup lembar Apple Pay.

Dalam implementasi fungsi callback `setOrderTracking`, ambil detail pesanan dari server Anda untuk pesanan yang sudah selesai, dan lewatkan detail ke fungsi `completion` yang disediakan.

Untuk mempelajari pelacakan pesanan selengkapnya, lihat [dokumentasi Apple’s Wallet Orders](https://developer.apple.com/documentation/walletorders).

#### iOS (React Native)

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    // ...
    setOrderTracking: async complete => {
      const apiEndpoint =
        Platform.OS === 'ios'
          ? 'http://localhost:4242'
          : 'http://10.0.2.2:4567';
      const response = await fetch(
        `${apiEndpoint}/retrieve-order?orderId=${orderId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (response.status === 200) {
        const orderDetails = await response.json();
        // orderDetails should include orderIdentifier, orderTypeIdentifier,
        // authenticationToken and webServiceUrl
        complete(orderDetails);
      }
    },
  },
});
```

## Optional: Aktifkan Google Pay

### Siapkan integrasi Anda

Untuk menggunakan Google Pay, pertama aktifkan Google Pay API dengan menambahkan yang berikut ini ke tag `<application>` **AndroidManifest.xml** Anda:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Untuk detail selengkapnya, lihat [Siapkan Google Pay API](https://developers.google.com/pay/api/android/guides/setup) untuk Android dari Google Pay.

### Tambahkan Google Pay

Bila Anda memprakarsai `PaymentSheet`, atur `merchantCountryCode` ke kode negara bisnis Anda dan atur `googlePay` ke true.

Anda juga dapat menggunakan lingkungan percobaan dengan meneruskan parameter `testEnv`. Anda hanya dapat mencoba Google Pay pada perangkat fisik Android. Ikuti [dokumen React Native](https://reactnative.dev/docs/running-on-device) untuk mencoba aplikasi Anda pada perangkat fisik.

```javascript
const { error, paymentOption } = await initPaymentSheet({
  // ...
  googlePay: {
    merchantCountryCode: 'US',
    testEnv: true, // use test environment
  },
});
```

## Optional: Sesuaikan lembaran [Sisi client]

Semua penyesuaian dikonfigurasi menggunakan `initPaymentSheet`.

### Penampilan

Sesuaikan warna, font, dan sebagainya agar sesuai dengan tampilan dan nuansa aplikasi Anda dengan menggunakan [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native).

### Nama tampilan merchant

Tentukan nama bisnis yang dilihat pelanggan dengan mengatur `merchantDisplayName`. Secara default, ini adalah nama aplikasi Anda.

```javascript
await initPaymentSheet({
  // ...
  merchantDisplayName: 'Example Inc.',
});
```

### Mode gelap

Secara default `PaymentSheet` akan beradaptasi otomatis dengan pengaturan penampilan skala-sistem pengguna (mode terang dan gelap). Anda dapat mengubahnya dengan mengatur properti `style` ke mode `alwaysLight` atau `alwaysDark` di iOS.

```javascript
await initPaymentSheet({
  // ...
  style: 'alwaysDark',
});
```

Di Android, atur mode terang atau gelap pada aplikasi Anda:

```
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

## Optional: Selesaikan pembayaran di UI Anda

Anda dapat menyajikan Lembar Pembayaran untuk hanya mengumpulkan detail metode pembayaran, kemudian memanggil metode `confirm` untuk menyelesaikan pembayaran di UI aplikasi Anda. Hal ini akan berguna jika Anda memiliki tombol beli custom atau memerlukan langkah tambahan setelah detail pembayaran dikumpulkan.
![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png)

> Sampel integrasi [tersedia di GitHub kami](https://github.com/stripe/stripe-react-native/blob/master/example/src/screens/PaymentsUICustomScreen.tsx).

1. Pertama, panggil `initPaymentSheet` dan teruskan `customFlow: true`. `initPaymentSheet` diselesaikan dengan opsi pembayaran awal yang berisi gambar dan label yang mewakili metode pembayaran pelanggan. Perbarui UI Anda dengan detail ini.

```javascript
const {
  initPaymentSheet,
  presentPaymentSheet,
  confirmPaymentSheetPayment,
} = useStripe()

const { error, paymentOption } = await initPaymentSheet({
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  paymentIntentClientSecret: paymentIntent,
  customFlow: true,
  merchantDisplayName: 'Example Inc.',
});
// Update your UI with paymentOption
```

1. Gunakan `presentPaymentSheet` untuk mengumpulkan detail pembayaran. Saat pelanggan selesai, lembaran akan menutup sendiri dan menyelesaikan janjinya. Perbarui UI Anda dengan detail metode pembayaran yang dipilih.

```javascript
const { error, paymentOption } = await presentPaymentSheet();
```

1. Gunakan `confirmPaymentSheetPayment` untuk mengonfirmasi pembayaran. Ini diselesaikan dengan hasil pembayaran.

```javascript
const { error } = await confirmPaymentSheetPayment();

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else {
  Alert.alert(
    'Success',
    'Your order is confirmed!'
  );
}
```

Mengatur `allowsDelayedPaymentMethods` ke true memungkinkan metode pembayaran [pemberitahuan tertunda](https://docs.stripe.com/payments/payment-methods.md#payment-notification) seperti rekening bank AS. Untuk metode pembayaran ini, status pembayaran finalnya tidak diketahui bila `PaymentSheet` selesai, dan berhasil atau gagal sebagai gantinya nanti. Jika Anda mendukung jenis pembayaran ini, informasikan kepada pelanggan bahwa pesanannya telah dikonfirmasi dan hanya memenuhi pesanan (misalnya, mengirim produknya) bila pembayaran berhasil.