Alipay-Zahlung annehmen
Erfahren Sie, wie Sie Alipay-Zahlungen annehmen, einer bei Kund/innen aus China beliebten digitalen Geldbörse.
Bei Alipay handelt es sich um eine Zahlungsmethode für die einmalige Nutzung, bei der Kundinnen/Kunden ihre Zahlungen authentifizieren müssen. Bei Zahlungen werden Kundinnen/Kunden zur Autorisierung der Zahlung mit Alipay von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine sofortige Benachrichtigung über den Erfolg oder das Fehlschlagen der Zahlung erhalten.
Stripe einrichtenServerseitigClientseitig
Serverseitig
Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:
Clientseitig
Das React Native SDK ist Open Source und vollständig dokumentiert. Intern werden native iOS und Android SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden):
Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:
- For iOS, go to the ios directory and run
pod install
to ensure that you also install the required native dependencies. - Für Android müssen keine Abhängigkeiten mehr installiert werden.
Notiz
Wir empfehlen Ihnen, die offizielle Anleitung zu TypeScript zu befolgen, um TypeScript zu unterstützen.
Stripe Initialisierung
Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente StripeProvider
oder verwenden Sie die Initialisierungsmethode initStripe
. Nur der veröffentlichbare API-Schlüssel in publishableKey
ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente StripeProvider
initialisiert wird.
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> ); }
Notiz
Verwenden Sie Ihre API-Testschlüssel beim Testen und Entwickeln Ihrer App und Ihre Live-Modus-Schlüssel beim Veröffentlichen Ihrer App.
PaymentIntent erstellenServerseitig
Ein PaymentIntent ist ein Objekt, das Ihre Absicht darstellt, eine Zahlung von Ihrem Kunden/Ihrer Kundin einzuziehen und verfolgt den Lebenszyklus des Zahlungsvorgangs. Erstellen Sie einen PaymentIntent
auf Ihrem Server und geben Sie den einzuziehenden Betrag und eine unterstützte Währung an. Wenn Sie über eine bestehende Payment Intents-Integration verfügen, fügen Sie alipay
der Liste der Arten der Zahlungsmethoden hinzu.
An das Alipay-Wallet weiterleitenClientseitig
Das Stripe React Native SDK gibt safepay/
als Host für die Rückgabe-URL für Zahlungsmethoden mit Bankweiterleitung und digitaler Geldbörse an. Nachdem Kund/innen die Zahlung mit Alipay abgeschlossen haben, werden sie an myapp://safepay/
weitergeleitet, wobei myapp
Ihr benutzerdefiniertes URL-Schema ist.
Wenn Kundinnen/Kunden Ihre App verlassen (zum Beispiel um sich in Safari oder ihrer Banking-App zu authentifizieren), bieten Sie ihnen eine Möglichkeit, automatisch zu Ihrer App zurückzukehren. Für viele Arten von Zahlungsmethoden ist eine Rückgabe-URL erforderlich. Wenn Sie keine angeben, können wir Ihren Nutzer/innen keine Zahlungsmethoden anbieten, für die eine Rückgabe-URL erforderlich ist, selbst wenn Sie diese aktiviert haben.
So geben Sie eine Rückgabe-URL an:
- Registrieren Sie eine benutzerdefinierte URL. Universelle Links werden nicht unterstützt.
- Konfigurieren Sie Ihre benutzerdefinierte URL.
- Richten Sie Ihre Root-Komponente so ein, dass sie die URL an das Stripe SDK weitergibt, wie unten gezeigt.
Notiz
Wenn Sie Expo verwenden, stellen Sie Ihr Schema in der Datei app.
ein.
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> ); }
Weitere Informationen zu nativen URL-Schemen finden Sie in der Dokumentation für Android und iOS.
Zahlung bestätigenClientseitig
Wenn der/die Kund/in auf die Schaltfläche zum Bezahlen mit Alipay klickt, rufen Sie confirmPayment
auf, um eine Webansicht anzuzeigen, in der die Kund/innen die Zahlung abschließen können.
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> ); }
Unterstützte Währungen
Ihr Konto muss über ein Bankkonto für eine der folgenden Währungen verfügen. Sie können Alipay Zahlungen in den Währungen erstellen, die Ihrem Land zugeordnet sind. Die standardmäßige lokale Währungen für Alipay ist cny
und Kund/innen sehen ihren Kaufbetrag auch in cny
.
Währung | Land |
---|---|
cny | Beliebiges Land |
aud | Australien |
cad | Kanada |
eur | Österreich, Belgien, Bulgarien, Zypern, Tschechien, Dänemark, Estland, Finnland, Frankreich, Deutschland, Griechenland, Irland, Italien, Lettland, Litauen, Luxemburg, Malta, Niederlande, Norwegen, Portugal, Rumänien, Slowakei, Slowenien, Spanien, Schweden, Schweiz |
gbp | Vereinigtes Königreich |
hkd | Hongkong |
jpy | Japan |
myr | Malaysia |
nzd | Neuseeland |
sgd | Singapur |
usd | USA |
Wenn Sie ein Konto in einer anderen Währung haben und eine Alipay Zahlung in dieser Währung erstellen möchten, können Sie sich an den Kund/innen-Support wenden. Wir unterstützen gegebenenfalls weitere Währungen je nach Fall.