With Google Pay, you can make instant payments in a single flow. Please check settings:
https://stripe.com/docs/google-pay
And if you will work on the web, you should check "Payment Request Button" 's docs. Serve your application over HTTPS. This is a requirement both in development and in production. One way to get up and running is to use a service like ngrok.
https://stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay#html-js-prerequisites
🐾 Implements Guide
Prepare settings
For using Google Pay, you need some settings.
strings.xml
In file android/app/src/main/res/values/strings.xml
add the these value.
- publishable_key(Stripe's publoshable key)
- enable_google_pay
- country_code
- merchant_display_name
- google_pay_is_testing
These settings are used because Google Pay requires some processing to be done before initializing the plugin.
<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>
AndroidManifest.xml
In file android/app/src/main/AndroidManifest.xml
, add the following XML elements under
manifest > application
. These call the values set in strings.xml.
<meta-data
android:name="com.getcapacitor.community.stripe.publishable_key"
android:value="@string/publishable_key"/>
<meta-data
android:name="com.getcapacitor.community.stripe.enable_google_pay"
android:value="@bool/enable_google_pay"/>
<meta-data
android:name="com.google.android.gms.wallet.api.enabled"
android:value="true" />
<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"/>
1. isGooglePayAvailable
First, you should check to be able to use Google Pay on device.
import { Stripe, GooglePayEventsEnum } from '@capacitor-community/stripe';
(async () => {
const isAvailable = Stripe.isGooglePayAvailable().catch(() => undefined);
if (isAvailable === undefined) {
return;
}
})();
This method return resolve(): void
or
reject('Not implemented on Device.')
.
method
isGooglePayAvailable()
isGooglePayAvailable() => Promise<void>
2. createGooglePay
You should connect to your backend endpoint, and get every key. This is "not" function at this Plugin. So you can use
HTTPClient
,
Axios
, Ajax
, and so on.
Stripe provide how to implement backend:
https://stripe.com/docs/payments/accept-a-payment?platform=ios#add-server-endpoint
After that, you set these key to createGooglePay
method.
(async () => {
const { paymentIntent } = await this.http.post<{
paymentIntent: string;
}>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);
await Stripe.createGooglePay({
paymentIntentClientSecret: paymentIntent,
paymentSummaryItems: [{
label: 'Product Name',
amount: 1099.00
}],
merchantIdentifier: 'merchant.com.getcapacitor.stripe',
countryCode: 'US',
currency: 'USD',
});
})();
method
createGooglePay(...)
createGooglePay(options: CreateGooglePayOption) => Promise<void>
You can use options of CreateGooglePayOption
on createGooglePay
.
interface
CreateGooglePayOption
Prop |
Type | Description |
paymentIntentClientSecret |
string | |
paymentSummaryItems |
{ label: string; amount: number; }[] | Web only need @stripe-elements/stripe-elements > 1.1.0 |
merchantIdentifier | string | Web only need @stripe-elements/stripe-elements > 1.1.0 |
countryCode | string | Web only need @stripe-elements/stripe-elements > 1.1.0 |
currency | string | Web only need @stripe-elements/stripe-elements > 1.1.0 |
paymentSummaryItems
, merchantIdentifier
,
countryCode
, currency
is needed on the web only. If you will implement Google Pay on Android App only, don't need.
3. presentGooglePay
present in createGooglePay
is single flow. You don't need to confirm method.
(async () => {
const result = await Stripe.presentGooglePay();
if (result.paymentResult === GooglePayEventsEnum.Completed) {
}
})();
method
presentGooglePay()
presentGooglePay() => Promise<{ paymentResult: GooglePayResultInterface; }>
GooglePayResultInterface
is created from Enum of GooglePayEventsEnum
. So you should import and check result.
type alias
GooglePayResultInterface
GooglePayEventsEnum.Completed | GooglePayEventsEnum.Canceled | GooglePayEventsEnum.Failed
4. addListener
Method of Google Pay notify any listeners. If you want to get event of payment process is 'Completed', you should add
GooglePayEventsEnum.Completed
listener to
Stripe
object:
Stripe.addListener(GooglePayEventsEnum.Completed, () => {
console.log('GooglePayEventsEnum.Completed');
});
The event name you can use is
GooglePayEventsEnum
.
enum
GooglePayEventsEnum
Members | Value |
Loaded |
"googlePayLoaded" |
FailedToLoad |
"googlePayFailedToLoad" |
Completed |
"googlePayCompleted" |
Canceled |
"googlePayCanceled" |
Failed | "googlePayFailed" |
📖 Reference
See the Stripe Documentation for more information. This plugin is wrapper, so there information seems useful for you.
Google Pay (Android)
This plugin use GooglePayLauncher on com.stripe:stripe-android
:
https://stripe.com/docs/google-pay
Google Pay (Web)
This plugin use "Payment Request Button".
https://stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay#html-js-prerequisites