Carte virtuelle sur le Web

Starting a payment with Affirm on the web with a virtual card consists of creating a checkout form, tokenizing customer information securely, and generating a virtual card. You can then process the card through your existing payment gateway.

Ce guide vous démontre la manière d'inclure Affirm.js et Affirm Checkout sur votre page web pour créer une carte virtuelle Affirm.

Étape 1 : Mise en place d'Affirm.js

Include the following script in the head section on every page on your site. This script should always be loaded directly from the Affirm domain.

⚠

️

Use only your sandbox API keys and domain for testing and development. This ensures that you don't accidentally modify your live transactions. Note that Affirm does not generate real virtual cards in the sandbox environment. If applicable, please work with your technical account manager on live testing.

<script>
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
   locale:          "fr_CA",
   country_code:    "CAN",
 };
(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>

Une fois que vous aurez inclus le script ci-dessus, une instance définie d'Affirm sera créée sur votre client. Vous aurez accès aux méthodes de l'objet Affirm pour déclencher plusieurs actions.

Step 2: Create the checkout object

Lorsqu’un client choisit Affirm pour payer un achat, un objet checkout object contenant les détails de la commande doit être créé avec affirm.checkout() afin qu’Affirm puisse rendre le flux de paiement. Vous trouverez ci-dessous un exemple d'objet de caisse :

{ 
   "merchant":{ 
      "user_confirmation_url":"https://merchantsite.com/confirm",
      "user_cancel_url":"https://merchantsite.com/cancel",
      "public_api_key": "{YOUR PUBLIC_API_KEY}",
      "name":"Your Customer-Facing Merchant Name",
      "use_vcn": true
   },
   "shipping":{ 
      "name":{ 
         "first":"Joe",
         "last":"Doe"
      },
    "address": {
      "street1": "4519 Rue Levy",
      "street2": "Apt 1",
      "city": "Saint-Laurent",
      "region1_code": "QC",
      "postal_code": "H4R2P9",
      "country": "CAN"
    },
      "phone_number": "250-555-0199",
    "email": "[email protected]",
     },
   "billing":{ 
      "name":{ 
         "first":"Joe",
         "last":"Doe"
      },
     "billing_address": {
      "street1": "4519 Rue Levy",
      "street2": "Apt 1",
      "city": "Saint-Laurent",
      "region1_code": "QC",
      "postal_code": "H4R2P9",
      "country": "CAN"
    },
     "phone_number": "250-555-0199",
    "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,
 "currency": "CAD"
});

⚠

️ Note:

• Notre produit de carte virtuelle ne prend en charge que le mode modal. Le paiement Affirm s'ouvrira dans un modal qui flottera au-dessus de votre page de paiement. Ceci est indiqué dans l'objet de caisse lors de la configuration du paramètre mode à modal.
• Set the use_vcn parameter to true to enable card details to be generated on loan origination.
• affirm.checkout() valide les données requises dans l'objet de caisse.

Step 3: Launch checkout and handle callbacks

Après avoir créé l'objet checkout, vous pouvez lancer la modale Affirm checkout à 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. En cas de paiement réussi, vous récupérerez les détails de la carte et le checkout_id à partir du rappel. Voir ci-dessous pour un modèle:

⚠

️

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 Merchant Help for further information.

affirm.checkout.open_vcn({
      success: function(card_response) {
         console.log(card_response);
      },
      error: function(error_response) {
        console.log(error_response);
      },
      checkout_data: data
});

Étape 4 : Gestion de la carte

Once you receive the card details from the checkout response, you can submit authorizations, captures, and refunds to the virtual card using your existing payment rails.

You can also retrieve card details via your server using our Read Card API endpoint and the associated checkout_id.