Apple Pay

Dapatkan Apple Merchant ID dengan mendaftar identifier baru 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 untuk aplikasi Anda guna mengenkripsi data pembayaran.

Buka Pengaturan Sertifikat iOS 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 di Dashboard untuk mendapatkan CSR dan sertifikat baru.

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.

Aktifkan kemampuan Apple Pay di Xcode

Di komponen StripeProvider, tentukan Apple Merchant ID yang berhasil Anda daftarkan:

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

function App() {
  return (
    <StripeProvider
      publishableKey="
pk_test_TYooMQauvdEDq54NiTphI7jx"
      merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}"
    >
      // Your app code here
    </StripeProvider>
  );
}

Sebelum menampilkan Apple Pay sebagai opsi pembayaran di aplikasi Anda, tentukan apakah perangkat pengguna mendukung Apple Pay dan memiliki kartu yang ditambahkan ke dompetnya:

import { PlatformPayButton, isPlatformPaySupported } from '@stripe/stripe-react-native';

function PaymentScreen() {
  const [isApplePaySupported, setIsApplePaySupported] = useState(false);

  useEffect(() => {
    (async function () {
      setIsApplePaySupported(await isPlatformPaySupported());
    })();
  }, [isPlatformPaySupported]);

  // ...

  const pay = async () => {
    // ...
  };

  // ...

  return (
    <View>
      {isApplePaySupported && (
        <PlatformPayButton
          onPress={pay}
          type={PlatformPay.ButtonType.Order}
          appearance={PlatformPay.ButtonStyle.Black}
          borderRadius={4}
          style={{
            width: '100%',
            height: 50,
          }}
        />
      )}
    </View>
  );
}

Sisi server

Buat endpoint yang menciptakan PaymentIntent dengan jumlah dan mata uang. Selalu putuskan berapa banyak yang akan di-charge pada sisi server, lingkungan tepercaya, bukan ke sisi client. Hal ini mencegah pelanggan jahat memilih harga mereka sendiri.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd"

Sisi klien

Buat metode yang meminta PaymentIntent dari server Anda:

function PaymentScreen() {
  // ...
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        some: 'value',
      }),
    });
    const { clientSecret } = await response.json();

    return clientSecret;
  };
  // ...
}

Pemecahan Masalah

Jika Anda melihat kesalahan dari Stripe API saat mencoba membuat token, kemungkinan besar Anda mengalami masalah dengan Apple Pay Certificate. Anda harus membuat sertifikat baru dan mengunggahnya ke Stripe, seperti yang dijelaskan di halaman ini. Pastikan Anda menggunakan CSR yang diperoleh dari Dashboard dan bukan yang Anda buat sendiri. Xcode sering salah menyimpan sertifikat lama dalam cache, jadi selain membuat sertifikat baru, Stripe juga merekomendasikan untuk membuat Apple Merchant ID baru.

Jika Anda menerima kesalahan:

Anda belum menambahkan akun merchant Apple ke Stripe

kemungkinan aplikasi Anda mengirimkan data yang dienkripsi dengan CSR/Sertifikat (non-Stripe) sebelumnya. Pastikan semua sertifikat yang dihasilkan oleh CSR non-Stripe dicabut dengan Apple Merchant ID Anda. Jika hal ini tidak memecahkan masalah, hapus identifikasi merchant di akun Apple Anda dan buat kembali. Kemudian, buat sertifikat baru berdasarkan CSR (disediakan Stripe) yang sama dengan yang digunakan sebelumnya. Anda tidak perlu mengunggah sertifikat baru ini ke Stripe. Setelah selesai, nonaktifkan dan aktifkan Apple Pay Credentials di aplikasi Anda untuk memastikannya dimuat kembali dengan benar.

Di properti PlatformPayButton onPress, panggil confirmPlatformPayPayment untuk membuka lembar Apple Pay. Guna menampilkan item keranjang pelanggan pada lembar pembayaran, teruskan item sebagai argumen.

import { confirmPlatformPayPayment } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ... see above

  const pay = async () => {
    const clientSecret = await fetchPaymentIntentClientSecret()
    const { error } = await confirmPlatformPayPayment(
      clientSecret,
      {
        applePay: {
          cartItems: [
            {
              label: 'Example item name',
              amount: '14.00',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
            {
              label: 'Total',
              amount: '12.75',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
          ],
          merchantCountryCode: 'US',
          currencyCode: 'USD',
          requiredShippingAddressFields: [
            PlatformPay.ContactField.PostalAddress,
          ],
          requiredBillingContactFields: [PlatformPay.ContactField.PhoneNumber],
        },
      }
    );
    if (error) {
      // handle error
    } else {
      Alert.alert('Success', 'Check the logs for payment intent details.');
      console.log(JSON.stringify(paymentIntent, null, 2));
    }
  };

  // ... see above
}