Intégration avec ApplePay

Paysafe.js v2 permet aux marchands d’accepter des paiements à partir de leurs sites Web en utilisant des modes de paiement mobiles, comme Apple Pay qui s’appuie sur des paiements par carte effectués par l’intermédiaire de l’API Paiements Paysafe. Il s’agit d’une SDK JavaScript basée sur la conception standard de l’API de demande de paiements. Vous pouvez utiliser cette SDK Javascript pour proposer Apple Pay sur votre site Web marchand.

Avantages

Conformité à la norme PCI SAQ-A
Intégration simple
Entièrement en « marque blanche », sans que vos clients ne sachent que Paysafe gère le paiement.
Aucune redirection à partir du site Web du marchand n’est requise.

Exemple

Si votre système d’exploitation et votre navigateur sont conformes aux conditions préalables d’Apple Pay (un appareil iOS ou macOS avec Safari, et un compte du bac à sable Apple), un exemple de requête API Paysafe en action sera affiché ci-dessous. Si vous ne remplissez pas ces conditions préalables, un message s’affiche à la place. L’exemple ne représente pas un paiement réel, et aucune somme d’argent n’est transférée.

Cet appareil ou ce navigateur n’est pas compatible avec Apple Pay, ou vous essayez d’accéder à la page en utilisant un appareil avec un vrai compte Apple Pay, plutôt qu’avec le bac à sable.

Le gestionnaire de paiement renvoyé peut alors être utilisé pour effectuer un paiement en utilisant l’API Paiements.

Obtenir des clés

Avant de commencer, vous devez obtenir votre clé API standard de serveur à serveur (clé privée) et une clé API générant un gestionnaire de paiement (clé publique) à partir du portail d’entreprise.

Remarque :

Veuillez contacter votre responsable des relations avec les entreprises ou vous adresser à i ntegrations@paysafe.com pour obtenir vos authentifants au portail d’entreprise.
La clé API qui génère le gestionnaire de paiement est utilisée dans votre code JavaScript sur le client pour générer des gestionnaires de paiement à partir des cartes de crédit et des comptes bancaires des clients. Contrairement à la clé API serveur à serveur, cette clé n’a pas la capacité d’accepter les paiements ou d’effectuer toute autre opération et peut donc être exposée en toute sécurité dans votre code côté client.

Pour obtenir la clé de l’API publique à partir du portail d’entreprise :

Allez à Intégrer>Clés API
Pour la clé publique, cliquez sur l’icône Copie pour copier la clé API.
1. Votre clé API aura le format suivant :
  1. Nom d’utilisateur de la clé – MarchandXYZ
  2. Key Password – B-tst1-0-51ed39e4-312d02345d3f123120881dff9bb4020a89e8ac44cdfdcecd702151182fdc952272661d290ab2e5849e31b
Pour la clé privée, cliquez sur « Authentifier maintenant » et saisissez le mot de passe de votre portail d’entreprise pour afficher la clé privée.
1. Votre clé API aura le format suivant :
  1. Nom d’utilisateur de la clé – MarchandXYZ
  2. Key Password – B-tst1-0-51ed39e4-312d02345d3f123120881dff9bb4020a89e8ac44cdfdcecd702151182fdc952272661d290ab2e5849
La clé API est sensible à la casse. Pour les appels de serveur à serveur, la clé API utilise l’authentification de base HTTP.
Pour utiliser l’authentification de base HTTP, vous devez envoyer les authentifiants de la clé API à l’aide de l’en-tête Autorisation avec chaque requête. Vous devez construire l’en-tête Autorisation comme suit :
Combinez le nom d’utilisateur et le mot de passe de la clé dans une chaîne de caractères séparée par deux points, p. ex. « Nom d’utilisateur de la clé:Mot de passe de la clé ».
La chaîne littérale résultante est alors codée en Base64.
La méthode d’autorisation et un espace (p. ex. « Basic ») sont alors placés devant la chaîne codée.
Par exemple, avec les exemples de nom d’utilisateur et de mot de passe de clé ci-dessus, l’en-tête est formé comme suit :
1. Authorization: Basic TWVyY2hhbnRYWVo6Qi10c3QxLTAtNTFlZDM5ZTQtMzEyZDAyMzQ1ZDN

Pour de plus amples renseignements concernant l’authentification, voir ici.

