Google Payを使えば、ワンフローで即時決済が可能です。詳しい設定は以下をご確認ください:
https://stripe.com/docs/google-pay
もしあながたWeb上でも動作させるなら、 "Payment Request Button" のドキュメントを読むべきです。HTTPSでホスティングされたアプリケーションでしか動作しません。開発環境と本番環境両方です。HTTPSで動かすための方法のひとつに ngrok というサービスを利用する方法があります。
https://stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay#html-js-prerequisites
🐾 実装ガイド
Prepare settings
Google Payを利用するためには、いくつかの設定が必要です。
strings.xml
android/app/src/main/res/values/strings.xml
に以下の値を追加します。
- publishable_key(Stripe's publoshable key)
- enable_google_pay
- country_code
- merchant_display_name
- google_pay_is_testing
これらの設定は、プラグインを初期化する前にGooglePayの処理を行う必要があるため、別途設定します。
<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
android/app/src/main/AndroidManifest.xml
の manifest > application
以下にXML要素を追加します。これらは 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
まず、ユーザのデバイスでGooglePayが使えるかどうか確認します。
import { Stripe, GooglePayEventsEnum } from '@capacitor-community/stripe';
(async () => {
const isAvailable = Stripe.isGooglePayAvailable().catch(() => undefined);
if (isAvailable === undefined) {
return;
}
})();
このメソッドは resolve(): void
か reject('Not implemented on Device.')
を返却します。
method
isGooglePayAvailable()
isGooglePayAvailable() => Promise<void>
2. createGooglePay
バックエンドエンドポイントに接続し、それぞれのキーを取得する必要があります。これは本プラグインでは「できない」機能です。そのため、
HTTPClient
や Axios
、
Ajax
などの機能を利用することができます。
Stripeは、バックエンドの実装方法を提供します:
https://stripe.com/docs/payments/accept-a-payment?platform=ios#add-server-endpoint
その後、これらのキーを createGooglePay
メソッドに設定します。
(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>
<<<<<<< HEAD
createGooglePay
では CreateGooglePayOption
が利用できます。
You can use options of CreateGooglePayOption
on createGooglePay
.
main
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
createGooglePay
はシングルフローです。 confirm
メソッドを必要としません。
(async () => {
const result = await Stripe.presentGooglePay();
if (result.paymentResult === GooglePayEventsEnum.Completed) {
}
})();
method
presentGooglePay()
presentGooglePay() => Promise<{ paymentResult: GooglePayResultInterface; }>
presentGooglePay
の返り値から GooglePayResultInterface
を取得することができます。
GooglePayResultInterface
は
GooglePayEventsEnum
から作成されています。したがって、インポートして結果を確認する必要があります。
type alias
GooglePayResultInterface
GooglePayEventsEnum.Completed | GooglePayEventsEnum.Canceled | GooglePayEventsEnum.Failed
4. addListener
Google Payのメソッドはリスナーを通知します。もし、支払い処理が完了したときのイベントを取得したい場合は、
Stripe
オブジェクトに GooglePayEventsEnum.Completed
リスナーを追加する必要があります。
Stripe.addListener(GooglePayEventsEnum.Completed, () => {
console.log('GooglePayEventsEnum.Completed');
});
使用できるイベント名は
GooglePayEventsEnum
にあります。
enum
GooglePayEventsEnum
Members | Value |
Loaded |
"googlePayLoaded" |
FailedToLoad |
"googlePayFailedToLoad" |
Completed |
"googlePayCompleted" |
Canceled |
"googlePayCanceled" |
Failed | "googlePayFailed" |
📖 Reference
詳しくはStripeのドキュメントをご覧ください。このプラグインはラッパーなので、詳しい情報はStripeのドキュメンテーションが役立ちます。
GooglePay(Android)
このプラグインの GooglePayLauncher は com.stripe:stripe-android
を利用しています。
https://stripe.com/docs/google-pay
Google Pay (Web)
このプラグインは "Payment Request Button" を利用しています。
https://stripe.com/docs/stripe-js/elements/payment-request-button?platform=html-js-testing-google-pay#html-js-prerequisites