Terima pembayaran Alipay
Pelajari cara menerima pembayaran Alipay, dompet digital yang populer di kalangan pelanggan dari Tiongkok.
Alipay adalah metode pembayaran sekali pakai yang mengharuskan pelanggan untuk mengautentikasi pembayarannya Pelanggan membayar dengan mengalihkan dari situs web atau aplikasi Anda, mengotorisasi pembayaran melalui Alipay, kemudian kembali ke situs web atau aplikasi di mana Anda mendapatkan notifikasi langsung mengenai jika pembayaran berhasil atau gagal.
Siapkan StripeSisi serverSisi client
Sisi server
Integrasi ini memerlukan endpoint di server Anda yang berbicara dengan API Stripe. Gunakan pustaka resmi kami untuk akses ke API Stripe dari server Anda:
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):
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 React, { 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> ); }
Catatan
Gunakan kunci percobaan API Anda saat mencoba serta mengembangkan, dan kunci mode live bila Anda memublikasikan aplikasi.
Buat PaymentIntentSisi server
PaymentIntent adalah objek yang mewakili maksud Anda untuk menagih pembayaran dari pelanggan dan melacak siklus proses pembayaran. Buat PaymentIntent
pada server Anda dan tentukan jumlah yang akan dikumpulkan beserta mata uang yang didukung. Jika Anda sudah memiliki integrasi Payment Intents yang ada, tambahkan alipay
ke daftar tipe metode pembayaran.
Alihkan ke dompet AlipaySisi client
Stripe React Native SDK menentukan safepay/
sebagai host URL kembali untuk metode pengalihan bank dan metode pembayaran dompet digital. Setelah pelanggan menyelesaikan pembayaran dengan Alipay, mereka akan dialihkan ke myapp://safepay/
, di mana myapp
adalah skema URL custom Anda.
Bila pelanggan keluar dari aplikasi, misalnya untuk melakukan autentikasi di Safari atau aplikasi perbankan mereka, sediakan cara agar mereka dapat kembali ke aplikasi Anda nantinya. Banyak tipe metode pembayaran memerlukan URL kembali, jadi jika Anda gagal menyediakannya, kami tidak dapat menyajikan metode pembayaran itu kepada pengguna, sekalipun Anda telah mengaktifkannya.
Untuk memberikan URL kembali:
- Daftarkan URL custom. Tautan universal tidak didukung.
- Konfigurasikan URL custom Anda.
- Siapkan komponen root Anda untuk meneruskan URL ke SDK Stripe seperti yang ditunjukkan di bawah ini.
Catatan
Jika Anda menggunakan Expo, atur skema di file app.
.
import React, { 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> ); }
Untuk informasi selengkapnya tentang skema URL asli, baca dokumen Android dan iOS.
Konfirmasikan pembayaranSisi client
Bila pelanggan mengetuk untuk membayar dengan Alipay, panggil confirmPayment
untuk menampilkan webview tempat mereka dapat menyelesaikan pembayaran.
export default function AlipayPaymentScreen() { const [email, setEmail] = useState(''); const { confirmPayment, loading } = useConfirmPayment(); const handlePayPress = async () => { const { clientSecret } = await fetchPaymentIntentClientSecret(); const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Alipay', }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}` ); } }; return ( <Screen> <TextInput placeholder="E-mail" keyboardType="email-address" onChange={(value) => setEmail(value.nativeEvent.text)} /> <Button variant="primary" onPress={handlePayPress} title="Pay" loading={loading} /> </Screen> ); }
Mata uang yang didukung
Anda dapat melakukan pembayaran Alipay dalam mata uang yang memetakan ke negara Anda. Mata uang lokal default untuk Alipay adalah cny
dan pelanggan juga melihat jumlah pembelian mereka dalam cny
.
Mata uang | Negara |
---|---|
cny | Sembarang negara |
aud | Australia |
cad | Kanada |
eur | Austria, Belgia, Bulgaria, Siprus, Republik Ceko, Denmark, Estonia, Finlandia, Prancis, Jerman, Yunani, Irlandia, Italia, Latvia, Lituania, Luksemburg, Malta, Belanda, Norwegia, Portugal, Romania, Slovakia, Slovenia, Spanyol, Swedia, Swiss |
gbp | Inggris |
hkd | Hong Kong |
jpy | Jepang |
myr | Malaysia |
nzd | Selandia Baru |
sgd | Singapura |
usd | Amerika Serikat |
Jika Anda memiliki rekening bank dalam mata uang lain dan ingin melakukan pembayaran Alipay dalam mata uang itu, Anda dapat menghubungi dukungan. Dukungan untuk mata uang tambahan diberikan berdasarkan kasus setiap kasusnya.