Certificats Apple Pay

En tant que marchand, pour accepter les paiements provenant d’Apple Pay, vous devez ajouter deux certificats appelés certificat de traitement et certificat d’identité dans le portail d’entreprise. Si les certificats ne sont pas ajoutés, vous ne pourrez pas accepter les paiements provenant des comptes Apple Pay des clients.

Dans le portail d’entreprise, à Intégrer > Certificats Apple Pay, vous pouvez ajouter et gérer vos certificats Apple Pay. Une fois que vous avez accédé à la page des certificats Apple Pay, vous verrez deux sections :

Certificat d’identité du marchand
Certificat de traitement des paiements du marchand

La première étape de la configuration consiste à ajouter un certificat de traitement des paiements à partir du site Web d’Apple. Si vous êtes un marchand qui accepte des paiements à partir d’applications Web, vous devez ajouter le certificat d’identité de marchand Apple Pay.

Pour accepter les paiements Apple Pay à partir du Web et d’iOS, vous devez configurer le certificat de traitement des paiements du marchand. Ce certificat est nécessaire pour déchiffrer le jeton transmis lors des transactions Apple Pay. Ce n’est que lorsque le jeton est déchiffré que le paiement est effectué.

Ajout d’un certificat d’identité du marchand

Cliquez sur Ajouter un certificat. L’écran « Ajouter un nouveau certificat » s’affiche.
Cliquez sur Générer une DSC. Un fichier DSC est téléchargé sur votre machine locale.
Cliquez sur Visiter le portail des développeurs Apple. Le portail des développeurs Apple s’ouvre dans un nouvel onglet.
Connectez-vous au portai des dévelopeurs Apple. Une fois la session ouverte, la page Certificats, identifiants et profils s’affiche. En tant que marchand, vous devez créer un identifiant dans le portail des développeurs et associer des identifiants de marchands sous votre profil pour traiter les paiements Apple Pay.
Cliquez sur + (icône plus) pour créer un nouveau certificat.
Sélectionnez l’option Certificat d’identité de marchand Apple Pay et cliquez sur Continuer. L’étape « Sélectionner un identifiant de marchand » s’affiche.
Sélectionnez un identifiant de marchand que vous avez créé dans le portail des développeurs Apple et cliquez sur « Continuer ». L’étape « Télécharger une demande de signature de certificat » s’affiche.
Cliquez sur Choisir un fichier et sélectionnez le fichier DSC que vous avez téléchargé à l’étape 2, puis cliquez sur Continuer. L’étape « Télécharger votre certificat » s’affiche.
Cliquez sur Télécharger pour télécharger le certificat.
Revenez au portail d’entreprise > Écran Ajouter un nouveau certificat.
Cliquez sur Téléverser à la troisième étape. La boîte de dialogue « Authentifier » s’affiche.
Saisissez votre mot de passe du portail dans la boîte de dialogue et cliquez sur Authentifier. La boîte de dialogue « Sélectionner » s’affiche.
Sélectionnez le certificat téléchargé depuis le portail des développeurs Apple. Une fois un certificat sélectionné, le portail indique si le téléchargement a réussi et affiche la date d’expiration du certificat. Vous pouvez également voir les certificats sur la page Intégrer des Certificats Apple Pay.

Ajoutez un certificat de traitement des paiements de marchand

