Google Pay

Google Payを使えば、ワンフローで即時決済が可能です。詳しい設定は以下をご確認ください：

もしあながたWeb上でも動作させるなら、 "Payment Request Button" のドキュメントを読むべきです。HTTPSでホスティングされたアプリケーションでしか動作しません。開発環境と本番環境両方です。HTTPSで動かすための方法のひとつに ngrok というサービスを利用する方法があります。

🐾 実装ガイド

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 () => {
  // Check to be able to use Google Pay on device
  const isAvailable = Stripe.isGooglePayAvailable().catch(() => undefined);
  if (isAvailable === undefined) {
    // disable to use GooglePay
    return;
  }
})();

このメソッドは resolve(): void か reject('Not implemented on Device.') を返却します。

method isGooglePayAvailable()

isGooglePayAvailable() => Promise<void>

2. createGooglePay

バックエンドエンドポイントに接続し、それぞれのキーを取得する必要があります。これは本プラグインでは「できない」機能です。そのため、 HTTPClient や Axios 、 Ajax などの機能を利用することができます。

Stripeは、バックエンドの実装方法を提供します:

その後、これらのキーを createGooglePay メソッドに設定します。

(async () => {
  // Connect to your backend endpoint, and get paymentIntent.
  const { paymentIntent } = await this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);

  // Prepare GooglePay
  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>

<<<<<<< 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

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 () => {
  // Present GooglePay
  const result = await Stripe.presentGooglePay();
  if (result.paymentResult === GooglePayEventsEnum.Completed) {
    // Happy path
  }
})();

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 リスナーを追加する必要があります。

// be able to get event of GooglePay
Stripe.addListener(GooglePayEventsEnum.Completed, () => {
  console.log('GooglePayEventsEnum.Completed');
});

使用できるイベント名は GooglePayEventsEnum にあります。

enum GooglePayEventsEnum

Members Value

Loaded "googlePayLoaded"

FailedToLoad "googlePayFailedToLoad"

Completed "googlePayCompleted"

Canceled "googlePayCanceled"

Failed "googlePayFailed"

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

📖 Reference

詳しくはStripeのドキュメントをご覧ください。このプラグインはラッパーなので、詳しい情報はStripeのドキュメンテーションが役立ちます。

GooglePay(Android)

このプラグインの GooglePayLauncher は com.stripe:stripe-android を利用しています。

Google Pay (Web)

このプラグインは "Payment Request Button" を利用しています。

<?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">pk_test_YssveZBA1kucfaTfZbeDwauN</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>
</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"/>
    </application>

    <!-- Permissions -->

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

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

(async () => {
  // Check to be able to use Google Pay on device
  const isAvailable = Stripe.isGooglePayAvailable().catch(() => undefined);
  if (isAvailable === undefined) {
    // disable to use Google Pay
    return;
  }
  
  Stripe.addListener(GooglePayEventsEnum.Completed, () => {
    console.log('GooglePayEventsEnum.Completed');
  });
  
  // Connect to your backend endpoint, and get paymentIntent.
  const { paymentIntent } = await this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);

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

capacitor-community/stripe

ガイド

はじめかた

メソッド

Google Pay

🐾 実装ガイド

Prepare settings

strings.xml

AndroidManifest.xml

1. isGooglePayAvailable

`method` isGooglePayAvailable()

2. createGooglePay

`method` createGooglePay(...)

`createGooglePay` では `CreateGooglePayOption` が利用できます。

`interface` CreateGooglePayOption

3. presentGooglePay

`method` presentGooglePay()

`type alias` GooglePayResultInterface

4. addListener

`enum` GooglePayEventsEnum

📖 Reference

GooglePay(Android)

Google Pay (Web)

ガイド

はじめかた

メソッド

Google Pay

🐾 実装ガイド

Prepare settings

strings.xml

AndroidManifest.xml

1. isGooglePayAvailable

method isGooglePayAvailable()

2. createGooglePay

method createGooglePay(...)

createGooglePay では CreateGooglePayOption が利用できます。

interface CreateGooglePayOption

3. presentGooglePay

method presentGooglePay()

type alias GooglePayResultInterface

4. addListener

enum GooglePayEventsEnum

📖 Reference

GooglePay(Android)

Google Pay (Web)

`method` isGooglePayAvailable()

`method` createGooglePay(...)

`createGooglePay` では `CreateGooglePayOption` が利用できます。

`interface` CreateGooglePayOption

`method` presentGooglePay()

`type alias` GooglePayResultInterface

`enum` GooglePayEventsEnum