Google Pay

Google Pay confirms a PaymentIntent in one presentation. The Android implementation also accepts a SetupIntent; the web implementation does not.

https://stripe.com/docs/google-pay https://stripe.com/docs/google-pay

On web, Google Pay uses the Payment Request Button. Serve the app over HTTPS in development and production.

https://stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay#html-js-prerequisites

Platform support

Platform	Google Pay
Android	Native `GooglePayLauncher` (requires app metadata)
iOS	Not implemented
Web	Payment Request Button (`stripe-pwa-elements`)

iOS rejects isGooglePayAvailable, createGooglePay, and presentGooglePay. Android reads Google Pay configuration from metadata when the plugin loads, so initialize alone is not enough on Android.

Prepare settings

strings.xml

In android/app/src/main/res/values/strings.xml add:

publishable_key (Stripe publishable key)
enable_google_pay
country_code
merchant_display_name
google_pay_is_testing

<string name="publishable_key">Your Publishable Key</string>
<bool name="enable_google_pay">true</bool>
<string name="country_code">US</string>
<string name="merchant_display_name">Widget Store</string>
<bool name="google_pay_is_testing">true</bool>

Optional Stripe Connect on Android Google Pay:

<string name="stripe_account">acct_xxxxxxxxxxxxx</string>

AndroidManifest.xml

In android/app/src/main/AndroidManifest.xml, add the following under manifest > application:

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

<meta-data
  android:name="com.getcapacitor.community.stripe.enable_google_pay"
  android:value="@bool/enable_google_pay"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.publishable_key"
  android:value="@string/publishable_key"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.country_code"
  android:value="@string/country_code"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.merchant_display_name"
  android:value="@string/merchant_display_name"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.google_pay_is_testing"
  android:value="@bool/google_pay_is_testing"/>

Optional connected account:

<meta-data
  android:name="com.getcapacitor.community.stripe.stripe_account"
  android:value="@string/stripe_account"/>

Optional1: If you get user information, set these:

<bool name="email_address_required">true</bool>
<bool name="phone_number_required">true</bool>
<bool name="billing_address_required">true</bool>
<string name="billing_address_format">Full</string>

<meta-data
  android:name="com.getcapacitor.community.stripe.email_address_required"
  android:value="@bool/email_address_required"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.phone_number_required"
  android:value="@bool/phone_number_required"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.billing_address_required"
  android:value="@bool/billing_address_required"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.billing_address_format"
  android:value="@string/billing_address_format"/>

Optional2: If you don't require existing payment method at Google Pay:

If false, Google Pay is considered ready even if the customer's Google Pay wallet does not have existing payment methods. Defaults to true.

<bool name="google_pay_existing_payment_method_required">false</bool>

<meta-data
  android:name="com.getcapacitor.community.stripe.google_pay_existing_payment_method_required"
  android:value="@bool/google_pay_existing_payment_method_required"/>

1. isGooglePayAvailable

The promise resolves when Google Pay is ready and rejects otherwise.

import { GooglePayEventsEnum, Stripe } from '@capacitor-community/stripe';

try {
  await Stripe.isGooglePayAvailable();
} catch {
  return;
}

`method` isGooglePayAvailable()

isGooglePayAvailable() => Promise<void>

2. createGooglePay

Fetch a PaymentIntent client secret from your backend. On Android, you may instead pass a SetupIntent client secret. See Server Integration. The option is named paymentIntentClientSecret for both Intent types. Web also needs paymentSummaryItems, merchantIdentifier, countryCode, and currency.

import { firstValueFrom } from 'rxjs';

const { paymentIntent } = await firstValueFrom(
  this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'intent', {}),
);

await Stripe.createGooglePay({
  paymentIntentClientSecret: paymentIntent,

  // Web only. Google Pay on Android App doesn't need
  paymentSummaryItems: [{
    label: 'Product Name',
    amount: 1099.00
  }],
  merchantIdentifier: 'merchant.com.getcapacitor.stripe',
  countryCode: 'US',
  currency: 'USD',
});

`method` createGooglePay(...)

createGooglePay(options: CreateGooglePayOption) => Promise<void>

`interface` CreateGooglePayOption

Prop	Type	Description
`paymentIntentClientSecret`	`string`
`paymentSummaryItems`	`{ label: string; amount: number; }[]`	Web only need stripe-pwa-elements > 1.1.0
`merchantIdentifier`	`string`	Web only need stripe-pwa-elements > 1.1.0
`countryCode`	`string`	Web only need stripe-pwa-elements > 1.1.0
`currency`	`string`	Web only need stripe-pwa-elements > 1.1.0

