Google Pay
So nehmen Sie Zahlungen per Google Pay an.
Google Pay ermöglicht es Kund/innen, Zahlungen in Ihrer App oder auf Ihrer Website mit jeder im Google-Konto (z. B. für Google Play, YouTube, Chrome oder ein Android-Gerät) gespeicherten Kredit- oder Debitkarte vorzunehmen. Verwenden Sie die Google Pay API, um eine beliebige im Google-Konto Ihres/Ihrer Kund/in gespeicherte Kredit- oder Debitkarte anzufordern.
Google Pay ist vollständig kompatibel mit den Produkten und Funktionen von Stripe (z. B. wiederkehrende Zahlungen), sodass Sie es nach Möglichkeit anstelle eines herkömmlichen Zahlungsformulars verwenden können. So können Sie Zahlungen für physische Waren, Spenden, Abonnements usw. annehmen.
Nutzung von Stripe und Google Pay im Vergleich zum Google Play-Abrechnungssystem![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Für den Verkauf von physischen Waren und Dienstleistungen kann Ihre App Google Pay oder jede andere von Stripe unterstützte Zahlungsmethode akzeptieren. Diese Zahlungen werden über Stripe abgewickelt und Sie müssen nur die Bearbeitungsgebühren von Stripe zahlen. Für In-App-Käufe von digitalen Produkten und Inhalten muss jedoch das Google Play-Abrechnungssystem verwendet werden. Diese Zahlungen werden von Google verarbeitet und unterliegen deren Transaktionsgebühren.
Weitere Informationen darüber, für welche Käufe das Abrechnungssystem von Google Play verwendet werden muss, finden Sie in den Entwicklerbedingungen von Google Play.
Das React Native SDK von Stripe ist der schnellste und einfachste Weg, um Google Pay in Ihren React Native-Apps zu akzeptieren. Die Komponente PlatformPayButton umschließt die erforderliche Nutzeroberfläche von Google, und Sie können die Methoden confirmPlatformPayPayment
und createPlatformPayPaymentMethod
verwenden, um nahtlos Zahlungen in Ihrer App mit minimaler Konfiguration zu erfassen oder zu erstellen.
Stripe einrichtenServerseitigClientseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Serverseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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 { 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-Schlüssel für den Test-Modus beim Testen und Entwickeln Ihrer App und Ihre Live-Modus-Schlüssel beim Veröffentlichen Ihrer App.
Google Pay aktivieren![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Um Google Pay zu verwenden, aktivieren Sie zuerst die Google Pay API, indem Sie dem Tag <application>
Ihrer Datei AndroidManifest.xml Folgendes hinzufügen:
<application> ... <meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true" /> </application>
Weitere Informationen finden Sie in der Google Pay API für Android.
Erstellen Sie ein PaymentIntentServerseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Erstellen Sie zunächst einen PaymentIntent
auf Ihrem Server und geben Sie den einzuziehenden Betrag und die Währung an. Wenn Sie bereits eine Integration mit der Payment Intents API haben, fügen Sie card
zur Liste der Zahlungsmethoden-Typen für Ihren PaymentIntent
hinzu (dies ist auch die Standardzahlungsmethode wenn keine angegeben wird):
Ein PaymentIntent enthält ein Client-Geheimnis. Sie können das Client-Geheimnis in Ihrer React Native-App verwenden, um den Zahlungsvorgang sicher abzuschließen, anstatt das gesamte PaymentIntent-Objekt zurückzugeben. Fordern Sie in Ihrer App einen PaymentIntent von Ihrem Server an und speichern Sie dessen Client-Geheimnis.
Google Pay initialisierenClientseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Prüfen Sie zunächst, ob das Gerät Google Pay unterstützt, indem Sie isPlatformPaySupported
aufrufen.
import { usePlatformPay } from '@stripe/stripe-react-native'; function PaymentScreen() { const { isPlatformPaySupported } = usePlatformPay(); React.useEffect(() => { (async function () { if (!(await isPlatformPaySupported({ googlePay: {testEnv: true} }))) { Alert.alert('Google Pay is not supported.'); return; } })(); }, []); ... return ( <View > ... </View> ); }
Google Pay-Formular anzeigenClientseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Wenn Sie wissen, dass Google Pay verfügbar ist und Ihre App ein Client-Geheimnis für PaymentIntent
oder SetupIntent
erhalten hat, rufen Sie confirmPlatformPayPayment
auf. Wenn Sie einen SetupIntent
bestätigen, verwenden Sie stattdessen confirmPlatformPaySetupIntent
.
import {PlatformPayButton, usePlatformPay} from '@stripe/stripe-react-native'; function PaymentScreen() { const { isPlatformPaySupported, confirmPlatformPayPayment, } = usePlatformPay(); React.useEffect(() => { ... // see above }, []); const fetchPaymentIntentClientSecret = async () => { // Fetch payment intent created on the server, see above const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'usd', }), }); const { clientSecret } = await response.json(); return clientSecret; }; const pay = async () => { const clientSecret = await fetchPaymentIntentClientSecret(); const { error } = await confirmPlatformPayPayment( clientSecret, { googlePay: { testEnv: true, merchantName: 'My merchant name', merchantCountryCode: 'US', currencyCode: 'USD', billingAddressConfig: { format: PlatformPay.BillingAddressFormat.Full, isPhoneNumberRequired: true, isRequired: true, }, }, } ); if (error) { Alert.alert(error.code, error.message); // Update UI to prompt user to retry payment (and possibly another payment method) return; } Alert.alert('Success', 'The payment was confirmed successfully.'); }; return ( <View > <PlatformPayButton type={PlatformPay.ButtonType.Pay} onPress={pay} style={{ width: '100%', height: 50, }} /> </View> ); }
Mit Google Pay live gehen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Befolgen Sie die Anweisungen von Google, um den Produktionszugriff für Ihre App anzufordern. Wählen Sie den Integrationstyp Gateway, wenn Sie dazu aufgefordert werden, und stellen Sie Screenshots Ihrer App zur Überprüfung bereit.
Nachdem Ihre App genehmigt wurde, testen Sie Ihre Integration in der Produktion, indem Sie testEnv: false
verwenden und Google Pay über einen signierten Release-Build Ihrer App starten. Denken Sie daran, Ihre API-Schlüssel im Live-Modus zu verwenden. Sie können eine PaymentIntent
mit capture_
= manual
verwenden, um eine Transaktion zu verarbeiten, ohne die Zahlung zu erfassen.