Démo Apple Pay sur le Web

Contenus ToggleVue d'ensembleExigencesCommencerAfficher un bouton Apple PayCréer une demande de paiementEssayez-le: ApplePayPaymentRequestValidation complète du commerçantRépondre à la fiche de paiement                             Les interactionsSélection de l'adresse de livraisonEssayez-le: completeShippingContactSelectionAutoriser le                             PaiementEssayez-le: completePaymentTranscription de la démoRessources supplémentaires Vue d'ensemble

Essayez une transaction test Apple Pay ci-dessous. Votre carte ne sera pas                         accusé.

Votre navigateur ou votre appareil ne prend pas en charge Apple Pay sur le Web.Pour essayer cette démo, ouvrez cette page dans Safari sur un appareil compatible.(Voir les exigences du système d'exploitation pour cette démonstration ci-dessous.)

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 Noir (par défaut)Blanc avec contourblanc

Type de bouton Plain (par défaut)LivreAcheterCheck-outFaire un donInstallerSouscrire

La langue Anglais (US)arabecatalanChinois (Chine)Chinois (Hong Kong)Chinois (Taiwan)croatetchèquedanoisnéerlandaisAnglais (Australie)Anglais Royaume-Uni)finlandaisFrançais (Canada)France francaise)allemandgrechébreuhindihongroisindonésienitalienJaponaiscoréenmalaisnorvégienpolonaisPortugais (Brésil)Portugais (Portugal)roumainrusseslovaqueEspagnol (Amérique latine)Espagnol (Espagne)suédoisthaïlandaisturcukrainienvietnamien

Votre navigateur ou votre appareil ne prend pas en charge Apple Pay sur le Web.Pour essayer cette démo, ouvrez cette page dans Safari sur un appareil compatible.

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.

Votre navigateur ou votre appareil ne prend pas en charge Apple Pay sur le Web.Pour essayer cette démo, ouvrez cette page dans Safari sur un appareil compatible.

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

Votre navigateur ou votre appareil ne prend pas en charge Apple Pay sur le Web.Pour essayer cette démo, ouvrez cette page dans Safari sur un appareil compatible.

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.

Votre navigateur ou votre appareil ne prend pas en charge Apple Pay sur le Web.Pour essayer cette démo, ouvrez cette page dans Safari sur un appareil compatible.

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: