Terima pembayaran

Pertama, Anda membutuhkan akun Stripe. Daftar sekarang.

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:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Sisi client

React Native SDK adalah sumber terbuka dan didokumentasikan lengkap. Secara internal, SDK iOS asli dan SDK Android digunakan. Untuk menginstal React Native SDK Stripe, jalankan salah satu perintah berikut di direktori proyek (bergantung pada manajer paket yang Anda gunakan):

yarn add @stripe/stripe-react-native

Selanjutnya, instal beberapa dependensi lain yang diperlukan:

• Untuk iOS, navigasikan ke 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.

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 API di publishableKey yang diperlukan. Contoh berikut menunjukkan cara menginisialisasi Stripe menggunakan komponen StripeProvider.

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>
  );
}

Lihat pengaturan metode pembayaran dan aktifkan metode pembayaran yang ingin Anda dukung. Anda membutuhkan setidaknya satu metode pembayaran yang diaktifkan untuk membuat PaymentIntent.

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 untuk dukungan produk dan metode pembayaran, dan halaman skema biaya kami untuk mengetahui biayanya.

Integrasi ini menggunakan tiga objek API Stripe:

1. PaymentIntent: Stripe menggunakannya untuk mewakili maksud Anda menagih pembayaran dari pelanggan, yang melacak upaya charge dan perubahan status pembayaran selama proses.

2. (Opsional) Pelanggan: Untuk menyiapkan metode pembayaran bagi pembayaran mendatang, Anda harus melampirkannya ke Pelanggan. Buat objek Pelanggan saat pelanggan membuat akun pada bisnis Anda. Jika pelanggan melakukan pembayaran sebagai tamu, Anda dapat membuat objek Pelanggan sebelum pembayaran dan mengaitkannya dengan representasi internal Anda sendiri dari akun pelanggan nanti.

3. (Opsional) Kunci Efemeral Pelanggan: Informasi mengenai objek Pelanggan bersifat sensitif, dan tidak dapat diambil langsung dari aplikasi. Kunci Efemeral memberikan akses sementara SDK kepada Pelanggan.

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

1. Mengambil Pelanggan, atau membuat yang baru.
2. Membuat Kunci Efemeral untuk Pelanggan.
3. Membuat PaymentIntent dengan amount, currency, dan customer. Secara opsional, Anda juga dapat menyertakan parameter automatic_payment_methods. Stripe mengaktifkan fungsinya secara default di versi terbaru API.
4. Mengembalikan client secret Payment Intent, secret Kunci Efemeral, id Pelanggan, dan kunci yang dapat dipublikasikan ke aplikasi Anda.

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.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-05-28.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \

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.

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.

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, informasikan pengguna bahwa mereka selesai (misalnya, dengan menampilkan layar konfirmasi pesanan).

Mengatur allowsDelayedPaymentMethods ke true memungkinkan metode pembayaran pemberitahuan tertunda 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.

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 URL custom. Tautan universal tidak didukung.
2. Konfigurasikan URL custom Anda.
3. Siapkan komponen root Anda untuk meneruskan URL ke SDK Stripe seperti yang ditunjukkan di bawah ini.

import { useEffect, useCallback } from 'react';
import { Linking } 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:

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

Untuk informasi selengkapnya tentang skema URL asli, baca dokumen Android dan iOS.

Stripe mengirim kejadian payment_intent.succeeded ketika selesai pembayaran. Gunakan alat webhook Dashboard atau ikuti panduan webhook 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 dengan satu integrasi tunggal.

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

Lihat Pengujian untuk mendapatkan informasi tambahan untuk menguji integrasi Anda.