Aller au contenu

Premiers pas

GitHub

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 :

Fenêtre de terminal
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Utilisez 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 :

Fenêtre de terminal
bun add @capgo/capacitor-pay
bunx cap sync
import { Pay } from '@capgo/capacitor-pay';
import { Pay } from '@capgo/capacitor-pay';
const result = await Pay.isPayAvailable();
console.log(result);
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.
import { Pay } from '@capgo/capacitor-pay';
await Pay.updateApplePayShipping({
selectionId: 'selection-id-123',
paymentSummaryItems: [
{
label: 'Hello from Capacitor',
amount: 'amount',
},
],
});
  • Écouteurs : supprimez les handles lors du démontage des écrans.
  • Sync native : exécutez bunx cap sync après la mise à jour des plugins.
  • Source de vérité: confiance src/definitions.ts dans le repo GitHub.

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

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.
export interface PayAvailabilityOptions {
apple?: ApplePayAvailabilityOptions;
google?: GooglePayAvailabilityOptions;
}
export interface PayAvailabilityResult {
available: boolean;
platform: PayPlatform;
apple?: ApplePayAvailabilityResult;
google?: GooglePayAvailabilityResult;
}
export interface PayPaymentOptions {
apple?: ApplePayPaymentOptions;
google?: GooglePayPaymentOptions;
}
export type PayPaymentResult = ApplePayRequestPaymentResult | GooglePayRequestPaymentResult;
export interface ApplePayAvailabilityOptions {
/**
* Optional list of payment networks you intend to use.
* Passing networks determines the return value of `canMakePaymentsUsingNetworks`.
*/
supportedNetworks?: ApplePayNetwork[];
}
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;
}
export type PayPlatform = 'ios' | 'android' | 'web';
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;
}
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;
}
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;
}
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;
}
export interface ApplePayRequestPaymentResult {
/**
* Platform that resolved the payment request.
*/
platform: 'ios';
/**
* Apple Pay payment payload.
*/
apple: ApplePayPaymentResult;
}

Cette page est générée à partir du src/definitions.ts. Relancez la synchronisation lorsque l’API public change en amont.

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.