Google Pay mediante widget

Esta guía le guiará en la integración pago de google utilizando los SKD DEUNA. Cubre las dos rutas de integración que expone el SDK:

1. Requisitos previos#

Antes de comenzar, asegúrese de que los siguientes elementos estén disponibles:

2. Qué se debe preconfigurar para Google Pay#

La configuración tiene dos partes: credenciales y, para la producción, registro de dominio dentro de Google Pay Business Console.

2.1 Credenciales (tramitadas por la DEUNA)

DEUNA resuelve las credenciales de Google Pay desde la configuración de su comerciante. Los campos involucrados son:

La mayoría de las integraciones utilizarán PAYMENT_GATEWAY tokenización con DEUNA como puerta de entrada. DIRECT está reservado para comerciantes que descifran ellos mismos el token de Google Pay.

Lo que necesita proporcionar/confirmar en el Panel de DEUNA:

1. credencial de pago de Google habilitado para su comerciante.
2. Merchant ID y nombre del comerciante.
3. Puerta de enlace y gateway merchant ID (para PAGO_GATEWAY).
4. Redes permitidas y métodos de autenticación (opcional).

2.2 Registro de dominio (solo producción)

Google Pay requiere que cada producción dominio estar registrado en el Consola empresarial de Google Pay antes de que pueda aceptar pagos en vivo:

• Vaya a Consola Google Pay & Wallet → Integración → Información comercial.
• Registre los dominios que cargarán el SDK web (p. ej. checkout.mystore.com).
• Envíe su integración para su aprobación (se requieren capturas de pantalla del flujo de pago).

No es necesario alojar ningún archivo en su dominio. Los entornos de prueba/sandbox funcionan de inmediato: solo la producción requiere el registro de la consola.

El SDK cambia automáticamente Google Pay a TEST modo para cualquier env aparte de "production", para que puedas desarrollar y realizar controles de calidad sin necesidad de registrarte en la consola.

3. Integraciones#

Asegúrese de seguir la guía de inicio rápido para nuestros SDKs según su integración específica:

• SDK web >= v1.6
• SDK de Android >= 2.11.4
• SDK de iOS >= 2.11.1
• SDK de React Native >= 2.1.0

3.1 Widget de pago

Utilice esta ruta cuando desee que DEUNA maneje la experiencia de pago completa (UI, procesamiento de pago y confirmación).

¿Cuándo necesito llamar a getWalletsAvailable en el Widget de Pago?

Si abre el widget con todos los métodos de pago habilitados, no necesita llamar a este método: DEUNA renderiza el selector de métodos de pago (incluidas las tarjetas) y resuelve la disponibilidad internamente.

Solo necesita getWalletsAvailable cuando renderiza su propio botón de Apple Pay fuera del selector y utiliza el Widget de Pago en modo independiente para pasar directamente a ese método de pago. En ese caso, llámelo previamente para decidir si mostrar su botón.

SDK Web

No se requiere configuración adicional: no es necesario incluir manualmente los scripts de Google. El SDK web carga dinámicamente el SDK de JavaScript de Google Pay (pay.js) en el momento en que se llama a initPaymentWidget.

// 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 de Android

En Android, Google Pay se habilita a través de PaymentRequest dentro del WebView utilizado por el SDK de DEUNA. La aplicación host debe aplicar la siguiente configuración:

• Agregue lo siguiente al módulo de su aplicación build.gradle o build.gradle.kts:
  GROOVYCopiar

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

• AndroidManifest.xml Consultas: la aplicación anfitriona debe declarar estas intenciones para permitir la comunicación con Google Pay.
  AndroidManifest.xmlXMLCopiar

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

• Configuración del SDK: esta configuración debe ejecutarse antes de llamar initPaymentWidget método o renderizar un incrustado DeunaWidget.
  KotlinCopiar

  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 Bóveda de Pago

Utilice esta ruta cuando desee representar un botón nativo de Google Pay dentro de su propia interfaz de usuario (sin iframe DEUNA). Común en pagos personalizados/sin cabeza.

SDK Web

Deje que el SDK web resuelva las credenciales de Google Pay desde el backend de DEUNA utilizando su publicApiKey y (opcionalmente) un orderToken.

Para obtener más información, consulte la 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 de Android

Utilice esta ruta cuando desee renderizar una hoja nativa de Google Pay directamente. El SDK verifica la disponibilidad del dispositivo, obtiene las credenciales de Google Pay del backend de DEUNA e inicia la hoja de pago. El resultado es una carga útil de tarjeta tokenizada entregada a su onSuccess callback.

Paso 1 — Verificar la disponibilidad

Llame a getWalletsAvailable() una vez, antes de que el usuario llegue al paso de pago. El SDK comprueba tanto la configuración del comerciante DEUNA como si el dispositivo tiene Google Play Services con una tarjeta guardada.

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
}

Paso 2: inicia Google Pay

Cuando el usuario toca el botón de Google Pay, llama initElements con GOOGLE_PAY como el tipo. El SDK obtiene credenciales nuevas para el pedido y luego inicia la hoja de pago nativa.

// 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 de React Native

Utilice esta ruta cuando desee representar una hoja nativa de Google Pay directamente, sin WebView. El SDK verifica la disponibilidad del dispositivo, obtiene las credenciales de Google Pay del backend de DEUNA e inicia la hoja de pago. El resultado es una carga útil de tarjeta tokenizada entregada a su devolución de llamada de onSuccess.

Requisitos previos:

• El dispositivo debe tener instalados y actualizados los servicios de Google Play.
• El dispositivo debe tener al menos una tarjeta guardada en Google Wallet.
• La cuenta de comerciante debe tener Google Pay habilitado en el panel de DEUNA.

Reaccionar CLI nativa - agregar a android/app/src/main/AndroidManifest.xml:

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

Expo — añadir a app.json and ejecutar 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);
      },
    },
  });
}

Problemas#

Referencia rápida