Premiers pas
Copiez un prompt de configuration avec les étapes d'installation et le guide markdown complet pour ce plugin.
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.
Installer
Section intitulée « Installation »Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsUtilisez ensuite le prompt suivant :
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-pay` plugin in my project.Si vous préférez la configuration manuelle, installez le plugin avec les commandes suivantes, puis suivez les instructions spécifiques à chaque plateforme ci-dessous :
bun add @capgo/capacitor-paybunx cap syncImporter
Section intitulée « Import »import { Pay } from '@capgo/capacitor-pay';Démarrage rapide
Section intitulée « Démarrage rapide »import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.isPayAvailable();console.log(result);Exemple : requestPayment
Section intitulée « Exemple : 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.Exemple : updateApplePayShipping
Section intitulée « Exemple : updateApplePayShipping »import { Pay } from '@capgo/capacitor-pay';
await Pay.updateApplePayShipping({ selectionId: 'selection-id-123', paymentSummaryItems: [ { label: 'Hello from Capacitor', amount: 'amount', }, ],});Erreurs courantes
Section intitulée « Pièges courants »- Écouteurs : supprimez les handles lors du démontage des écrans.
- Sync native : exécutez
bunx cap syncaprès la mise à jour des plugins. - Source de vérité: confiance
src/definitions.tsdans le repo GitHub.
Aperçu de API
Section intitulée « Vue d'ensemble de API »isPayAvailable
Section intitulée « isPayAvailable »Vérifie si le paiement natif est disponible sur la plateforme actuelle. Sur iOS, cela évalue Apple Pay, et sur Android, cela évalue Google Pay.
import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.isPayAvailable();console.log(result);requestPayment
Section intitulée « requestPayment »Affiche la feuille de paiement native de la plateforme actuelle. Fournissez la configuration Apple Pay sur iOS et la configuration Google Pay sur Android.
Cette promesse constitue le chemin de complétion sur les deux plateformes.
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.Référence de type
Section intitulée « Référence de type »PayAvailabilityOptions
Section intitulée « PayAvailabilityOptions »export interface PayAvailabilityOptions { apple?: ApplePayAvailabilityOptions; google?: GooglePayAvailabilityOptions;}PayAvailabilityResult
Section intitulée « PayAvailabilityResult »export interface PayAvailabilityResult { available: boolean; platform: PayPlatform; apple?: ApplePayAvailabilityResult; google?: GooglePayAvailabilityResult;}PayPaymentOptions
Section intitulée « PayPaymentOptions »export interface PayPaymentOptions { apple?: ApplePayPaymentOptions; google?: GooglePayPaymentOptions;}PayPaymentResult
Section intitulée « PayPaymentResult »export type PayPaymentResult = ApplePayRequestPaymentResult | GooglePayRequestPaymentResult;ApplePayAvailabilityOptions
Section intitulée « ApplePayAvailabilityOptions »export interface ApplePayAvailabilityOptions { /** * Optional list of payment networks you intend to use. * Passing networks determines the return value of `canMakePaymentsUsingNetworks`. */ supportedNetworks?: ApplePayNetwork[];}GooglePayAvailabilityOptions
Section intitulée « 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
Section intitulée « PayPlatform »export type PayPlatform = 'ios' | 'android' | 'web';ApplePayAvailabilityResult
Section intitulée « 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
Section intitulée « 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
Section intitulée « 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
Section intitulée « 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
Section intitulée « ApplePayRequestPaymentResult »export interface ApplePayRequestPaymentResult { /** * Platform that resolved the payment request. */ platform: 'ios'; /** * Apple Pay payment payload. */ apple: ApplePayPaymentResult;}Source de vérité
Section intitulée « Source de vérité »Cette page est générée à partir du src/definitions.ts. Relancez la synchronisation lorsque l’API public change en amont.
Continuer depuis Getting Started
Section intitulée « Aller plus loin après Getting Started »Si vous utilisez Premiers pas pour planifier les opérations du dashboard et de API, connectez-l’à Utiliser @capgo/capacitor-pay pour la capacité native dans l'utilisation de @capgo/capacitor-pay, Aperçu de API pour les détails d'implémentation dans l'aperçu de API, Introduction pour les détails d'implémentation dans l'Introduction, Clés API pour les détails d'implémentation dans les clés API, et Appareils pour le détail d’implémentation dans Devices.