Configurer une carte virtuelle sur le web

Conditions préalables

• Consultez À propos de la carte virtuelle Affirm.

Étapes

1. Ajouter Affirm.js

Ajouter le script Affirm.js à votre site. Le script se charge directement depuis le domaine Affirm.

🚧

Clés API Sandbox

Utilisez uniquement vos clés API et votre domaine d’environnement de test pendant les essais et le développement. Cela garantit que vous ne modifiez pas accidentellement les transactions en direct.

<script>
var _affirm_config = {
		public_api_key: "YOUR_PUBLIC_API_KEY", /* replace with public api key */
		script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
		locale: "en_US",
		country_code: "USA",
	};

(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
  !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
</script>

L'ajout du script à votre site crée une instance définie d'Affirm pour votre client, ce qui vous permet d'accéder aux méthodes de l'objet Affirm pour déclencher des actions multiples.

Remarque : Affirm ne génère pas de vraies cartes virtuelles dans l'environnement de test. Veuillez communiquer avec votre responsable technique pour les tests en direct.

2. Créer l’objet de paiement

When a customer chooses Affirm to pay for a purchase, a checkout object containing the order details should be created with affirm.checkout() so that Affirm can render the checkout flow. See below for a sample checkout object:

affirm.checkout({ 
   "merchant":{ 
      "name":"Your Customer-Facing Merchant Name",
      "use_vcn": true
   },
   "shipping":{ 
      "name":{ 
         "first":"Joe",
         "last":"Doe"
      },
      "address":{ 
         "line1":"633 Folsom St",
         "line2":"Floor 7",
         "city":"San Francisco",
         "state":"CA",
         "zipcode":"94107",
         "country":"USA"
      },
      "phone_number":"4153334567",
      "email":"[email protected]"
   },
   "billing":{ 
      "name":{ 
         "first":"Joe",
         "last":"Doe"
      },
      "address":{ 
         "line1":"633 Folsom St",
         "line2":"Floor 7",
         "city":"San Francisco",
         "state":"CA",
         "zipcode":"94107",
         "country":"USA"
      },
      "phone_number":"4153334567",
      "email":"[email protected]"
   },
   "items":[ 
      { 
         "display_name":"Awesome Pants",
         "sku":"ABC-123",
         "unit_price":1999,
         "qty":3,
         "item_image_url":"http://merchantsite.com/images/awesome-pants.jpg",
         "item_url":"http://merchantsite.com/products/awesome-pants.html"
      }
   ],
   "order_id":"JKLMO4321",   
   "metadata": {
       "mode": "modal"
     },
   "shipping_amount":1000,
   "tax_amount":500,
   "total":5997
});

📘

Note:

• La carte virtuelle ne prend en charge que le mode modal. Le paiement Affirm s'ouvre dans une fenêtre contextuelle modale au-dessus de votre page de paiement. Ceci est indiqué dans l’objet de paiement lors du réglage du paramètre mode sur modal.
• Définissez le paramètre use_vcn sur true pour que les détails de la carte soient générés à l'origine du prêt.
• affirm.checkout() validates the required data in the checkout object.

3. Lancez la caisse et gérez les rappels

Lancez le mode de paiement Affirm à l'aide de la fonction affirm.checkout.open_vcn(). Lorsque le client confirme son prêt Affirm, nous envoyons un rappel JavaScript en cas de succès ou d'erreur, selon le résultat. Après un paiement réussi, vous récupérez les détails de la carte et checkout_id à partir du rappel. Voir le modèle affirm.checkout.open_vcn() :

affirm.checkout.open_vcn({
      success: function(card_response) {
         console.log(card_response);
         //add logic on handling the returned client-side card details and/or checkout token here
      },
      error: function(error_response) {
        console.log(error_response);
        //add logic on handling a declination or abandoned checkout here. We recommend redirecting users to the payment selection screen to choose an alternative payment method.
      },
      checkout_data: data
});

4. Gestion des cartes

Vous pouvez soumettre des autorisations, des captures et des remboursements à la carte virtuelle en utilisant vos infrastructures de paiement existantes.

Vous pouvez également récupérer les détails de la carte à partir de votre serveur à l'aide de notre point de terminaison de l'API Read Card et des checkout_id associés.

🚧

Retrieve Card Details

If you don't want to retrieve the card details from the client-side, we can always pass them back via the server-side only (for PCI reasons). Please contact Affirm through [email protected] for further information.

FAQ

🚩

Resolving "affirm.checkout.open_vcn is not a function" Error in VCN Integration

Q: Comment puis-je corriger l'erreur « Affirm.checkout.open_vcn n'est pas une fonction » lors de l'utilisation des méthodes de paiement d'Affirm ?

R : Cette erreur se produit généralement lorsque le script Affirm n'a pas été entièrement chargé avant que les méthodes caisse et open_vcn ne soient appelées. Pour résoudre ce problème, intégrez les appels aux méthodes Affirm Checkout et open_vcn dans la méthode affirm.ui.ready. Vous trouverez ci-dessous une solution qui a aidé de nombreux commerçants :

JavaScript

affirm.ui.ready(function() {
  affirm.checkout(checkoutObj);
  affirm.checkout.open_vcn({
      success: function(card_checkout) {
          //On successful loan confirmation Affirm will trigger this function
          //This function will be used to pass CC number to your CC processor
          //You will need to handle redirecting to a success page here as well
          console.log(card_checkout);
      },
      error: function(error_response) {
          //On Cancel or decline Affirm will trigger the following function
          //You will need to handle redirecting to an error page here
          console.log(error_response);
      }
  });
});

In this solution, the success function is used for processing successful loan confirmations, including passing credit card details to your processor and redirecting to a success page. The error function handles cancellations or declines by redirecting to an error page. This workaround ensures that Affirm's methods are only called after the script is fully loaded, effectively preventing the error.

Quelle est la prochaine étape?

• Messagerie promotionnelle et préadmissibilité
• Configurer une carte virtuelle pour Android
• Configure une carte virtuelle pour iOS