Commencer

1. Installez le plugin

   npm

   npm i @capgo/capacitor-pay

   pnpm

   pnpm add @capgo/capacitor-pay

   yarn

   yarn add @capgo/capacitor-pay

   bun

   bun add @capgo/capacitor-pay

2. Synchroniser les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

Prérequis natifs

• Apple Paie (iOS)

  1. Créez un identifiant de marchand Apple Pay dans le portail des développeurs Apple.
  2. Générez et téléchargez le certificat de traitement des paiements requis par votre passerelle.
  3. Activez la fonctionnalité Apple Pay dans Xcode et assurez-vous que votre profil d’approvisionnement l’inclut.
  4. Mettez à jour Info.plist avec une description d’utilisation si votre passerelle nécessite un accès au réseau pour valider les paiements.

• Google Salaire (Android)

  1. Connectez-vous à la Google Pay Business Console.
  2. Configurez les paramètres de votre passerelle de paiement ou configurez la tokenisation directe pour les tests.
  3. Si vous prévoyez d’utiliser des cartes de production, remplacez environment par PRODUCTION et enregistrez les cartes de test pour le contrôle qualité.
  4. Confirmez que les services Google Play sont disponibles sur l’appareil (requis par Google Pay).

Reportez-vous aux guides sous docs/ dans le référentiel du plugin pour des captures d’écran étape par étape.

Vérifier la disponibilité

import { Pay } from '@capgo/capacitor-pay';

const availability = await Pay.isPayAvailable({
  apple: { supportedNetworks: ['visa', 'masterCard', 'amex'] },
  google: {
    isReadyToPayRequest: {
      allowedPaymentMethods: [
        {
          type: 'CARD',
          parameters: {
            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
            allowedCardNetworks: ['VISA', 'MASTERCARD'],
          },
        },
      ],
    },
  },
});

if (!availability.available) {
  console.warn('Native pay unavailable:', availability);
}

Demander un paiement (Apple Pay)

const appleResult = await Pay.requestPayment({
  apple: {
    merchantIdentifier: 'merchant.com.example.app',
    countryCode: 'US',
    currencyCode: 'USD',
    supportedNetworks: ['visa', 'masterCard'],
    paymentSummaryItems: [
      { label: 'Starter Plan', amount: '9.99' },
      { label: 'Capgo Store', amount: '9.99' },
    ],
    requiredShippingContactFields: ['name', 'emailAddress'],
  },
});

const token = appleResult.apple?.paymentData;

Demander un paiement (Google Pay)

const googleResult = await Pay.requestPayment({
  google: {
    environment: 'test',
    paymentDataRequest: {
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: [
        {
          type: 'CARD',
          parameters: {
            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
            allowedCardNetworks: ['VISA', 'MASTERCARD'],
            billingAddressRequired: true,
            billingAddressParameters: { format: 'FULL' },
          },
          tokenizationSpecification: {
            type: 'PAYMENT_GATEWAY',
            parameters: {
              gateway: 'example',
              gatewayMerchantId: 'exampleMerchantId',
            },
          },
        },
      ],
      merchantInfo: {
        merchantName: 'Capgo Store',
      },
      transactionInfo: {
        totalPriceStatus: 'FINAL',
        totalPrice: '9.99',
        currencyCode: 'USD',
        countryCode: 'US',
      },
    },
  },
});

const paymentData = googleResult.google?.paymentData;

Gestion des réponses

• Tokenisez la charge utile renvoyée avec votre processeur de paiement et confirmez la transaction côté serveur.
• Faites apparaître un chemin de repli (saisie de carte, facture) si la paie native n’est pas disponible ou si l’utilisateur annule la feuille.
• Mettez en cache le résultat de disponibilité afin de ne pas afficher les boutons sur les appareils non pris en charge.