Langsung ke konten
Capgo

Getting Started

Konten ini belum tersedia dalam bahasa Anda.

  1. Install the plugin

    Terminal window
    npm i @capgo/capacitor-pay

  2. Sync native projects

    Terminal window
    npx cap sync

Native prerequisites

  • Apple Pay (iOS)

    1. Create an Apple Pay merchant ID in the Apple Developer portal.
    2. Generate and upload the payment processing certificate required by your gateway.
    3. Enable the Apple Pay capability in Xcode and make sure your provisioning profile 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 parameters or set up direct tokenization for testing.
    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 available on the device (required by Google Pay).

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

Check 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 native pay is unavailable or the user cancels the sheet.
  • Cache the availability result so you do not display the buttons on unsupported devices.