Kumpulkan nomor telepon dan alamat fisik

Pertama, Anda membutuhkan akun Stripe. Daftar sekarang.

React Native SDK adalah sumber terbuka dan didokumentasikan lengkap. Secara internal, ini menggunakan SDK iOS dan Android asli. Untuk menginstal React Native SDK Stripe, jalankan salah satu perintah berikut di direktori proyek Anda (tergantung 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, Anda tidak perlu menginstal dependensi lagi.

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 { StripeProvider } from '@stripe/stripe-react-native';

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

Pengisian otomatis diaktifkan secara default di iOS, tetapi untuk mengaktifkan saran pengisian otomatis di Android, Anda harus menyertakan dependensi Google Places SDK di build.gradle aplikasi:

dependencies {
    implementation 'com.google.android.libraries.places:places:2.6.0'
}

Saran pengisian alamat otomatis memerlukan kunci Google Places API. Ikuti panduan penyiapan Google Places SDK untuk membuat kunci API Anda.

Anda dapat mengonfigurasi Address Element dengan detail, seperti menampilkan nilai default, mengatur negara yang diizinkan, menyesuaikan tampilan, dan sebagainya. Lihat daftar opsi yang tersedia untuk informasi selengkapnya.

<AddressSheet
  appearance={{
    colors: {
      primary: '#F8F8F2',
      background: '#272822'
    }
  }}
  defaultValues={{
    phone: '111-222-3333',
    address: {
      country: 'United States',
      city: 'San Francisco',
    },
  }}
  additionalFields={{
    phoneNumber: 'required',
  }}
  allowedCountries={['US', 'CA', 'GB']}
  primaryButtonTitle={'Use this address'}
  sheetTitle={'Shipping Address'}
  googlePlacesApiKey={'(optional) YOUR KEY HERE'}
/>

Ambil detail alamat dengan mengatur properti visible ke true, serta menambahkan metode callback untuk properti onSubmit dan onError:

<AddressSheet
  visible={true}
  onSubmit={async (addressDetails) => {
    // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);

    // Handle result and update your UI
  }}
  onError={(error) => {
    if (error.code === AddressSheetError.Failed) {
      Alert.alert('There was an error.', 'Check the logs for details.');
      console.log(err?.localizedMessage);
    }
   // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);
  }}
/>