快速入门
复制包含安装步骤和该插件完整 Markdown 指南的配置 prompt。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-pay`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/pay/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
安装
“安装”章节你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中:
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins然后使用以下 prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-pay` plugin in my project.如果你更想手动设置,请运行以下命令安装插件,并按照下方各平台的说明操作:
bun add @capgo/capacitor-paybunx cap sync导入
“导入”章节import { Pay } from '@capgo/capacitor-pay';快速入门
章节标题为“快速入门”import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.isPayAvailable();console.log(result);示例:requestPayment
标题为“示例:requestPayment”的章节import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.requestPayment({ apple: { merchantIdentifier: 'merchant-identifier-123', countryCode: 'US', currencyCode: 'USD', paymentSummaryItems: [ { label: 'Hello from Capacitor', amount: 'amount', }, ], supportedNetworks: ['AmEx'], },});// The result holds sensitive values: use it without logging it.示例:updateApplePayShipping
标题为“示例:updateApplePayShipping”的章节import { Pay } from '@capgo/capacitor-pay';
await Pay.updateApplePayShipping({ selectionId: 'selection-id-123', paymentSummaryItems: [ { label: 'Hello from Capacitor', amount: 'amount', }, ],});常见坑点
章节标题为“常见陷阱”- 监听器: 在页面卸载时移除句柄。
- 原生同步:运行
bunx cap sync在插件升级后。 - 唯一可信来源:信任
src/definitions.ts在 GitHub 仓库中。
API 概览
章节标题:“API 概览”isPayAvailable
标题为 “isPayAvailable” 的章节检查当前平台是否支持原生支付。 在 iOS 上,此方法评估 Apple Pay;在 Android 上,评估 Google Pay。
import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.isPayAvailable();console.log(result);requestPayment
标题为 “requestPayment” 的章节为当前平台展示原生支付界面。 在 iOS 上提供 Apple Pay 配置,在 Android 上提供 Google Pay 配置。
该 Promise 是两个平台上的完成路径。
import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.requestPayment({ apple: { merchantIdentifier: 'merchant-identifier-123', countryCode: 'US', currencyCode: 'USD', paymentSummaryItems: [ { label: 'Hello from Capacitor', amount: 'amount', }, ], supportedNetworks: ['AmEx'], },});// The result holds sensitive values: use it without logging it.类型参考
“类型参考” 章节PayAvailabilityOptions
“PayAvailabilityOptions” 章节export interface PayAvailabilityOptions { apple?: ApplePayAvailabilityOptions; google?: GooglePayAvailabilityOptions;}PayAvailabilityResult
“PayAvailabilityResult” 章节export interface PayAvailabilityResult { available: boolean; platform: PayPlatform; apple?: ApplePayAvailabilityResult; google?: GooglePayAvailabilityResult;}PayPaymentOptions
“PayPaymentOptions” 章节export interface PayPaymentOptions { apple?: ApplePayPaymentOptions; google?: GooglePayPaymentOptions;}PayPaymentResult
“PayPaymentResult” 章节export type PayPaymentResult = ApplePayRequestPaymentResult | GooglePayRequestPaymentResult;ApplePayAvailabilityOptions
“ApplePayAvailabilityOptions” 章节export interface ApplePayAvailabilityOptions { /** * Optional list of payment networks you intend to use. * Passing networks determines the return value of `canMakePaymentsUsingNetworks`. */ supportedNetworks?: ApplePayNetwork[];}GooglePayAvailabilityOptions
“GooglePayAvailabilityOptions” 章节export interface GooglePayAvailabilityOptions { /** * Environment used to construct the Google Payments client. Defaults to `'test'`. */ environment?: GooglePayEnvironment; /** * Raw `IsReadyToPayRequest` JSON as defined by the Google Pay API. * Supply the card networks and auth methods you intend to support at runtime. * * @see https://developers.google.com/pay/api/android/reference/request-objects#IsReadyToPayRequest */ isReadyToPayRequest?: GooglePayIsReadyToPayRequest;}PayPlatform
“PayPlatform” 章节export type PayPlatform = 'ios' | 'android' | 'web';ApplePayAvailabilityResult
“ApplePayAvailabilityResult” 章节export interface ApplePayAvailabilityResult { /** * Indicates whether the device can make Apple Pay payments in general. */ canMakePayments: boolean; /** * Indicates whether the device can make Apple Pay payments with the supplied networks. */ canMakePaymentsUsingNetworks: boolean;}GooglePayAvailabilityResult
“GooglePayAvailabilityResult” 章节export interface GooglePayAvailabilityResult { /** * Whether the user is able to provide payment information through the Google Pay payment sheet. */ isReady: boolean; /** * The current user's ability to pay with one or more of the payment methods specified in `IsReadyToPayRequest.allowedPaymentMethods`. * * This property only exists if `IsReadyToPayRequest.existingPaymentMethodRequired` was set to `true`. The property value will always be `true` if the request is configured for a test environment. */ paymentMethodPresent: boolean | undefined;}ApplePayPaymentOptions
“ApplePayPaymentOptions” 章节export interface ApplePayPaymentOptions { /** * Merchant identifier created in the Apple Developer portal. */ merchantIdentifier: string; /** * Two-letter ISO 3166 country code. */ countryCode: string; /** * Three-letter ISO 4217 currency code. */ currencyCode: string; /** * Payment summary items displayed in the Apple Pay sheet. */ paymentSummaryItems: ApplePaySummaryItem[]; /** * Card networks to support. */ supportedNetworks: ApplePayNetwork[]; /** * Merchant payment capabilities. Defaults to ['3DS'] when omitted. */ merchantCapabilities?: ApplePayMerchantCapability[]; /** * Contact fields that must be supplied for shipping. */ requiredShippingContactFields?: ApplePayContactField[]; /** * Contact fields that must be supplied for billing. */ requiredBillingContactFields?: ApplePayContactField[]; /** * Controls the shipping flow presented to the user. */ shippingType?: ApplePayShippingType; /** * Optional ISO 3166 country codes where the merchant is supported. */ supportedCountries?: string[]; /** * Optional opaque application data passed back in the payment token. */ applicationData?: string;
/** * Recurring payment configuration (iOS 16+). */ recurringPaymentRequest?: ApplePayRecurringPaymentRequest;}GooglePayPaymentOptions
“GooglePayPaymentOptions” 章节export interface GooglePayPaymentOptions { /** * Environment used to construct the Google Payments client. Defaults to `'test'`. */ environment?: GooglePayEnvironment; /** * Raw `PaymentDataRequest` JSON as defined by the Google Pay API. * Provide transaction details, merchant info, and tokenization parameters. * * @see https://developers.google.com/pay/api/android/reference/request-objects#PaymentDataRequest */ paymentDataRequest: GooglePayPaymentDataRequest;}ApplePayRequestPaymentResult
“ApplePayRequestPaymentResult”章节export interface ApplePayRequestPaymentResult { /** * Platform that resolved the payment request. */ platform: 'ios'; /** * Apple Pay payment payload. */ apple: ApplePayPaymentResult;}单一事实来源
标题为“单一事实来源”的部分本页面由插件的 src/definitions.ts生成。当上游的公共 API 发生变化时,请重新运行 sync。
从入门指南继续
“从入门指南继续”章节如果你正在使用 快速入门 要规划 dashboard 和 API 操作,请将其连接到 使用 @capgo/capacitor-pay 在“使用 @capgo/capacitor-pay”中的原生功能 API 概览 关于 API Overview 中的实现细节, 简介 关于 Introduction 中的实现细节, API 密钥 有关 API Keys 的实现细节,以及 设备 有关 Devices 的实现细节。