Cliquez sur Ajouter un certificat. L’écran « Ajouter un nouveau certificat » s’affiche.
Cliquez sur Générer une DSC. Un fichier DSC est téléchargé sur votre machine locale.
Cliquez sur Visiter le portail des développeurs Apple. Le portail des développeurs Apple s’ouvre dans un nouvel onglet.
Connectez-vous au portai des dévelopeurs Apple. Une fois la session ouverte, la page Certificats, identifiants et profils s’affiche. En tant que marchand, vous devez créer un identifiant dans le portail des développeurs et associer des identifiants de marchand sous votre profil pour traiter les paiements Apple Pay.
Cliquez sur + (icône plus) pour créer un nouveau certificat.
Sélectionnez l’option Certificat de traitement de paiements Apple Pay et cliquez sur « Continuer ». L’étape « Sélectionner un identifiant de marchand » s’affiche.
Sélectionnez un identifiant de marchand que vous avez créé dans le portail des développeurs Apple et cliquez sur « Continuer ». L’étape « Télécharger une demande de signature de certificat » s’affiche.
Cliquez sur Choisir un fichier et sélectionnez le fichier DSC que vous avez téléchargé à l’étape 2, puis cliquez sur Continuer. L’étape « Télécharger votre certificat » s’affiche.
Cliquez sur Télécharger pour télécharger le certificat.
Revenez au portail d’entreprise > Écran « Ajouter un nouveau certificat »
Cliquez sur Téléverser à la troisième étape. La boîte de dialogue « Authentifier » s’affiche.
Saisissez votre mot de passe du portail dans la boîte de dialogue et cliquez sur Authentifier. La boîte de dialogue « Sélectionner » s’affiche.
Sélectionnez le certificat téléchargé depuis le portail des développeurs Apple. Une fois un certificat sélectionné, le portail indique si le téléchargement a réussi et affiche la date d’expiration du certificat. Vous pouvez également voir les certificats sur la page Intégrer des Certificats Apple Pay.

Remarque :

Si le certificat expire, il est impossible d’accepter les paiements Apple Pay. Vous pouvez afficher la date d’expiration du certificat sur la page Intégrer un Certificat Apple Pay.
Les marchands qui utilisent l’ancienne configuration de Paysafe JS peuvent se référer à l’ancien Guide du portail Netbanx pour obtenir des certificats Apple Pay.

ApplePay avec la SDK Paysafe JS

Veuillez suivre les guides sur la façon d’intégrer Paysafe JS : Intégration de Paysafe JS

Obtenez vos clés API publiques (création de jeton à usage unique) et privées (traitement des paiements) à partir du portail des marchands.
Créez votre formulaire de paiement HTML personnalisé avec le contenu (texte et images) et le style que vous souhaitez.
Incluez la balise de la SDK Paysafe.js JavaScript (paysafe.min.js) <script> dans l’élément <head> de votre plateforme de paiement HTML.
Ajoutez des éléments de conteneur vides (habituellement
) à votre HTML pour le bouton Apple Pay (et/ou les champs de paiement).
Appelez la fonction SDK fields.setup avec votre clé API à jeton à usage unique. La fonction de configuration crée le bouton Apple Pay (et tout autre champ) dans les conteneurs fournis.
Appelez la fonction d’affichage de l’instance SDK sans aucun paramètre. La fonction d’affichage visualise les champs Paysafe JS et renvoie une liste des modes de paiement disponibles.
Enfin, ajoutez la fonction instance.tokenize à l’événement de clic du bouton Apple Pay. Cela renvoie un jeton de gestion de paiement à usage unique (le jeton représentant les données de paiement saisies par l’utilisateur est stocké dans l’API Paiements). Les jetons à usage unique ne sont valides que 15 minutes.
Envoyez le jeton à votre serveur marchand, où le point d’extrémité de paiement standard de l’API Paiements peut être utilisé pour effectuer le paiement.

Vous devez inclure le paramètre supportedCountries lors des paiements par carte ApplePay afin d’éviter l’échec de la transaction si les cartes contenues dans le portefeuille d’un client ont été émises dans des pays non pris en charge. Toute carte émise dans un pays non pris en charge sera affichée comme n’étant pas disponible pour le paiement, et le client ne pourra pas la sélectionner pour effectuer la transaction.

Carte non disponible pour l’exemple de paiement

Exemple de formulaire de paiement

Voici un exemple de code Paysafe.js simple qui crée un formulaire de paiement avec le bouton Apple Pay. Le bouton de paiement déclenche la tokenisation des données saisies par l’utilisateur et (si la tokenisation est réussie) affiche le jeton dans la console du navigateur.

