この記事はデベロッパー アドボケート、Soc Sieng による Google Developers Blog の記事 "Simpler Google Pay integration for React and web developers" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

Google Pay API を使うと、迅速かつ簡単にウェブサイトで決済を行えます。
Google Pay JavaScript ライブラリは外部のライブラリやフレームワークに依存せず、ウェブサイトでどんなフレームワークが使われていても動作します（もちろん、使われていなくても動作します）。幅広い互換性が確保されているものの、ウェブサイトでフレームワークを使っている場合は、必ずしも簡単に統合できるとは限りません。そこで、この問題をどうにかしようとしています。

React 用の Google Pay ボタンの導入

React はウェブの UI の構築に特に広く使われているツールです。そこで、React 用の Google Pay ボタンをリリースし、効率良く統合できるようにしました。このコンポーネントを使えば、React の初心者でも経験豊富なベテランでも、また Google Pay を初めて組み込む方でも経験者でも、React を用いたウェブサイトに Google Pay を簡単に組み込むことができます。
このコンポーネントは GitHub のオープンソース プロジェクトとして公開されており、npm からも利用できます。この React コンポーネントは TypeScript で書かれており、対応しているエディタではコード補完が利用できます。また、ウェブサイトを TypeScript で構築している方は、入力中に型検証によってよくある問題を特定することもできます。

サポートされているエディタでは、リアルタイムでコードの補完と検証を行うことが可能

スタートガイド

最初のステップは、npm から Google Pay ボタン モジュールをインストールすることです。
npm install @google-pay/button-react

ボタンの追加と設定

Google Pay ボタンを React コンポーネントに追加するには、まずボタンをインポートします。
import GooglePayButton from '@google-pay/button-react';
その後、必要な設定値を使ってレンダリングします。
<GooglePayButton
  environment="TEST"
  paymentRequest={{ ... }}
   => {}}
  />
JSFiddle で試してみてください。
サポートされている設定プロパティの完全なリストは、コンポーネントのドキュメントをご覧ください。
統合を完了するには、paymentRequest.merchantInfo に 販売者 ID を設定する必要がある点に注意してください。販売者 ID は、Google Pay Business Console から取得できます。

販売者 ID は Google Pay Business Console で確認できる

その他のフレームワークのサポート

他のフレームワークを使っている、またはフレームワークをまったく使っていないデベロッパーのためのエクスペリエンスの改善も行っています。今回、Google Pay ボタン Custome Elementも同時にリリースしたのはそのためです。
Custom Element には次のような特長があります。
React コンポーネントと同様に、Google Pay ボタンCustom Element も GitHub にホストされており、npm から利用できます。実は、React コンポーネントと Custom Element は同じリポジトリを共有しており、コードの大部分も共通です。そのため、両方のバージョンが同等の機能を維持し、同じレベルで考慮されることになります。
JSFiddle でお試しください。

Google Pay JavaScript ライブラリ

既存の Google Pay JavaScript ライブラリに変更はありません。React コンポーネントや Custom Element の代わりに、Google Pay JavaScript ライブラリを直接使い続けることもできます。2 つのコンポーネントは、どちらも内部的に Google Pay JavaScript ライブラリを使っており、Google Pay JavaScript ライブラリ上に便利なレイヤーを提供しています。

フィードバック

私たち（Google Pay チーム）がフレームワーク固有のライブラリをリリースするのは、今回が初めてです。ぜひ、皆さんのフィードバックをお聞かせください。
Web Component 版の Google Pay ボタンは、React 以外のほとんどのフレームワークで利用できます。メリットや需要に応じて、他のフレームワークのサポートを追加することも検討する可能性があります。
React コンポーネントや Custom Element で問題が発生した場合は、GitHub の Issue に登録してください。または、問題を特定してその解決策を思いついた方は、遠慮なくプル リクエストをお送りください。その他の Google Pay 関連のリクエストや質問は、Google Pay Business Console の Contact Support オプションからお知らせください。

ご意見をお寄せください

質問がある方は、以下のコメント欄か、#AskGooglePayDev を使ってツイートしてお知らせください。


Reviewed by Eiji Kitamura - Developer Relations Team