A SetupIntent client secret starts with seti_. Android detects that prefix and uses presentForSetupIntent with currency from the create options (default USD). Do not pass a SetupIntent on web: the web implementation confirms with confirmCardPayment.

3. presentGooglePay

const result = await Stripe.presentGooglePay();
if (result.paymentResult === GooglePayEventsEnum.Completed) {
  // Update UI only. Confirm the Intent with a webhook before fulfilling.
}

`method` presentGooglePay()

presentGooglePay() => Promise<{ paymentResult: GooglePayResultInterface; }>

`type alias` GooglePayResultInterface

GooglePayEventsEnum.Completed | GooglePayEventsEnum.Canceled | GooglePayEventsEnum.Failed

Treat Canceled as cancellation and Failed as an error. Prefer result listeners after Android Activity recreation. See Event Listeners.

4. addListener

Stripe.addListener(GooglePayEventsEnum.Completed, () => {
  console.log('GooglePayEventsEnum.Completed');
});

`enum` GooglePayEventsEnum

Member	Value
`Loaded`	`"googlePayLoaded"`
`FailedToLoad`	`"googlePayFailedToLoad"`
`Completed`	`"googlePayCompleted"`
`Canceled`	`"googlePayCanceled"`
`Failed`	`"googlePayFailed"`

Reference

strings.xml

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">capacitor-stripe</string>
    <string name="title_activity_main">capacitor-stripe</string>
    <string name="package_name">io.ionic.starter</string>
    <string name="custom_url_scheme">io.ionic.starter</string>

    <string name="publishable_key">Your Publishable Key</string>
    <bool name="enable_google_pay">true</bool>
    <string name="country_code">US</string>
    <string name="merchant_display_name">Widget Store</string>
    <bool name="google_pay_is_testing">true</bool>

    <bool name="email_address_required">true</bool>
    <bool name="phone_number_required">true</bool>
    <bool name="billing_address_required">true</bool>
    <string name="billing_address_format">Full</string>

    <bool name="google_pay_existing_payment_method_required">false</bool>
</resources>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.ionic.starter">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
            android:name="io.ionic.starter.MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>

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

        <meta-data
          android:name="com.getcapacitor.community.stripe.enable_google_pay"
          android:value="@bool/enable_google_pay"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.publishable_key"
          android:value="@string/publishable_key"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.country_code"
          android:value="@string/country_code"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.merchant_display_name"
          android:value="@string/merchant_display_name"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.google_pay_is_testing"
          android:value="@bool/google_pay_is_testing"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.email_address_required"
          android:value="@bool/email_address_required"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.phone_number_required"
          android:value="@bool/phone_number_required"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.billing_address_required"
          android:value="@bool/billing_address_required"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.billing_address_format"
          android:value="@string/billing_address_format"/>

        <meta-data
          android:name="com.getcapacitor.community.stripe.google_pay_existing_payment_method_required"
          android:value="@bool/google_pay_existing_payment_method_required"/>
    </application>

    <!-- Permissions -->

    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

google-pay.ts

import { firstValueFrom } from 'rxjs';
import { GooglePayEventsEnum, Stripe } from '@capacitor-community/stripe';

(async () => {
  try {
    await Stripe.isGooglePayAvailable();
  } catch {
    return;
  }

  Stripe.addListener(GooglePayEventsEnum.Completed, () => {
    console.log('GooglePayEventsEnum.Completed');
  });

  // Connect to your backend endpoint, and get paymentIntent.
  const { paymentIntent } = await firstValueFrom(this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'intent', {}));

  // Prepare Google Pay
  await Stripe.createGooglePay({
    paymentIntentClientSecret: paymentIntent,

    // Web only. Google Pay on Android App doesn't need
    paymentSummaryItems: [{
      label: 'Product Name',
      amount: 1099.00
    }],
    merchantIdentifier: 'merchant.com.getcapacitor.stripe',
    countryCode: 'US',
    currency: 'USD',
  });

  // Present Google Pay
  const result = await Stripe.presentGooglePay();
  if (result.paymentResult === GooglePayEventsEnum.Completed) {
    // Happy path
  }
})();

Google Pay

Platform support

Prepare settings

strings.xml

AndroidManifest.xml

Optional1: If you get user information, set these:

Optional2: If you don't require existing payment method at Google Pay:

1. isGooglePayAvailable

method isGooglePayAvailable()

2. createGooglePay

method createGooglePay(...)

interface CreateGooglePayOption

3. presentGooglePay

method presentGooglePay()

type alias GooglePayResultInterface

4. addListener

enum GooglePayEventsEnum

Reference

`method` isGooglePayAvailable()

`method` createGooglePay(...)

`interface` CreateGooglePayOption

`method` presentGooglePay()

`type alias` GooglePayResultInterface

`enum` GooglePayEventsEnum