Google Pay Wallet Payment Gateway

Google Pay allows customers to make payments in your app or website using any credit or debit card saved to their Google Account, including those from Google Play, YouTube, Chrome, or an Android device.

1.Set up Stripe

The React Native SDK is open source and fully documented. Internally, it uses the native iOS and Android SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory.

npm install @stripe/stripe-react-native

Next, install some other necessary dependencies:

For iOS, navigate to the ios directory and run pod install to ensure that you also install the required native dependencies.
For Android, there are no more dependencies to install.

Stripe initialisation

To initialise Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialisation method. Only the API publishable key in publishableKey is required. The following example shows how to initialise Stripe using the StripeProvider component.

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
         >
      // Your app code here
    </StripeProvider>
  );
}

2. Enable Google Pay

To use Google Pay, first enable the Google Pay API by adding the following to the <application> tag of your AndroidManifest.xml

<application>
...
<meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true"/>
</application>

3. Initialize Google Pay

First, check whether the device supports Google Pay by calling isPlatformPaySupported.


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>
  );
}

4.Present the Google Pay sheet

After you know Google Pay is available and your app has obtained a PaymentIntent or SetupIntent client secret, call confirmPlatformPayPayment. When confirming a SetupIntent, use confirmPlatformPaySetupIntent instead.


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',
        Amount:100,
      }),
    });
    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
        onPress={pay}
        type={PlatformPay.ButtonType.GooglePayMark}
	appearance={PlatformPay.ButtonStyle.Black}
        style={{
	 width: '90%',
         height: 50,
         alignSelf: 'center',
	 marginBottom: 10
	}}
      />
    </View>
  );
}

5. Going live with Google Pay

Follow Google’s instructions to request production access for your app. Choose the integration type Gateway when prompted, and provide screenshots of your app for review.

After your app has been approved, test your integration in production by using testEnv: false, and launching Google Pay from a signed, release build of your app. Remember to use your live mode API keys.