入门

1. 安装插件

   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. 同步原生项目

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

本机先决条件

• Apple 付款 (iOS)

  1. 在 Apple 开发者门户中创建 Apple 支付商户 ID。
  2. 生成并上传网关所需的支付处理证书。
  3. 在 Xcode 中启用 Apple Pay 功能，并确保您的配置文件包含它。
  4. 如果您的网关需要网络访问来验证付款，请使用使用说明更新 Info.plist。

• Google 支付 (Android)

  1. 登录 Google 支付业务控制台。
  2. 配置您的支付网关参数或设置直接标记化以进行测试。
  3. 如果您计划使用生产卡，请将 environment 切换为 PRODUCTION 并注册用于 QA 的测试卡。
  4. 确认设备上可以使用 Google Play 服务（Google Pay 需要）。

请参阅插件存储库中 docs/ 下的指南以获取分步屏幕截图。

检查可用性

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

请求付款（Apple 付款）

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;

请求付款（Google 付款）

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;

处理响应

• 使用您的支付处理器对返回的有效负载进行标记，并在服务器端确认交易。
• 如果本地支付不可用或用户取消表单，则显示后备路径（卡输入、发票）。
• 缓存可用性结果，以便您不会在不受支持的设备上显示按钮。