Google Pay via widget

Este guia orienta você na integração Google Pay usando os SKDs DEUNA. Abrange os dois caminhos de integração que o SDK expõe:

1. Pré-requisitos#

Antes de começar, certifique-se de que o seguinte esteja em vigor:

2. O que precisa ser pré-configurado para o Google Pay#

A configuração tem duas partes: credenciais e, para produção, registro de domínio dentro do Google Pay Business Console.

2.1 Credenciais (administradas pela DEUNA)

DEUNA resolve as credenciais do Google Pay na configuração do seu comerciante. Os campos envolvidos são:

A maioria das integrações usará PAYMENT_GATEWAY tokenização com DEUNA como gateway. DIRECT é reservado para comerciantes que descriptografam o token do Google Pay.

O que você precisa fornecer/confirmar no Dashboard DEUNA:

1. Credencial do Google Pay habilitado para seu comerciante.
2. Merchant ID e nome do comerciante.
3. Portal e gateway merchant ID (para PAYMENT_GATEWAY).
4. Redes permitidas e métodos de autenticação (opcional).

2.2 Registro de domínio (somente produção)

O Google Pay exige que todos produção domínio seja registrado no Console Empresarial do Google Pay antes de poder receber pagamentos em tempo real:

• Acessar Google Pay e Wallet Console → Integração → Informações comerciais.
• Registre o(s) domínio(s) que carregarão o Web‑SDK (por exemplo, checkout.mystore.com).
• Envie sua integração para aprovação (são necessárias capturas de tela do fluxo de checkout).

Nenhum arquivo precisa ser hospedado em seu domínio. Os ambientes de teste/sandbox funcionam imediatamente – apenas a produção requer o registro do console.

O SDK muda automaticamente o Google Pay para TEST modo para qualquer env além de "production", para que você possa desenvolver e fazer controle de qualidade sem registro no console.

3. Integrações#

Certifique-se de seguir o guia de primeiros passos para nossos SDKs, dependendo da sua integração específica:

• SDK da Web >= v1.6
• SDK do Android >= 2.11.4
• SDK do iOS >= 2.11.1
• Reagir SDK nativo >= 2.1.0

3.1 Widget de Pagamento

Use este caminho quando quiser que a DEUNA administre toda a experiência de checkout (IU, processamento de pagamento e confirmação).

Quando você precisa de getWalletsAvailable no widget de pagamento?

Se você abrir o widget com todos os métodos de pagamento habilitados, não será necessário chamar esse método — DEUNA renderiza o seletor de método de pagamento (incluindo botões de carteira) e resolve a disponibilidade internamente.

Você só precisa getWalletsAvailable quando você renderiza seu próprio botão Apple Pay fora do seletor e usa o widget de pagamento no modo autônomo para ir diretamente para esse método de pagamento. Nesse caso, ligue com antecedência para decidir se deseja mostrar seu botão.

SDK Web

Nenhuma configuração extra necessária: você não precisa incluir manualmente os scripts do Google. O SDK da Web carrega dinamicamente o SDK JavaScript do Google Pay (pay.js) no momento em que initPaymentWidget é chamado.

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

No Android, o Google Pay é habilitado via PaymentRequest no WebView usado pelo DEUNA SDK. O aplicativo host deve aplicar a seguinte configuração:

• Adicione o seguinte ao módulo do seu aplicativo build.gradle ou build.gradle.kts:
  GROOVYCopiar

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

• AndroidManifest.xml Consultas: o app host precisa declarar essas intenções para permitir a comunicação com o 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>

• Configuração do SDK: Esta configuração deve ser executada antes de chamar initPaymentWidget método ou renderizar um incorporado 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 Cofre de Pagamento

Use este caminho quando quiser renderizar um botão nativo do Google Pay dentro de sua própria IU (sem iframe DEUNA). Comum em checkouts personalizados/sem cabeça.

SDK Web

Deixe o SDK da Web resolver as credenciais do Google Pay do back-end da DEUNA usando seu publicApiKey e (opcionalmente) um orderToken.

Para mais informações consulte o 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

Use este caminho quando quiser renderizar diretamente uma planilha nativa do Google Pay. O SDK verifica a disponibilidade do dispositivo, busca as credenciais do Google Pay no back-end da DEUNA e inicia a planilha de pagamento. O resultado é uma carga de cartão tokenizada entregue ao seu onSuccess callback.

Passo 1 – Verifique a disponibilidade

Chame getWalletsAvailable() uma vez, antes que o usuário chegue à etapa de pagamento. O SDK verifica a configuração do comerciante DEUNA e se o dispositivo possui Google Play Services com um cartão salvo.

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 — Inicie o Google Pay

Quando o usuário tocar no botão do Google Pay, ligue initElements com GOOGLE_PAY como o tipo. O SDK busca novas credenciais para o pedido e, em seguida, inicia a planilha de pagamento 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 React Native

Use este caminho quando quiser renderizar uma planilha nativa do Google Pay diretamente, sem um WebView. O SDK verifica a disponibilidade do dispositivo, busca as credenciais do Google Pay no back-end da DEUNA e inicia a planilha de pagamento. O resultado é uma carga de cartão tokenizada entregue ao retorno de chamada onSuccess.

Pré-requisitos:

• O dispositivo deve ter o Google Play Services instalado e atualizado.
• O dispositivo deve ter pelo menos um cartão salvo na Google Wallet.
• A conta do comerciante deve ter o Google Pay ativado no painel DEUNA.

Reagir CLI nativo - adicionar a android/app/src/main/AndroidManifest.xml:

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

Expo — adicionar ao app.json e execute o pré- compilação do expo do npx:

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

Pegadinhas#

Referência rápida