Google Pay via un widget

Ce guide vous guide dans l'intégration Google Payer en utilisant les SKD DEUNA. Il couvre les deux chemins d'intégration exposés par le SDK :

1. Conditions préalables#

Avant de commencer, assurez-vous que les éléments suivants sont en place :

2. Ce qui doit être préconfiguré pour Google Pay#

La configuration comporte deux parties : informations d'identification et, pour la production, enregistrement de domaine dans la console Google Pay Business.

2.1 Informations d'identification (gérées par DEUNA)

DEUNA résout les informations d'identification Google Pay à partir de la configuration de votre marchand. Les domaines concernés sont :

La plupart des intégrations utiliseront PAYMENT_GATEWAY tokenisation avec DEUNA comme passerelle. DIRECT est réservé aux commerçants qui décryptent eux-mêmes le token Google Pay.

Ce que vous devez fournir/confirmer dans le tableau de bord DEUNA :

1. Identifiant Google Pay activé pour votre commerçant.
2. Merchant ID et nom du commerçant.
3. Passerelle et gateway merchant ID (pour PAYMENT_GATEWAY).
4. Réseaux autorisés et méthodes d'authentification (facultatif).

2.2 Enregistrement de domaine (production uniquement)

Google Pay exige que chaque production domaine soit enregistré dans le Console professionnelle Google Pay avant de pouvoir accepter des paiements en direct :

• Aller à Console Google Pay & Wallet → Intégration → Informations commerciales.
• Enregistrez le(s) domaine(s) qui chargeront le Web‑SDK (par ex. checkout.mystore.com).
• Soumettez votre intégration pour approbation (des captures d'écran du flux de paiement sont requises).

Aucun fichier ne doit être hébergé sur votre domaine. Les environnements de test/sandbox fonctionnent immédiatement : seule la production nécessite l'enregistrement de la console.

Le SDK bascule automatiquement Google Pay vers TEST mode pour tout env autre que "production", afin que vous puissiez développer et assurer le contrôle qualité sans inscription sur la console.

3. Intégrations#

Assurez-vous de suivre le guide de démarrage pour nos SDK en fonction de votre intégration spécifique :

• SDK Web >= v1.6
• SDK Android >= 2.11.4
• SDK iOS >= 2.11.1
• SDK natif React >= 2.1.0

3.1 Widget de paiement

Utilisez ce chemin lorsque vous souhaitez que DEUNA gère l’expérience de paiement complète (interface utilisateur, traitement des paiements et confirmation).

Quand avez-vous besoin de getWalletsAvailable dans le widget de paiement ?

Si vous ouvrez le widget avec tous les modes de paiement activés, vous n'avez pas besoin d'appeler cette méthode : DEUNA affiche le sélecteur de mode de paiement (y compris les boutons du portefeuille) et résout la disponibilité en interne.

Vous avez seulement besoin getWalletsAvailable lorsque vous affichez votre propre bouton Apple Pay en dehors du sélecteur et que vous utilisez le widget de paiement en mode autonome pour accéder directement à ce mode de paiement. Dans ce cas, appelez-le au préalable pour décider d'afficher ou non votre bouton.

SDK Web

Aucune configuration supplémentaire requise : vous n'avez pas besoin d'inclure manuellement les scripts de Google. Le SDK Web charge dynamiquement le SDK JavaScript Google Pay (pay.js) au moment où initPaymentWidget est appelé.

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

Sous Android, Google Pay est activé via PaymentRequest dans le WebView utilisé par le SDK DEUNA. L'application hôte doit appliquer la configuration suivante :

• Ajoutez ce qui suit au module de votre application build.gradle ou build.gradle.kts:
  GROOVYCopier

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

• AndroidManifest.xml Requêtes : l'application hôte doit déclarer ces intentions pour permettre la communication avec Google Pay.
  AndroidManifest.xmlXMLCopier

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

• Configuration du SDK : cette configuration doit être exécutée avant d'appeler initPaymentWidget méthode ou le rendu d'un élément intégré DeunaWidget.
  KotlinCopier

  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 Coffre-fort de paiement

Utilisez ce chemin lorsque vous souhaitez afficher un bouton Google Pay natif dans votre propre interface utilisateur (pas d'iframe DEUNA). Courant dans les caisses personnalisées/sans tête.

SDK Web

Laissez le SDK Web résoudre les informations d'identification Google Pay à partir du backend DEUNA à l'aide de votre publicApiKey et (éventuellement) un orderToken.

Pour plus d'informations, consultez le 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

Utilisez ce chemin lorsque vous souhaitez afficher directement une feuille Google Pay native. Le SDK vérifie la disponibilité de l'appareil, récupère les informations d'identification Google Pay à partir du backend DEUNA et lance la feuille de paiement. Le résultat est une charge utile de carte tokenisée livrée à votre onSuccess callback.

Étape 1 — Vérifier la disponibilité

Appelez getWalletsAvailable() une fois, avant que l'utilisateur n'atteigne l'étape de paiement. Le SDK vérifie à la fois la configuration du commerçant DEUNA et si l'appareil dispose des services Google Play avec une carte enregistrée.

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
}

Étape 2 – Lancez Google Pay

Lorsque l'utilisateur appuie sur votre bouton Google Pay, appelez initElements et GOOGLE_PAY comme le type. Le SDK récupère de nouvelles informations d'identification pour la commande, puis lance la feuille de paiement native.

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

Utilisez ce chemin lorsque vous souhaitez afficher directement une feuille de paie Google native, sans WebView. Le SDK vérifie la disponibilité de l'appareil, récupère les informations d'identification Google Pay à partir du backend DEUNA et lance la feuille de paiement. Le résultat est une charge utile de carte tokenisée envoyée à votre rappel onSuccess.

Prérequis :

• L'appareil doit disposer des services Google Play installés et à jour.
• L'appareil doit avoir au moins une carte enregistrée dans Google Wallet.
• Le compte marchand doit avoir Google Pay activé dans le tableau de bord DEUNA.

Réagir à la CLI native — ajouter à android/app/src/main/AndroidManifest.xml:

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

Expo — ajouter à app.json et exécuter npx expo prébuild:

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

Des pièges#

Référence rapide