Erste Schritte

1. Plugin installieren

   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. Native Projekte synchronisieren

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

Native Voraussetzungen

• Apple Pay (iOS)

  1. Erstellen Sie eine Apple Pay-Händler-ID im Apple Developer-Portal.
  2. Generieren und laden Sie das von Ihrem Gateway benötigte Zahlungsverarbeitungszertifikat hoch.
  3. Aktivieren Sie die Apple Pay-Funktion in Xcode und stellen Sie sicher, dass Ihr Bereitstellungsprofil diese enthält.
  4. Aktualisieren Sie Info.plist mit einer Verwendungsbeschreibung, wenn Ihr Gateway Netzwerkzugriff zur Validierung von Zahlungen benötigt.

• Google Pay (Android)

  1. Melden Sie sich bei der Google Pay Business Console an.
  2. Konfigurieren Sie Ihre Payment Gateway-Parameter oder richten Sie direkte Tokenisierung für Tests ein.
  3. Wenn Sie Produktionskarten verwenden möchten, wechseln Sie environment zu PRODUCTION und registrieren Sie Testkarten für QA.
  4. Bestätigen Sie, dass Google Play-Dienste auf dem Gerät verfügbar sind (von Google Pay erforderlich).

Weitere schrittweise Screenshots finden Sie in den Anleitungen unter docs/ im Plugin-Repository.

Verfügbarkeit prüfen

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 nicht verfügbar:', availability);
}

Zahlung anfordern (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;

Zahlung anfordern (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;

Antworten verarbeiten

• Tokenisieren Sie die zurückgegebene Payload mit Ihrem Zahlungsverarbeiter und bestätigen Sie die Transaktion serverseitig.
• Bieten Sie einen Fallback-Pfad (Karteneingabe, Rechnung) an, wenn native Zahlung nicht verfügbar ist oder der Benutzer das Sheet abbricht.
• Cachen Sie das Verfügbarkeitsergebnis, damit Sie die Schaltflächen nicht auf nicht unterstützten Geräten anzeigen.