Google Pay
Google Pay を使用した決済の受け付け方法をご紹介します。
Google Pay を使用すると、Google Play、YouTube、Chrome、Android デバイスなど、Google アカウントに保存されているクレジットカードやデビットカードを使用して、アプリやウェブサイトで支払いを行うことができます。Google Pay API を使用して、顧客の Google アカウントに保存されているクレジットカードまたはデビットカードをリクエストします。
Google Pay は Stripe のプロダクトや機能 (継続支払いなど) と完全な互換性があるため、通常は従来の支払いフォームの代わりに使用できます。物品、寄付、サブスクリプションの受け付けに使用します。
Stripe および Google Pay の利用と Google Play の課金システムの利用について![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
物品およびサービスの販売については、お客様のアプリで Google Pay など Stripe で対応可能な支払い方法を受け付けることができます。これらの支払いは Stripe を介して処理され、お客様は Stripe の決済手数料を支払うだけで済みます。ただし、デジタル商品およびコンテンツのアプリ内購入では. Google Play の課金システム を使用する必要があります。これらの支払いは Google によって処理され、同社の決済手数料が適用されます。
Google Play の課金システムを使用しなければならない購入の詳細については、Google Play の開発者向け利用規約をご覧ください。
Stripe の React Native SDK は、React Native アプリで Google Pay の受け付けを開始するための最も早くて簡単な方法です。PlatformPayButton コンポーネントには Google の必要な UI がラップされており、また confirmPlatformPayPayment
と createPlatformPayPaymentMethod
メソッドを使用して、アプリから最小限の設定でシームレスに支払いを回収または作成できます。
Stripe を設定するサーバ側クライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
サーバ側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。
クライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。
次に、その他の必要な依存関係をインストールします。
- iOS の場合は、ios ディレクトリーに移動して
pod install
を実行し、必要なネイティブ依存関係もインストールします。 - Android の場合は、依存関係をインストールする必要はありません。
Stripe の初期化![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
React Native アプリで Stripe を初期化するには、決済画面を StripeProvider
コンポーネントでラップするか、initStripe
初期化メソッドを使用します。publishableKey
の API 公開可能キーのみが必要です。次の例は、StripeProvider
コンポーネントを使用して Stripe を初期化する方法を示しています。
import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( <StripeProvider publishableKey={publishableKey} merchantIdentifier="merchant.identifier" // required for Apple Pay urlScheme="your-url-scheme" // required for 3D Secure and bank redirects > // Your app code here </StripeProvider> ); }
Google Pay を有効にする![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Google Pay を使用するには、まず以下を AndroidManifest.xml の <application>
に追加し、Google Pay API を有効化します。
<application> ... <meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true" /> </application>
詳細は、Google Pay の Android 向け Google Pay API を設定する を参照してください。
PaymentIntent を作成するサーバー側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
まず、サーバーで PaymentIntent
を作成し、回収する金額と通貨を指定します。すでに Payment Intents API を使用したシステムがある場合は、card
を PaymentIntent
の支払い方法のタイプのリストに追加します (これは、何も指定しなかった場合のデフォルトの支払い方法でもあります)。
PaymentIntent には client secret が含まれています。これを React Native アプリで使用することで、PaymentIntent オブジェクト全体を渡すことなく安全に支払いプロセスを完了できます。アプリで、サーバーの PaymentIntent をリクエストし、その client secret を保存します。
Google Pay を初期化するクライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
まず、isPlatformPaySupported
を呼び出して、デバイスが Google Pay をサポートしているかどうかを確認します。
import { usePlatformPay } from '@stripe/stripe-react-native'; function PaymentScreen() { const { isPlatformPaySupported } = usePlatformPay(); React.useEffect(() => { (async function () { if (!(await isPlatformPaySupported({ googlePay: {testEnv: true} }))) { Alert.alert('Google Pay is not supported.'); return; } })(); }, []); ... return ( <View > ... </View> ); }
Google Pay 支払い画面を表示するクライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Google Pay が利用可能であることが分かり、アプリが PaymentIntent
または SetupIntent
の client secret を取得したら、confirmPlatformPayPayment
を呼び出します。SetupIntent
を確定する際は、代わりに confirmPlatformPaySetupIntent
を使用します。
import {PlatformPayButton, usePlatformPay} from '@stripe/stripe-react-native'; function PaymentScreen() { const { isPlatformPaySupported, confirmPlatformPayPayment, } = usePlatformPay(); React.useEffect(() => { ... // see above }, []); const fetchPaymentIntentClientSecret = async () => { // Fetch payment intent created on the server, see above const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'usd', }), }); const { clientSecret } = await response.json(); return clientSecret; }; const pay = async () => { const clientSecret = await fetchPaymentIntentClientSecret(); const { error } = await confirmPlatformPayPayment( clientSecret, { googlePay: { testEnv: true, merchantName: 'My merchant name', merchantCountryCode: 'US', currencyCode: 'USD', billingAddressConfig: { format: PlatformPay.BillingAddressFormat.Full, isPhoneNumberRequired: true, isRequired: true, }, }, } ); if (error) { Alert.alert(error.code, error.message); // Update UI to prompt user to retry payment (and possibly another payment method) return; } Alert.alert('Success', 'The payment was confirmed successfully.'); }; return ( <View > <PlatformPayButton type={PlatformPay.ButtonType.Pay} onPress={pay} style={{ width: '100%', height: 50, }} /> </View> ); }
Google Pay を本番環境に移行する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Google の指示 に従ってアプリの本番環境でのアクセスをリクエストします。メッセージが表示されたら、連携タイプに Gateway (ゲートウェイ) を選択し、審査のためにアプリのスクリーンショットを提供します。
アプリが承認されたら、testEnv: false
を使用し、署名済みのアプリのリリースビルドから Google Pay を起動して、本番環境で連携をテストします。この際に本番環境 API キーを使用することを忘れないでください。capture_
= manual
を指定した PaymentIntent
を使用すると、支払いをキャプチャーせずに取引を処理できます。