Help us understand the problem. What is going on with this article?

React NativeでGoogle Pay

More than 1 year has passed since last update.

React NativeでGoogle Payのサンプルアプリを作り、GitHubに公開しました。
Google Payをネイティブコード書いて自力で実装する方のご参考になればと思います。

※ テスト環境ではトークン取得まで動くことを確認しましたが、 本番環境での実際の支払いは未確認です
Requesting production access の過程が面倒だったので。。(今後検証したら更新します。)

背景

ReactNative(Android側)でGoogle Payを実装したかったが、 react-native-paymentsはAndroid Payにしか対応していないようですし、今後もしばらく対応はなさそうなので、ライブラリは使わず自分で実装してみました。
(他に良いライブラリあったのかも知れませんが、見つけられませんでした。。)

ソースはGitHubでご確認いただけます。

demo_.gif

前提

支払いはゲートウェイを使って行い、Google Payからはトークンだけ取得することが前提です。

機能

ライブラリとして公開する予定はないので、機能は以下の2つだけです。

1. Google Payが使えるか確認する

画面内にある2つのボタンのうち、上側の青いボタンをタップすると、Google Payが使えるかどうかを判定できます。使える場合は、下のGoogle Payボタンが活性化されます。

2. GooglePayのペイメントシートを出してトークンを受け取る

実際の支払いはゲートウェイを使う想定なので、トークンを受け取るところまで実装しました。
無事にトークンを受け取れれば、Google Payボタンの下にトークンがTextで表示されるはずです。

設定可能なプロパティ

Google Payのガイダンスをみると自分で設定する項目が結構ありますが、App.js で設定できるのは以下のみです。それ以外はネイティブコードにベタ書きしています。

Google Payのボタンは、黒と白、さらに枠線有る無しがありますが、今回は白で枠ありを使っています。(xml自体は全パターンプロジェクトに含まれています)

なお、テスト環境であれば、各プロパティは現状ママで検証できるはずです。

  • cardPaymentMethodMap.gateway.name: ゲートウェイの名前 (GMOならgmopgなど)
  • cardPaymentMethodMap.gateway.merchantId: ゲートウェイのショップIDなど
  • cardPaymentMethodMap.cardNetworks: 使うカード (例:['AMEX', 'JCB', 'MASTERCARD', 'VISA'])
  • transaction.totalPrice: 合計金額
  • transaction.totalPriceStatus: 合計金額のステータス
  • transaction.currencyCode: 通貨
  • merchantName: ゲートウェイ業者の名前(ペイメントシートに表記されることがあるらしい)
  • テスト環境か本番環境か:(ENVIRONMENT_TEST か ENVIRONMENT_PRODUCTION)
const request = {
  cardPaymentMethodMap: {
    gateway: {
      name: 'example',
      merchantId: 'exampleMerchantId'
    },
    cardNetworks
  },
  transaction: {
    // this is just sample so price is fixed.
    totalPrice: '200',
    totalPriceStatus: 'FINAL',
    currencyCode: 'JPY'
  },
  merchantName: 'Example Merchant'
}

・・・

    const token = await GooglePayModule.requestPayment(
      // You can change environment here
      // GooglePayModule.ENVIRONMENT_TEST is for testing
      // GooglePayModule.ENVIRONMENT_PRODUCTION is for product
      GooglePayModule.ENVIRONMENT_TEST,
      request
    ).catch(error => this.setState({ text: `error: ${error}` }))

参考サイト

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away