ApplePay
Apple Pay confirme un PaymentIntent en une seule présentation.
https://stripe.com/docs/apple-pay
Prise en charge des plateformes
| Plateforme | Apple Pay |
|---|---|
| iOS | STPApplePayContext natif |
| Android | Non implémenté |
| Web | Payment Request Button (stripe-pwa-elements) |
updateApplePaySheet et les mises à jour du contact de livraison fonctionnent uniquement sur iOS. Sur le Web, updateApplePaySheet lève une erreur indiquant que la méthode n’est pas implémentée. Android rejette isApplePayAvailable, createApplePay et presentApplePay.
Préparer les paramètres
- Enregistrer un Apple Merchant ID
- Créer un certificat Apple Pay
- Activer Apple Pay dans Xcode
https://stripe.com/docs/apple-pay#merchantid
Le merchantIdentifier de createApplePay doit être l’identifiant marchand enregistré dans le compte Apple Developer et dans Xcode. Ne passez pas merchantDisplayName ici ; cette option appartient à PaymentSheet et PaymentFlow.
1. isApplePayAvailable
Vérifiez l’appareil avant de créer une demande. La Promise est résolue si Apple Pay est disponible et rejetée sinon.
import { ApplePayEventsEnum, Stripe } from '@capacitor-community/stripe';
try {
await Stripe.isApplePayAvailable();
} catch {
return;
}
method isApplePayAvailable()
Se résout lorsqu’Apple Pay est disponible et est rejeté lorsqu’il ne l’est pas.
Apple Pay est pris en charge sur iOS et les navigateurs Web compatibles, mais pas sur Android.
isApplePayAvailable() => Promise<void>
2. createApplePay
Récupérez un secret client de PaymentIntent depuis votre backend. Remplacez /your-intent-endpoint dans l’exemple par l’URL du backend présentée dans Intégration serveur. Passez ensuite paymentIntentClientSecret, paymentSummaryItems, merchantIdentifier, countryCode et currency.
// Remplacez `/your-intent-endpoint` par votre backend décrit dans Intégration serveur.
const response = await fetch('/your-intent-endpoint', {
method: 'POST',
});
if (!response.ok) {
throw new Error(`Intent request failed: ${response.status}`);
}
const { paymentIntent } = (await response.json()) as {
paymentIntent: string;
};
await Stripe.createApplePay({
paymentIntentClientSecret: paymentIntent,
paymentSummaryItems: [{
label: 'Product Name',
amount: 1099.00
}],
merchantIdentifier: 'merchant.com.getcapacitor.stripe',
countryCode: 'US',
currency: 'USD',
});
method createApplePay(...)
Crée une demande Apple Pay. Appelez cette méthode avant presentApplePay().
createApplePay(options: CreateApplePayOption) => Promise<void>
interface CreateApplePayOption
| Propriété | Type | Description | Depuis |
|---|---|---|---|
paymentIntentClientSecret |
string |
Secret client du PaymentIntent à confirmer avec Apple Pay. | 3.1.0 |
paymentSummaryItems |
PaymentSummaryItem[] |
Lignes affichées dans la feuille Apple Pay. | 3.1.0 |
merchantIdentifier |
string |
Identifiant de commerçant Apple configuré pour l’application. | 3.1.0 |
countryCode |
string |
Code de pays ISO 3166-1 à deux lettres pour la demande de paiement. | 3.1.0 |
currency |
string |
Code de devise ISO 4217 à trois lettres pour la demande de paiement. | 3.1.0 |
requiredShippingContactFields |
('postalAddress' | 'phoneNumber' | 'emailAddress' | 'name')[] |
Champs du contact de livraison qu’Apple Pay doit recueillir. iOS uniquement. | 4.1.0 |
allowedCountries |
string[] |
Codes de pays à deux lettres acceptés pour la livraison. iOS uniquement. | 5.4.3 |
allowedCountriesErrorDescription |
string |
Message affiché lorsque le pays de livraison choisi n’est pas autorisé. iOS uniquement. | 5.4.3 |
requiredShippingContactFields demande à Apple Pay l’adresse postale, le téléphone, l’e-mail ou le nom. allowedCountries refuse les pays de livraison qui ne figurent pas dans la liste.
3. presentApplePay
const result = await Stripe.presentApplePay();
if (result.paymentResult === ApplePayEventsEnum.Completed) {
// Mettez uniquement l’interface à jour. Confirmez l’Intent par webhook avant d’exécuter la commande.
}
method presentApplePay()
Présente la demande Apple Pay créée par createApplePay().
presentApplePay() => Promise<{ paymentResult: ApplePayResultInterface; }>
type alias ApplePayResultInterface
ApplePayEventsEnum.Completed | ApplePayEventsEnum.Canceled | ApplePayEventsEnum.Failed | ApplePayEventsEnum.DidSelectShippingContact | ApplePayEventsEnum.DidCreatePaymentMethod
Traitez Canceled comme une annulation et Failed comme une erreur.
4. addListener
Enregistrez les écouteurs au démarrage de l’application. Consultez Écouteurs d’événements.
Stripe.addListener(ApplePayEventsEnum.Completed, () => {
console.log('ApplePayEventsEnum.Completed');
});
enum ApplePayEventsEnum
| Membre | Valeur |
|---|---|
Loaded |
'applePayLoaded' |
FailedToLoad |
'applePayFailedToLoad' |
Completed |
'applePayCompleted' |
Canceled |
'applePayCanceled' |
Failed |
'applePayFailed' |
DidSelectShippingContact |
'applePayDidSelectShippingContact' |
DidCreatePaymentMethod |
'applePayDidCreatePaymentMethod' |
5. updateApplePaySheet
Sur iOS, DidSelectShippingContact contient contact et updateId. Recalculez les totaux et appelez updateApplePaySheet avec cet updateId. Si JavaScript ne répond pas, la feuille native revient aux éléments de récapitulatif initiaux au bout de 25 secondes.
Stripe.addListener(ApplePayEventsEnum.DidSelectShippingContact, async (data) => {
await Stripe.updateApplePaySheet({
updateId: data.updateId,
paymentSummaryItems: [
{ label: 'Product Name', amount: 1099.00 },
{ label: 'Shipping', amount: 500.00 },
{ label: 'Total', amount: 1599.00 },
],
});
});
method updateApplePaySheet(...)
Met à jour la feuille Apple Pay native après un callback de contact de livraison.
iOS uniquement ; cette méthode n’est pas prise en charge sur le Web.
updateApplePaySheet(options: UpdateApplePaySheetOption) => Promise<void>
interface DidSelectShippingContact
Données du contact de livraison Apple Pay.
| Propriété | Type | Description | Depuis |
|---|---|---|---|
contact |
ShippingContact |
Contact de livraison sélectionné dans Apple Pay. | 4.1.0 |
updateId |
string |
Identifiant transmis à updateApplePaySheet() pour ce callback. |
4.1.0 |
interface PaymentSummaryItem
| Propriété | Type | Description | Depuis |
|---|---|---|---|
label |
string |
Libellé de la ligne dans la feuille Apple Pay. | 3.1.0 |
amount |
number |
Montant décimal dans l’unité principale de la devise, par exemple 10.99. |
3.1.0 |
DidCreatePaymentMethod contient le contact de livraison après la création du moyen de paiement par Apple. Apple ne renvoie l’adresse complète qu’après un paiement réussi.
interface DidCreatePaymentMethod
| Propriété | Type | Description | Depuis |
|---|---|---|---|
contact |
ShippingContact |
Contact associé au moyen de paiement Apple Pay. | 4.1.0 |
interface ShippingContact
| Propriété | Type | Description | Depuis |
|---|---|---|---|
givenName |
string |
Prénom du contact. Apple Pay uniquement. | 4.1.0 |
familyName |
string |
Nom de famille du contact. Apple Pay uniquement. | 4.1.0 |
middleName |
string |
Deuxième prénom du contact. Apple Pay uniquement. | 4.1.0 |
namePrefix |
string |
Préfixe du nom du contact. Apple Pay uniquement. | 4.1.0 |
nameSuffix |
string |
Suffixe du nom du contact. Apple Pay uniquement. | 4.1.0 |
nameFormatted |
string |
Nom complet formaté du contact. Apple Pay uniquement. | 4.1.0 |
phoneNumber |
string |
Numéro de téléphone du contact. Apple Pay uniquement. | 4.1.0 |
nickname |
string |
Surnom du contact. Apple Pay uniquement. | 4.1.0 |
street |
string |
Rue dans l’adresse postale du contact. Apple Pay uniquement. | 4.1.0 |
city |
string |
Ville dans l’adresse postale du contact. Apple Pay uniquement. | 4.1.0 |
state |
string |
État ou province dans l’adresse postale du contact. Apple Pay uniquement. | 4.1.0 |
postalCode |
string |
Code postal dans l’adresse du contact. Apple Pay uniquement. | 4.1.0 |
country |
string |
Nom du pays ou de la région dans l’adresse du contact. Apple Pay uniquement. | 4.1.0 |
isoCountryCode |
string |
Code de pays ISO dans l’adresse du contact. Apple Pay uniquement. | 4.1.0 |
subAdministrativeArea |
string |
Subdivision administrative dans l’adresse du contact. Apple Pay uniquement. | 4.1.0 |
subLocality |
string |
Sous-localité dans l’adresse du contact. Apple Pay uniquement. | 4.1.0 |
Référence
import { ApplePayEventsEnum, Stripe } from '@capacitor-community/stripe';
(async () => {
try {
await Stripe.isApplePayAvailable();
} catch {
return;
}
await Stripe.addListener(ApplePayEventsEnum.Completed, () => {
console.log('ApplePayEventsEnum.Completed');
});
// Replace `/your-intent-endpoint` with your backend from Server Integration.
const response = await fetch('/your-intent-endpoint', {
method: 'POST',
});
if (!response.ok) {
throw new Error(`Intent request failed: ${response.status}`);
}
const { paymentIntent } = (await response.json()) as {
paymentIntent: string;
};
// Prepare Apple Pay
await Stripe.createApplePay({
paymentIntentClientSecret: paymentIntent,
paymentSummaryItems: [{
label: 'Product Name',
amount: 1099.00
}],
merchantIdentifier: 'merchant.com.getcapacitor.stripe',
countryCode: 'US',
currency: 'USD',
});
// Present Apple Pay
const result = await Stripe.presentApplePay();
if (result.paymentResult === ApplePayEventsEnum.Completed) {
// Update UI only. Fulfill orders from a verified server webhook.
}
})();