Google Pay via Widget

Questa guida ti accompagna attraverso l'integrazione Google Pay usando i DEUNA SKD. Copre i due percorsi di integrazione che il SDK espone:

1. Prerequisiti#

Prima di iniziare, assicurarsi che i seguenti siano in posizione:

2. Cosa deve essere pre-configurato per Google Pay#

La configurazione ha due parti: credenziali e, per la produzione, registrazione dominio all'interno della console aziendale Google Pay.

2.1 Credenziali (diretto da DEUNA)

DEUNA risolve le credenziali di Google Pay dalla configurazione del commerciante. I campi coinvolti sono:

La maggior parte delle integrazioni userà PAYMENT_GATEWAY tokenizzazione con DEUNA come il gateway. DIRECT è riservato ai commercianti che decifrano il Google Pay gettone essi stessi.

Cosa devi fornire/confermare nel Dashboard DEUNA:

1. Google Pay credenziali abilitato per il vostro commerciante.
2. Merchant ID e nome mercante.
3. Gateway e gateway merchant ID (per PAGAMENTO GATEWAY).
4. Reti ammesse e Metodi acustici (opzionale).

2.2 Registrazione del dominio (solo produzione)

Google Pay richiede che ogni produzione dominio essere registrato nel Console di affari Google Pay prima che possa prendere pagamenti in tempo reale:

• Vai a Google Pay & Wallet Console → Integrazione → Informazioni aziendali.
• Registra il dominio (s) che carichi il Web‐SDK (es. checkout.mystore.com).
• Invia la tua integrazione per approvazione (le immagini del flusso di checkout sono richieste).

Nessun file deve essere ospitato sul tuo dominio. Gli ambienti di prova/sandbox funzionano fuori dalla scatola — solo la produzione richiede la registrazione della console.

L'SDK automaticamente passa Google Pay a TEST modalità per qualsiasi env altri "production", in modo da poter sviluppare e QA senza registrazione console.

3. Integrazioni#

Assicurarsi di seguire la guida di avvio per i nostri SDKs a seconda della vostra integrazione specifica:

• Web SDK >= v1.6
• Android SDK >= 2.11.4
• iOS SDK >= 2.11.1
• Reazione SDK nativo >= 2.1.0

3.1 Widget di pagamento

Utilizzare questo percorso quando si desidera DEUNA per gestire l'esperienza di checkout completa (UI, elaborazione dei pagamenti e conferma).

Quando hai bisogno di getWalletsDisponibile nel Widget di pagamento?

Se si apre il widget con tutti i metodi di pagamento abilitati, non è necessario chiamare questo metodo — DEUNA rende il selettore del metodo di pagamento (compresi i pulsanti del portafoglio) e risolve la disponibilità internamente.

Hai solo bisogno di te. getWalletsAvailable quando si visualizza il proprio pulsante Apple Pay al di fuori del selettore e utilizzare Payment Widget in modalità standalone per saltare direttamente in quel metodo di pagamento. In questo caso, chiamalo in anticipo per decidere se mostrare il pulsante.

SDK Web

Non è necessario includere manualmente gli script di Google. Il Web SDK carica dinamicamente il Google Pay JavaScript SDK (pay.js) il momento initPayment Si chiama Widget.

// 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.');
}

SDK Android

In Android, Google Pay è abilitato tramite PaymentRequest all'interno del WebView utilizzato dal DEUNA SDK. L'app host deve applicare la seguente configurazione:

• Aggiungi il seguente al modulo app build.gradle o build.gradle.kts:
  GROOVYCopia

  dependencies {
      implementation("androidx.webkit:webkit:1.14.0")
  }

• AndroidManifest.xml Query: L'app host deve dichiarare questi intenti per consentire la comunicazione con Google Pay.
  AndroidManifest.xmlXMLCopia

  <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>

• Configurazione SDK: Questa configurazione deve essere eseguita prima di chiamare initPaymentWidget metodo o rendering di un incorporato DeunaWidget.
  KotlinCopia

  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 Vaso di pagamento

Utilizzare questo percorso quando si desidera rendere un pulsante Google Pay nativo all'interno del proprio UI (no DEUNA iframe). Comune in controlli personalizzati/senza testa.

SDK Web

Lasciare che il Web SDK risolva le credenziali di Google Pay dal backend DEUNA utilizzando il vostro publicApiKey e (opzionale) un orderToken.

Per maggiori informazioni controllare il 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.');
}

SDK Android

Utilizzare questo percorso quando si desidera rendere un foglio di Google Pay nativo direttamente. Il SDK controlla la disponibilità del dispositivo, fetches Google Pay credenziali dal backend DEUNA e lancia il foglio di pagamento. Il risultato è un carico di pagamento carta tokenizzato consegnato al vostro onSuccess callback.

Passo 1 — Controllare la disponibilità

Chiamare getWalletsAvailable() una volta, prima che l'utente raggiunga la fase di pagamento. Il SDK controlla sia la configurazione del commerciante DEUNA che se il dispositivo ha Google Play Services con una scheda salvata.

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
}

Passo 2 — Avviare Google Pay

Quando l'utente tocca il pulsante Google Pay, chiama initElements con GOOGLE_PAY come il tipo. Il SDK fetches credenziali fresche per l'ordine, quindi lancia il foglio di pagamento nativo.

// 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
        }
    },
)

SDK React Native

Utilizzare questo percorso quando si desidera rendere un foglio di Google Pay nativo direttamente, senza un WebView. Il SDK controlla la disponibilità del dispositivo, fetches Google Pay credenziali dal backend DEUNA e lancia il foglio di pagamento. Il risultato è un carico di pagamento carta tokenizzata consegnato al vostro callback suSuccess.

Prerequisiti:

• Il dispositivo deve avere installato e aggiornato Google Play Services.
• Il dispositivo deve avere almeno una carta salvata in Google Wallet.
• L'account del commerciante deve avere Google Pay abilitato nel cruscotto DEUNA.

Reazione CLI — aggiungere android/app/src/main/AndroidManifest.xml:

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

Expo — aggiungere a app.json e eseguire npx expo prebuild:

{
  "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);
      },
    },
  });
}

Prese#

Breve riferimento