Lewati ke konten
Buat akun
atau
Masuk
Logo Dokumen Stripe
/
Tanya AI
Buat akun
Masuk
Mulai
Pembayaran
Pendapatan
Platform dan situs belanja online
Manajemen uang
Sumber daya pengembang
Gambaran Umum
Tentang pembayaran Stripe
Upgrade integrasi Anda
Analitik pembayaran
Pembayaran online
Gambaran umumTemukan contoh penggunaan AndaManaged Payments
Gunakan Payment Links
Buat halaman checkout
Bangun integrasi lanjutan
Bangun integrasi dalam aplikasi
    Gambaran umum
    Payment Sheet
    Payment Element Tersemat
    Link keluar untuk pembelian dalam aplikasi
    Kumpulkan alamat
    Kartu AS dan Kanada
Metode Pembayaran
Tambahkan metode pembayaran
Kelola metode pembayaran
Checkout lebih cepat dengan Link
Antarmuka pembayaran
Payment Links
Checkout
Web Elements
Elements dalam aplikasi
Skenario pembayaran
Tangani beberapa mata uang
Alur pembayaran custom
Akuisisi fleksibel
Orkestrasi
Pembayaran di tempat
Terminal
Di luar pembayaran
Dirikan perusahaan Anda
Kripto
Financial Connections
Climate
Pahami penipuan
Perlindungan penipuan Radar
Kelola sengketa
Verifikasikan identitas
BerandaPembayaranBuild an in-app integration

Kumpulkan nomor telepon dan alamat fisik

Pelajari cara mengumpulkan alamat dan nomor telepon di aplikasi seluler Anda.

Guna mengumpulkan alamat lengkap untuk tagihan atau pengiriman, gunakan Address Element.

Anda juga dapat menggunakan Address Element untuk:

  • Kumpulkan nomor telepon pelanggan
  • Aktifkan pengisian otomatis
  • Isikan otomatis informasi tagihan di Payment Element dengan meneruskan alamat pengiriman

Stripe mengombinasikan informasi alamat yang dikumpulkan dan metode pembayaran untuk membuat PaymentIntent.

Contoh proses checkout di mana pengguna memilih opsi Tambahkan Alamat Pengiriman. Mereka kemudian dibawa ke layar baru untuk menambahkan alamat pengirimannya ke formulir (mereka melihat saran pengisian otomatis saat mengetikkan alamatnya).

Siapkan Stripe
Sisi server
Sisi klien

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):

Command Line
yarn add @stripe/stripe-react-native

Selanjutnya, instal beberapa dependensi lain yang diperlukan:

  • For iOS, go to the ios directory and run pod install to make sure that you also install the required native dependencies.
  • 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> ); }

Catatan

Gunakan kunci percobaan API Anda saat mencoba serta mengembangkan, dan kunci mode live bila Anda memublikasikan aplikasi.

Siapkan saran pengisian alamat otomatis

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:

build.gradle
Groovy
Kotlin
No results
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.

Konfigurasikan Address Element

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'} />

Sajikan Address Element dan ambil detailnya

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

OpsionalIsikan otomatis alamat pengiriman di Payment Element

OpsionalMenyesuaikan penampilan

OpsionalAtur detail tagihan default

OpsionalSesuaikan pengumpulan detail tagihan

Apakah halaman ini membantu?
YaTidak
  • Butuh bantuan? Hubungi Tim CS.
  • Bergabunglah dengan program akses awal kami.
  • Lihat log perubahan kami.
  • Ada pertanyaan? Hubungi Bagian Penjualan.
  • LLM? Baca llms.txt.
  • Dijalankan oleh Markdoc