Adds native payments using the W3C Payment Request API to your React Native app. Currently supports Google Pay on Android.
npm install @google/react-native-make-payment
You can also try out the example by running the following command from the root of this repo:
yarn && yarn exampleFor production, you will need to define the
GOOGLE_PAY_ENVIRONMENT property in your project's
gradle.properties file (typically android/gradle.properties):
GOOGLE_PAY_ENVIRONMENT=PRODUCTION
Following is a minimal example. A complete example can be
found in example/src/App.tsx.
import { PaymentRequest, type W3CGooglePayPaymentMethod, type GooglePayPaymentDataRequest } from '@google/react-native-make-payment'; const paymentDetails = { total: { amount: { currency: 'USD', value: '14.95', }, }, }; const googlePayRequest: GooglePayPaymentDataRequest = { // Google Pay API JSON request object, see: // https://developers.google.com/pay/api/android/reference/request-objects }; const paymentMethods: W3CGooglePayPaymentMethod[] = [ { supportedMethods: 'google_pay', data: googlePayRequest, }, ]; const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails); paymentRequest.canMakePayment().then((canMakePayment) => { if (canMakePayment) { paymentRequest.show().then((response) => { // Handle PSP response }); } else { // Google Pay unavailable } });
Example of adding a native Google Pay button:
<GooglePayButton style={styles.googlepaybutton} onPress={checkCanMakePayment} allowedPaymentMethods={googlePayRequest.allowedPaymentMethods} theme={GooglePayButtonConstants.Themes.Dark} type={GooglePayButtonConstants.Types.Buy} radius={4} />