Contenus
Vue d'ensemble
Essayez une transaction test Apple Pay ci-dessous. Votre carte ne sera pas
accusé.
Vous pouvez utiliser cette page pour apprendre à activer Apple Pay sur le Web à l'aide d'Apple Pay JS. Chaque bouton est préconfiguré avec une valeur par défaut
valeurs,
et si vous souhaitez explorer davantage, vous pouvez modifier les valeurs des blocs de code
page pour personnaliser différentes expériences de paiement. Une transcription des réponses du serveur est
affiché au bas de la page après chaque transaction pour le contexte.
Exigences
Cette démo utilise Apple Pay JS version 3 et requiert les éléments suivants:
- Périphériques iOS sous iOS 11 ou version ultérieure
- Safari 11 sur les appareils Mac exécutant macOS 10.13 ou une version ultérieure
Commencer
Ce guide suppose que vous avez déjà configuré votre environnement pour traiter les transactions Apple Pay, et
sont
familiariser avec les meilleures pratiques Apple Pay. Avant de commencer votre intégration, nous vous recommandons
révision Obtenir
Avec Apple Pay et les directives d'interface utilisateur Apple Pay sur le Web.
Afficher un bouton Apple Pay
Pour vous assurer d’afficher le bouton Apple Pay uniquement, le cas échéant, vous devez d’abord
vérifier
savoir si l’API Apple Pay JS est disponible dans le navigateur en vérifiant que le ApplePaySession la classe existe.
Ensuite, appelez le canMakePayments méthode pour vérifier
l'appareil est capable d'effectuer des paiements Apple Pay. Si la valeur est vraie, affichez le
Pomme
Bouton Payer:
if (window.ApplePaySession && ApplePaySession.canMakePayments ()) // Bouton d'affichage Apple Pay
WebKit fournit un certain nombre de styles de boutons Apple Pay, il n’est donc pas nécessaire de créer votre
posséder.
L’utilisation des styles fournis par WebKit garantit que le bouton aura toujours le meilleur
conception actuelle, et rendra correctement sur tous les périphériques. Utiliser le type de bouton plaine ou acheter sur votre
site Web où les utilisateurs initient le paiement, comme une page de détail de produit ou un panier
page. Pour des conseils supplémentaires sur quel bouton
style à utiliser dans diverses situations, reportez-vous à la section Affichage des boutons Apple Pay.
Utilisez cet outil pour visualiser des boutons de différents types, styles et dimensions, localisés
dans différentes langues et afficher leurs propriétés CSS associées. Pour des informations sur
types de boutons et leurs versions requises iOS et macOS, voir Affichage
Apple Pay Badges publicitaires.
Style de bouton
Type de bouton
La langue
style = "- apparence de kit Web: -apple-pay-button;
-apple-pay-button-type: plaine;
-apple-pay-button-style: noir;"
lang =en
Créer une demande de paiement
Lorsque votre client clique sur le bouton Apple Pay, vous construisez un ApplePaySession objet
qui comprend le ApplePayPaymentRequest
dictionnaire détaillant ce que vous souhaitez afficher dans la fiche de paiement.
Des détails tels que le total des transactions, la devise et les réseaux de cartes que vous supportez sont
Champs obligatoires. Vous pouvez aussi passer éléments de ligne expliquer
frais supplémentaires ou des réductions, ainsi que méthodes de livraison à
remplir différentes options d'expédition pour le client à choisir. Si vous avez besoin d'adresse
ou les coordonnées de votre client, demandez-les en transmettant des valeurs dans le champ requiredExpéditionContactsFields ou requiredBillingContactFields.
Essayez-le: ApplePayPaymentRequest
Configurez les valeurs dans le ApplePayPaymentRequest
structure ci-dessous pour voir comment les informations sont affichées sur la feuille de paiement. Choisir
Demande de base pour voir une feuille de paiement avec seulement les champs obligatoires. Choisissez Détaillé
Demande d'inclure des champs optionnels.
Validation complète du commerçant
Pour afficher le bordereau de paiement au client et lancer la validation du commerçant
processus, vous devez appeler le commencer méthode. dans le onvalidatemerchant
gestionnaire, vous passerez un appel de serveur à serveur pour transmettre une charge utile au serveur Apple Pay.
validationURL point final.
En cas de succès, les serveurs Apple Pay renverront un objet de session marchand que vous
utilisation
dans votre réponse à completeMerchantValidation.
Pour en savoir plus sur la validation du commerçant, consultez la rubrique Demander une session de paiement Apple Pay et consulter
la
transcription de la transaction.
Répondre à la fiche de paiement
Les interactions
Sélection de l'adresse de livraison
Si vous passez requiredShippingContactFields dans le
demande de paiement avec un adresse postale
valeur, vous recevrez les informations d'adresse rédigées avant que l'utilisateur
authentification de la transaction à l'aide de l'identifiant de visage, du Touch ID ou de leur code d'authentification.
Une fois que l'utilisateur a réussi
authentifié, vous recevrez les coordonnées complètes.
Les informations de paiement rédigées ne comprennent que les données nécessaires pour compléter
tâches requises telles que le calcul des taxes ou des frais d’expédition, et peut
diffère en fonction de la région géographique de l'utilisateur.
onshippingcontactselected:
{
"administrativeArea": "CA",
"pays": "États-Unis",
"countryCode": "US",
"nom de famille": "",
"prénom": "",
"localité": "San Francisco",
"phoneticFamilyName": "",
"phoneticGivenName": "",
"code postal": "94114",
"subAdministrativeArea": "",
"sous-lieu": ""
}
Essayez-le: completeShippingContactSelection
Personnaliser le completeShippingContactSelection réponse de
configuration du ApplePayShippingContactUpdate structure ci-dessous
pour voir comment les mises à jour ou les erreurs d’adresse sont affichées dans la feuille.
Choisissez Succès avec ou sans mise à jour des éléments de ligne et le total ci-dessous. Choisir échec
voir la réponse completeShippingContactSelection avec des erreurs personnalisées
Autoriser le
Paiement
Une fois que l'utilisateur a authentifié la transaction à l'aide de l'identifiant de visage, de l'identifiant tactile ou de son appareil.
mot de passe, vous
recevra le jeton Apple Pay crypté, ainsi que le contact demandé
information. Une fois le paiement traité, vous passerez le paiement complet
méthode avec STATUS_SUCCESS ou STATUS_FAILURE et si
nécessaire, en indiquant les erreurs éventuelles.
Essayez-le: completePayment
Utilisez les valeurs suivantes pour personnaliser le paiement complet réponse
au dessous de:
Choisissez Success ci-dessous pour choisir par défaut STATUS_SUCCESS. Choisir
Défaut de voir un paiement complet
réponse avec des erreurs personnalisées.
Transcription de la démo
Après avoir configuré les blocs de code Apple Pay JS pour paymentRequest,
completeShippingContactSelection, et completePayment ci-dessus, voir ci-dessous pour la
résultats.
Remarque: Si completePaymentMethodSelection est appelée, le test
La transaction transmettra toujours une réponse de succès par défaut. Si
completeShippingMethodSelection est appelée, la transaction de test sera transmise
newLineItems et newTotal. Voir les réponses dans la transcription.
Ressources supplémentaires
Prêt à intégrer Apple Pay à votre site Web? Voici quelques liens que vous pouvez
trouver
utile:
