メインコンテンツへスキップ
このページで

このガイドでは、 Google Pay DEUNAのSDKを利用して。この機能は、SDKが提供する2つの統合パスをカバーしています。

決済ウィジェット支払いVault
機能概要**完全なチェックアウト処理: UI、決済処理、および確認カードのトークン化のみ - カード ID を返却
決済処理を行う主体DEUNA (内部)あなた (バックエンドからの Purchase API を使用)
Google Pay ボタンDEUNA の iframe 内でレンダリングあなた自身の UI 内でレンダリング
SDK メソッドinitPaymentWidgetinitElements({ types: ['GOOGLE_PAY'] })
使用する状況スムーズな決済体験をご希望決済フローを制御する必要がある場合、またはカード情報を後で使用する場合

1. 前提条件#

開始する前に、以下の条件を満たしていることを確認してください:

要件備考
DEUNA アカウントDEUNA ダッシュボードで有効な商用アカウント。
publicApiKeyDEUNA から発行された公開 API キー。以下のために必要です。 DeunaSDK.initialize.
orderTokenDEUNA 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の認証情報を解決します。関連するフィールドは以下のとおりです。

フィールド意味情報源
merchantIdGoogle Payの商取引ID(例: 12345678901234567890).Google Pay Business Consoleで取得し、DEUNAダッシュボードに保存します。
merchantNameGoogle 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.任意 – デフォルト値が設定されています。
allowedCardAuthMethodsPAN_ONLY, CRYPTOGRAM_3DS.任意 – デフォルト値が設定されています。

ほとんどの連携では、 PAYMENT_GATEWAY DEUNAをゲートウェイとして利用したトークン化。 DIRECT これは、Google Pay トークンを自社で解読する商社向けに予約されています。

DEUNAダッシュボードで提供/確認する必要がある情報は次のとおりです:

  1. Google Pay 認証情報 貴社のアカウントで有効化されています。
  2. Merchant ID および 事業者名.
  3. ゲートウェイ および gateway merchant ID (PAYMENT_GATEWAY用)。
  4. 許可されているネットワーク および 認証方法 (オプション)。

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) を動的にロードします。

JavaScript
// 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:
    GROOVY
    dependencies {
        implementation("androidx.webkit:webkit:1.14.0")
    }
  • AndroidManifest.xml SDK 設定: この設定は、
    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.
    Kotlin
    import 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.

JavaScript
// 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 の商社設定と、デバイスに保存されたカードがあるかどうかを確認します。

Kotlin
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 このコードは、注文用の新しい認証情報を取得し、ネイティブの支払いシートを起動します。

Swift
// 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:

XML
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>

エキスポ — to を追加app.json and は npx expo のビルドを実行します。

JSON
{
  "expo": {
    "android": {
      "manifestTransforms": [
        {
          "type": "meta-data",
          "name": "com.google.android.gms.wallet.api.enabled",
          "value": "true"
        }
      ]
    }
  }
}

JavaScript
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 ビジネスコンソール本番環境のドメインを登録する必要があります。サーバーにホストするファイルは不要です。