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:
- Navigieren Sie für iOS zum Verzeichnis ios und führen Sie
pod install
aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Abhängigkeiten installieren. - Für Android müssen keine Abhängigkeiten mehr installiert werden.
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 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> ); }
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 ein Kunde/eine Kundin Ihre App verlässt, um sich beispielsweise bei Safari oder seiner Banking-App zu authentifizieren, bieten Sie ihm die Möglichkeit, danach automatisch zu Ihrer App zurückzukehren. Viele Arten von Zahlungsmethoden erfordern eine Rückgabe-URL. Wenn Sie diese also nicht angeben, können wir diese Zahlungsmethoden Ihrem Nutzer/Ihrer Nutzerin nicht anbieten, auch dann nicht, wenn Sie sie 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 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> ); }
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
Sie können Alipay-Zahlungen in den Währungen erstellen, die Ihrem Land zugeordnet sind. Die lokale Standardwährung für Alipay ist cny
und auch Kund/innen bekommen ihren Kaufbetrag in cny
angezeigt.
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 Bankkonto in einer anderen Währung haben und eine Alipay-Zahlung in dieser Währung erstellen möchten, können Sie sich an den Support wenden. Zusätzliche Währungen werden auf Einzelfallbasis unterstützt.