<html><head><script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script></head><body><div id="apple-pay"></div><p></p><script type="text/javascript">

         // Base64-encoded version the Single-Use Token API key.

         // Create the key below by concatenating the API username and password

         // separated by a colon and Base 64 encoding the result

         var API_KEY = 'Votre clé d’API de jeton à usage unique encodée en Base64';

         var options = {

           // You must provide currencyCode to the Paysafe JS SDK to enable the Payment API integration

           currencyCode: 'USD',

           // select the Paysafe test / sandbox environment

           environment: 'TEST',

           // Provide an apple pay merchant account if you have more than one configured for that same API key

           // accounts: {

           //   default: 0000000000,

           // },

           // set the CSS selectors to identify the payment field divs above

           // set the placeholder text to display in these fields

           fields: {

             applePay: {

               selector: '#apple-pay',

               type: 'buy',

               label: 'Demo JS',

               color: 'white-outline',

             },

           },

         };

         // initalize the hosted iframes using the SDK setup function

         var demoInstance;

         paysafe.fields

           .setup(API_KEY, options)

           .then(instance => {

             console.log('Configuration de l’instance terminée.');



             demoInstance = instance;

             return instance.show();

           })

           .then(paymentMethods) => {

             if (paymentMethods.applePay && !paymentMethods.applePay.error) {

               document.getElementById('apple-pay"').addEventListener(

                 'click',

                 function (event) {

                   demoInstance

                     .tokenize({

                       amount: 1000,

                       transactionType: 'PAYMENT',

                       paymentType: 'APPLEPAY',

                       applePay: {

                       country: 'US',

                       },

                       customerDetails: {

                         billingDetails: {

                           country: 'US',

                           zip: '90210',

                           street: 'Oak Fields 6',

                           city: 'ca',

                           state: 'CA',

                         },

                       },

                       merchantRefNum: 'merchant-ref-num-' + new Date().getTime(),

                     })

                     .then(result => {

                       // write the Payment token value to the browser console

                       console.log(result.token);

                       // close the Apple Pay window

                       demoInstance.complete('success');

                     })

                  .catch(error => {

                       // display the tokenization error in dialog window

                       alert(JSON.stringify(error));



                       // close the Apple Pay window

                  demoInstance.complete('fail');

                     });

                 },

                 false,

              );

             }

           })

           .catch(error => {

             // display any setup errors

             alert(JSON.stringify(error));

           });

      </script></body></html>

Pour de plus amples renseignements sur la façon de segmenter un paiement Apple Pay, veuillez vous référer à Segmentation → Exemple de segmentation en unités avec Apple Pay

Configuration de la SDK ApplePay

Les fonctions de configuration et d’affichage créent et initialisent les modes de paiement Paysafe.js dans les conteneurs d’éléments HTML sélectionnés (généralement des éléments div) sur votre page de paiement.

Pour initialiser Paysafe JS avec Apple Pay, vous devez ajouter le champ applePay dans la section options.fields.

Exemple d’initialisation de Paysafe JS avec ApplePay :

const options = {

        accountId: accountId,

        environment: ’TEST’,

        fields: {

            applePay: {applePay: {

                selector: ’#apple-pay’,

                type: ’buy’,

                label: ’Demo JS’,

                color: ’white-outline’,

            }

        },

        currencyCode: currencyCode

    }



let hostedFieldsInstance;

paysafe.fields.setup(apikey, options)

    .then(instance => {

        hostedFieldsInstance = instance;

        return instance.show();return hostedFieldsInstance.show();

    }).then(paymentMethods => {

           if (paymentMethods.applePay && !paymentMethods.applePay.error) {

               // Subscribe for click event on applePay button

            }

    })

    .catch((error) => {/** Process any errors during the setup*/})

Vous pouvez également utiliser aysnc-await :

async function setupPaysafeJS() {

    const options = {

        accountId: accountId,

        environment: ’TEST’,

        fields: {

            applePay: {applePay: {

                selector: ’#apple-pay’,

                type: ’buy’,

                label: ’Demo JS’,

                color: ’white-outline’,

            }

        },

        currencyCode: currencyCode

    }



    TRYtry {

        const instance = await paysafe.fields.setup(apikey, options)

        const paymentMethods = instance.show()

        if (paymentMethods.applePay && !paymentMethods.applePay.error) {

               // Subscribe for click event on applePay button

        }

    } catch(error) {

        /** Process any errors during the setup*/

    }



}

Cette page a-t-elle été utile ?

Sur cette page

Avantages
Exemple
Obtenir des clés
Certificats Apple Pay
Ajout d’un certificat d’identité du marchand
Ajoutez un certificat de traitement des paiements de marchand
ApplePay avec la SDK Paysafe JS
Configuration de la SDK ApplePay

Search Overlay

Intégration avec ApplePay

Cette page a-t-elle été utile ?

Merci pour votre réponse!