Google Pay をウィジェット経由で利用
このガイドでは、 Google Pay DEUNAのSDKを利用して。この機能は、SDKが提供する2つの統合パスをカバーしています。
| 決済ウィジェット | 支払いVault | |
|---|---|---|
| 機能概要** | 完全なチェックアウト処理: UI、決済処理、および確認 | カードのトークン化のみ - カード ID を返却 |
| 決済処理を行う主体 | DEUNA (内部) | あなた (バックエンドからの Purchase API を使用) |
| Google Pay ボタン | DEUNA の iframe 内でレンダリング | あなた自身の UI 内でレンダリング |
| SDK メソッド | initPaymentWidget | initElements({ types: ['GOOGLE_PAY'] }) |
| 使用する状況 | スムーズな決済体験をご希望 | 決済フローを制御する必要がある場合、またはカード情報を後で使用する場合 |
1. 前提条件#
開始する前に、以下の条件を満たしていることを確認してください:
| 要件 | 備考 |
|---|---|
| DEUNA アカウント | DEUNA ダッシュボードで有効な商用アカウント。 |
publicApiKey | DEUNA から発行された公開 API キー。以下のために必要です。 DeunaSDK.initialize. |
orderToken | DEUNA Orders API を使用してバックエンドで生成。決済を開始するために必要。 |
userToken (オプション) | DEUNAの既知のユーザーに対してカードをトークン化する場合にのみ必要です。 |
| 互換性要件 | 公式の Google Pay でサポートされているデバイスに関するガイドGoogle Pay は、Chrome、Firefox、Safari、Edge、Opera、UC Browser をサポートしています。 Android WebView の統合については、追加の要件が適用されます。詳細は、 Android WebView ガイド |
2. Google Pay の設定に必要な項目#
設定には、以下の2つの手順が含まれます: 認証情報 および、本番環境では、 ドメイン登録 Google Pay ビジネスコンソール内の。
2.1 認証情報 (DEUNAが管理)
DEUNAは、あなたの商取引設定に基づいてGoogle Payの認証情報を解決します。関連するフィールドは以下のとおりです。
| フィールド | 意味 | 情報源 |
|---|---|---|
merchantId | Google Payの商取引ID(例: 12345678901234567890). | Google Pay Business Consoleで取得し、DEUNAダッシュボードに保存します。 |
merchantName | Google Payのシートに表示されるラベル。 | DEUNAダッシュボード。 |
gateway | 決済ゲートウェイの識別子 (例: "deuna"). 次の状況で使用されます。 PAYMENT_GATEWAY tokenization. | DEUNAダッシュボード。 |
gatewayMerchantId | ゲートウェイ内の商取引者識別子。 | DEUNAダッシュボード。 |
tokenizationType | "PAYMENT_GATEWAY" (デフォルト)または "DIRECT". | 商取引者の選択。 |
publicKey (DIRECT のみ) | ダイレクトトークン化に使用される、Base64エンコードされた公開鍵。 | DEUNAダッシュボード。 |
protocolVersion (DIRECT のみ) | デフォルト "ECv2". | DEUNAダッシュボード。 |
allowedCardNetworks | 一部 VISA, MASTERCARD, AMEX, DISCOVER, INTERAC, JCB. | 任意 – デフォルト値が設定されています。 |
allowedCardAuthMethods | PAN_ONLY, CRYPTOGRAM_3DS. | 任意 – デフォルト値が設定されています。 |
ほとんどの連携では、 PAYMENT_GATEWAY DEUNAをゲートウェイとして利用したトークン化。 DIRECT これは、Google Pay トークンを自社で解読する商社向けに予約されています。
DEUNAダッシュボードで提供/確認する必要がある情報は次のとおりです:
- Google Pay 認証情報 貴社のアカウントで有効化されています。
- Merchant ID および 事業者名.
- ゲートウェイ および gateway merchant ID (PAYMENT_GATEWAY用)。
- 許可されているネットワーク および 認証方法 (オプション)。
2.2 ドメイン登録 (本番環境のみ)
Google Payは、すべての 本番環境での利用を必要とします ドメインは、 Google Pay ビジネスコンソール で登録する必要があります。これにより、実際の決済を開始できます。
- [Go to] Google Pay & Wallet コンソール → 統合 → ビジネス情報.
- Web‑SDK を読み込むドメイン(例:
checkout.mystore.com). - 統合を承認のために提出してください(チェックアウトフローのスクリーンショットが必要です)。
ドメインにファイルはホストする必要はありません。テスト/サンドボックス環境はすぐに利用できます。本番環境のみ、コンソールへの登録が必要です。
SDKはGoogle Payを自動的に
TEST特定のenvモード以外であれば、"production"を使用できます。これにより、コンソールへの登録なしで開発およびテストを行うことができます。
3. 統合#
ご使用の特定の統合に応じて、DEUNAのSDKに関する「開始」ガイドを参照してください。
3.1 決済ウィジェット
DEUNA が決済体験全体(UI、決済処理、および確認)を処理する場合に使用します。
決済ウィジェットで getWalletsAvailable をいつ呼び出す必要がありますか?
すべての決済方法を有効にした状態でウィジェットを開くと、このメソッドを呼び出す必要はありません。DEUNAは決済方法セレクター(ウォレットボタンを含む)をレンダリングし、利用可能性を内部で解決します。
以下の状況で必要です: getWalletsAvailable ウィジェット内でApple Payボタンを自分でレンダリングし、決済ウィジェットをスタンドアロンモードで使用して、直接その決済方法に移行する場合。その場合、事前に呼び出して、ボタンを表示するかどうかを決定してください。
Web SDK
追加設定は不要:Google のスクリプトを手動で含める必要はありません。initPaymentWidget が呼び出されると、Web SDK は Google Pay JavaScript SDK (pay.js) を動的にロードします。
// 1) Initialize the SDK
await DeunaSDK.initialize({
env: 'sandbox',
publicApiKey: '<YOUR_PUBLIC_API_KEY>',
});
// 2) Check availability + warm up the Google Pay provider
const available = await DeunaSDK.getWalletsAvailable();
if (available.includes('GOOGLE_PAY')) {
// Render button for Google Pay and append a listener (EXAMPLE)
btn.addEventListener('click', () => {
DeunaSDK.initPaymentWidget({
orderToken: '<order-token>', // REQUIRED
paymentMethods: [
{
paymentMethod: 'wallet',
processors: ['google_pay'],
},
], // In case only the specific payment method is to be used
callbacks: {
onSuccess: (order) => {
console.log('Payment completed:', order);
},
onError: (error) => {
console.error('Payment failed:', error.metadata.message);
},
onClosed: (action) => {
console.log('Widget closed:', action);
},
},
});
});
} else {
console.error('Google Pay is not available on this device.');
}Android SDK
Android では、Google Pay は DEUNA SDK によって使用される WebView 内の PaymentRequest を介して有効になります。 ホストアプリは、次の設定を適用する必要があります。
- アプリモジュールに次のクエリを追加してください。 ホストアプリは、Google Pay との通信を可能にするために、これらの Intent を宣言する必要があります。
build.gradleまたはbuild.gradle.kts:GROOVYdependencies { implementation("androidx.webkit:webkit:1.14.0") } AndroidManifest.xmlSDK 設定: この設定は、AndroidManifest.xmlXML<queries> <intent> <action android:name="org.chromium.intent.action.PAY" /> </intent> <intent> <action android:name="org.chromium.intent.action.IS_READY_TO_PAY" /> </intent> <intent> <action android:name="org.chromium.intent.action.UPDATE_PAYMENT_DETAILS" /> </intent> </queries>- の呼び出しを行う前に実行する必要があります。
initPaymentWidgetメソッドまたは埋め込みのレンダリングDeunaWidget.Kotlinimport androidx.webkit.WebSettingsCompat import androidx.webkit.WebViewFeature import com.deuna.maven.DeunaSDK import com.deuna.maven.shared.Environment val deunaSDK = DeunaSDK( environment = Environment.SANDBOX, publicApiKey = "YOUR_PUBLIC_API_KEY" ) // This enables the host app to configure PaymentRequest for Google Pay support. deunaSDK.applyCustomWebViewSettings { settings -> // Guard the call to avoid crashes on devices/WebView versions that do not support PaymentRequest. if (WebViewFeature.isFeatureSupported(WebViewFeature.PAYMENT_REQUEST)) { // Enable PaymentRequest API on DEUNA's internal WebView settings. WebSettingsCompat.setPaymentRequestEnabled(settings, true) } }
3.2 支払い Vault
独自のUI内にネイティブなGoogle Payボタンを表示する場合に使用します(DEUNAのiframeは使用しません)。カスタム/ヘッドレスなチェックアウトでよく使用されます。
Web SDK
Web SDK を使用して、DEUNA バックエンドから Google Pay の認証情報を取得します。 publicApiKey および(オプションで) orderToken.
詳細については、こちらを参照してください。 getWalletsAvailable documentation.
// 1) Initialize the SDK
await DeunaSDK.initialize({
env: 'sandbox',
publicApiKey: '<YOUR_PUBLIC_API_KEY>',
});
// 2) Check availability + warm up the Google Pay provider
const available = await DeunaSDK.getWalletsAvailable();
if (available.includes('GOOGLE_PAY')) {
// Render button for Google Pay and append a listener (EXAMPLE)
btn.addEventListener('click', () => {
deuna.initElements({
types: [{ name: 'GOOGLE_PAY' }],
orderToken: '<order-token>', // REQUIRED FOR MERCHANTS
userInfo: {
email: '<email>',
firstName: '<firstName>',
lastName: '<lastName>',
},
callbacks: {
// Called after user approves the Google Pay sheet.
// Send the token to your backend, return the result.
onSuccess: async (payload) => {
const cardId = payload.data.card_id;
// use the cardId to process payment
},
onError: (error) => {
console.error('Payment failed:', error.metadata.message);
},
},
});
});
} else {
console.error('Google Pay is not available on this device.');
}Android SDK
このパスを使用すると、ネイティブの Google Pay シートを直接表示できます。 SDK はデバイスの可用性を確認し、DEUNA バックエンドから Google Pay の認証情報を取得し、支払いシートを起動します。 結果として、トークン化されたカードペイロードが、あなたの onSuccess callback.
ステップ1 — 準備状況の確認
getWalletsAvailable() を一度だけ呼び出し、ユーザーが支払いステップに到達する前に呼び出してください。 SDK は、DEUNA の商社設定と、デバイスに保存されたカードがあるかどうかを確認します。
import com.deuna.maven.DeunaSDK
import com.deuna.maven.shared.Environment
import com.deuna.maven.wallets.GetWalletsAvailableParams
import com.deuna.maven.wallets.WalletProvider
import com.deuna.maven.wallets.getWalletsAvailable
val deunaSDK = DeunaSDK(
environment = Environment.SANDBOX,
publicApiKey = "YOUR_PUBLIC_API_KEY",
)
deunaSDK.getWalletsAvailable(
context = context,
params = GetWalletsAvailableParams(
orderToken = "<order-token>", // optional — pass if you have one at this point
),
) { wallets, error ->
if (error != null) {
// handle fetch error
return@getWalletsAvailable
}
val googlePayAvailable = WalletProvider.GOOGLE_PAY in wallets
// show or hide your Google Pay button based on googlePayAvailable
}ステップ 2 — Google Pay の起動
ユーザーが Google Pay ボタンをクリックすると、次のコードを呼び出してください。 initElements ~ GOOGLE_PAY このコードは、注文用の新しい認証情報を取得し、ネイティブの支払いシートを起動します。
// Wire this to your Google Pay button's onClick
deunaSDK.initElements(
context = context,
types = listOf(mapOf("name" to "GOOGLE_PAY")),
orderToken = "<order-token>",// required for google pay wallet
userInfo = UserInfo(// optional — associate with a DEUNA user
email = "user@example.com",
firstName = "Jane",
lastName = "Doe",
),
callbacks = ElementsCallbacks().apply {
onSuccess = { payload ->
// payload contains the tokenized card data
// send it to your backend to complete the purchase
}
onError = { error ->
// error.metadata.code and error.metadata.message describe the failure
}
onClosed = { action ->
// user dismissed the sheet
}
},
)React Native SDK
このパスを使用すると、WebView を使用せずに、ネイティブの Google Pay シートを直接表示できます。 SDK はデバイスの可用性を確認し、DEUNA バックエンドから Google Pay の認証情報を取得し、支払いシートを起動します。 結果として、トークン化されたカードペイロードが、あなたの onSuccess コールバックに送信されます。
前提条件:
- デバイスには Google Play Services がインストールされ、最新バージョンである必要があります。
- デバイスには、Google Walletに少なくとも1つのカードが保存されている必要があります。
- 商社アカウントには、DEUNA ダッシュボードで Google Pay が有効になっている必要があります。
React Native CLI — 追加してください android/app/src/main/AndroidManifest.xml:
<application>
...
<meta-data
android:name="com.google.android.gms.wallet.api.enabled"
android:value="true" />
</application>エキスポ — to を追加app.json and は npx expo のビルドを実行します。
{
"expo": {
"android": {
"manifestTransforms": [
{
"type": "meta-data",
"name": "com.google.android.gms.wallet.api.enabled",
"value": "true"
}
]
}
}
}import { useState, useEffect } from 'react';
import { DeunaSDK } from '@deuna/react-native-sdk';
// 1) Initialize the SDK
const sdk = new DeunaSDK({
publicApiKey: '<YOUR_PUBLIC_API_KEY>',
environment: 'sandbox', // 'production' | 'sandbox'
});
// 2) Check availability
const available = await sdk.getWalletsAvailable({
orderToken: '<order-token>',
userInfo: {
email: '<email>',
firstName: '<firstName>',
lastName: '<lastName>',
},
});
// 3) Launch
if (available.includes('google_pay')) {
sdk.initElements({
orderToken: '<order-token>', // required
types: [{ name: 'google_pay' }],
userInfo: { // required
email: '<email>',
firstName: '<firstName>',
lastName: '<lastName>',
},
callbacks: {
onSuccess: (payload) => {
const cardId = payload?.card_id;
// use cardId to process payment on your backend
},
onError: (error) => {
console.error('Payment failed:', error.metadata.message);
},
onClosed: (action) => {
console.log('Sheet dismissed by', action);
},
},
});
}注意点#
| 注意 | 修正 |
|---|---|
| ボタンが表示されない | 確認 getWalletsAvailable() result. isReadyToPay デバイスが拒否される— Googleにログインしていること、および保存されたカードがあることを確認してください。 |
| ローカルでは動作しますが、本番環境では動作しません。 | ドメインがGoogle Pay Business Consoleに登録されていません。 |
DEVELOPER_ERROR シート | merchantId, gateway、または gatewayMerchantId が正しくないか、または欠けている可能性があります。 walletConfig. |
| のシートは開きますが、支払い方法がありません。 | のネットワーク allowedCardNetworks Googleアカウントに保存されているカードと一致しません。 |
| バックエンドでのトークン復号が失敗しています。 | あなたは DIRECT モードで不一致が発生 publicKey / protocolVersion. Prefer PAYMENT_GATEWAY ただし、カードの生のデータが必要な場合は。 |
クイックリファレンス
| API | 目的 |
|---|---|
DeunaSDK.getWalletsAvailable() | 利用可能なウォレットを確認し、プロバイダーを準備します。 |
DeunaSDK.initElements({ types, orderToken?, walletConfig?, callbacks }) | 独自のUIにネイティブウォレットボタンを実装します。 |
| Google Pay ビジネスコンソール | 本番環境のドメインを登録する必要があります。サーバーにホストするファイルは不要です。 |