Google Pay
Google Pay は一度の表示で PaymentIntent を確定します。Android は SetupIntent にも対応しますが、Web は対応していません。
Web では Payment Request Button を使用します。開発環境と本番環境の両方を HTTPS で配信してください。
プラットフォーム対応
| プラットフォーム | Google Pay |
|---|---|
| Android | ネイティブ GooglePayLauncher(アプリメタデータ必須) |
| iOS | 未実装 |
| Web | Payment Request Button(stripe-pwa-elements) |
iOS の各 Google Pay メソッドは拒否されます。Android はプラグイン読み込み時にメタデータから設定を読むため、initialize だけでは不十分です。
事前設定
strings.xml
android/app/src/main/res/values/strings.xml に公開可能キー、有効フラグ、国コード、加盟店表示名、テストフラグを追加します。
<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>
Android Google Pay で Stripe Connect を使う場合は任意で追加します。
<string name="stripe_account">acct_xxxxxxxxxxxxx</string>
AndroidManifest.xml
manifest > application の下へ、対応する com.getcapacitor.community.stripe.* メタデータを追加します。右側のコード例に完全な設定を示します。連結アカウントには stripe_account メタデータを追加してください。
任意1: 利用者情報を取得する場合
メール、電話、請求先住所の必須フラグと住所形式を strings.xml に定義し、同名のメタデータから参照します。
<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>
任意2: Google Pay に既存の支払い方法を要求しない場合
false にすると、利用者の Google Pay ウォレットに既存の支払い方法がなくても利用可能と判定します。既定値は true です。
<bool name="google_pay_existing_payment_method_required">false</bool>
1. isGooglePayAvailable
Google Pay が利用可能なら Promise が解決し、それ以外は拒否されます。
try { await Stripe.isGooglePayAvailable(); } catch { return; }
method isGooglePayAvailable()
Resolves when Google Pay is available and rejects when it is unavailable.
Google Pay is supported on Android and compatible web browsers, not iOS.
isGooglePayAvailable() => Promise<void>
2. createGooglePay
バックエンドから PaymentIntent のクライアントシークレットを取得します。Android では SetupIntent も渡せます。どちらもオプション名は paymentIntentClientSecret です。Web では paymentSummaryItems、merchantIdentifier、countryCode、currency も必要です。
await Stripe.createGooglePay({
paymentIntentClientSecret: paymentIntent,
// 以下はWeb専用。AndroidアプリのGoogle Payでは不要です。
paymentSummaryItems: [{ label: 'Product Name', amount: 1099.00 }],
merchantIdentifier: 'merchant.com.getcapacitor.stripe',
countryCode: 'US',
currency: 'USD',
});
method createGooglePay(...)
Creates a Google Pay request. Call this before presentGooglePay().
createGooglePay(options: CreateGooglePayOption) => Promise<void>
interface CreateGooglePayOption
| Prop | Type | Description | Since |
|---|---|---|---|
paymentIntentClientSecret |
string |
Client secret of the PaymentIntent to confirm with Google Pay. | 3.2.0 |
paymentSummaryItems |
{ label: string; amount: number; }[] |
Web only. Requires stripe-pwa-elements ^3.0.0. | 3.2.0 |
merchantIdentifier |
string |
Web only. Requires stripe-pwa-elements ^3.0.0. | 3.2.0 |
countryCode |
string |
Web only. Requires stripe-pwa-elements ^3.0.0. | 3.2.0 |
currency |
string |
Web only. Requires stripe-pwa-elements ^3.0.0. | 3.2.0 |
SetupIntent のクライアントシークレットは seti_ で始まります。Android は接頭辞を検出し、作成オプションの currency(既定値 USD)で presentForSetupIntent を使用します。Web は confirmCardPayment を使うため、SetupIntent を渡さないでください。
3. presentGooglePay
const result = await Stripe.presentGooglePay();
if (result.paymentResult === GooglePayEventsEnum.Completed) {
// UIだけを更新し、WebhookでIntentを確認します。
}
method presentGooglePay()
Presents the Google Pay request created by createGooglePay().
presentGooglePay() => Promise<{ paymentResult: GooglePayResultInterface; }>
type alias GooglePayResultInterface
GooglePayEventsEnum.Completed | GooglePayEventsEnum.Canceled | GooglePayEventsEnum.Failed
Canceled はキャンセル、Failed はエラーです。Android Activity 再生成後は結果リスナーを優先してください。
4. addListener
Stripe.addListener(GooglePayEventsEnum.Completed, () => console.log('Completed'));
enum GooglePayEventsEnum
| Member | Value |
|---|---|
Loaded |
'googlePayLoaded' |
FailedToLoad |
'googlePayFailedToLoad' |
Completed |
'googlePayCompleted' |
Canceled |
'googlePayCanceled' |
Failed |
'googlePayFailed' |
参考資料
<?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>
<?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>
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
}
})();