Commencer

1. Installer the 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 Natif projects

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

Natif prerequisites

• Apple Pay (iOS)

  1. Créer an Apple Pay merchant ID in the Apple Developer portal.
  2. Generate and Télécharger the payment processing certificate required by your gateway.
  3. Activer the Apple Pay capability in Xcode and make sure your provisioning Profil includes it.
  4. Update Info.plist with a usage description if your gateway requires network access to validate payments.

• Google Pay (Android)

  1. Sign in to the Google Pay Business Console.
  2. Configure your payment gateway Paramètres or set up direct tokenization for Test.
  3. If you plan to use production cards, switch environment to PRODUCTION and register test cards for QA.
  4. Confirm that Google Play services are Disponible on the Appareil (required by Google Pay).

Refer to the guides under docs/ in the plugin repository for step-by-step screenshots.

Vérifier availability

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);
}

Request payment (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;

Request payment (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;

Handling responses

• Tokenize the returned payload with your payment processor and confirm the transaction server-side.
• Surface a fallback path (card entry, invoice) if Natif pay is Indisponible or the Utilisateur cancels the sheet.
• Cache the availability result so you do not display the buttons on unsupported Appareils.