Web (charges)

🚧

Passer à l'API Transactions

Affirm est passé à la nouvelle API Transactions. Bien que nous continuions à prendre en charge les frais API, nous vous recommandons d'utiliser l'API Transactions. Vous trouverez plus de renseignements ici.

Commencer un paiement avec Affirm sur le Web consiste à créer un formulaire de paiement, à tokeniser les renseignements des clients en toute sécurité et à utiliser ce checkout_token pour initier un paiement.

Ce guide vous démontre la manière d'inclure affirm.js et Affirm Checkout sur votre page web.

1. Configurer Affirm.js

Incluez le script suivant dans la section d'en-tête de chaque page de votre site. Ce script doit toujours être chargé directement à partir du domaine Affirm.

🚧

Utilisez uniquement vos clés API sandbox et votre domaine pour les tests et le développement. Cela garantit que vous ne modifiez pas accidentellement vos transactions en direct.

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

2. Initialiser Affirm

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

3. Rendu du paiement Affirm

La création de paiement est le processus dans lequel un client utilise Affirm pour payer un achat dans votre application. Vous pouvez créer un objet de paiement et lancer le paiement Affirm en utilisant des fonctions affirm.checkout(checkoutObject) et affirm.checkout.open(), qui déclenche notre flux standard lorsque le client clique sur un bouton Terminer le paiement après avoir sélectionné Affirm comme option de paiement.

affirm.checkout({
 
      "merchant": {
        "user_confirmation_url":    "https://merchantsite.com/confirm",
        "user_cancel_url":          "https://merchantsite.com/cancel",
        "user_confirmation_url_action": "POST",
        "name": "Your Customer-Facing Merchant Name"
      },
      "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",
        "categories": [
            ["Home", "Bedroom"],
            ["Home", "Furniture", "Bed"]
        ]
      }
   ],
      "discounts":{
         "RETURN5":{
            "discount_amount":500,
            "discount_display_name":"Returning customer 5% discount"
        },
        "PRESDAY10":{
            "discount_amount":1000,
            "discount_display_name":"President's Day 10% off"
      }
   },
   "metadata":{
      "shipping_type":"UPS Ground",
      "mode":"modal"
   },
   "order_id":"JKLMO4321",
   "currency":"USD",  
   "financing_program":"flyus_3z6r12r",
   "shipping_amount":1000,
   "tax_amount":500,
   "total":100000
})

affirm.checkout.open()

📘

Fonctions de paiement et objet

Les fonctions de paiement ci-dessus effectuent les opérations suivantes :

• Envoie l'objet de paiement.
• Redirige le client vers le processus de paiement Affirm sur le domaine affirm.com ou lui montre une modale Affirm.
• Valide les données requises dans l'objet de caisse.

Vous pouvez trouver plus de renseignements sur la façon de créer un objet de paiement via notre bibliothèque Javascript Affirm.

4. Gérer les rappels

Une fois que vous avez lancé un paiement et que le client a confirmé son prêt Affirm, nous envoyons une demande HTTP avec le checkout_token à l'URL que vous avez définie dans l'objet checkout (user_confirmation_url). Par défaut, Affirm envoie cette requête via POST. Toutefois, vous pouvez configurer l'objet Paiement, afin qu'Affirm envoie cette demande via GET.

Vous choisissez comment nous envoyons le paramètre checkout_token en définissant le paramètre user_confirmation_url_action dans l'objet de validation de commande.

• La configuration sur POST envoie le checkout_token dans le corps de la demande HTTP (paramètre par défaut).
• En lui donnant la valeur GET on envoie le checkout_token dans la chaîne de requête de la demande HTTP .

🚧

Vous pouvez également récupérer le checkout_id à partir d'un rappel javascript si vous définissez les métadonnées mode à modal. En savoir plus sur la caisse modale.

5. Créer une charge

Lorsqu'un client réussit à passer à la caisse, il est enregistré comme une nouvelle tentative d'achat. Cela doit être géré côté serveur pour être traité via notre API Charges.

Traitement des erreurs

Les erreurs générées par la demande de caisse sont présentées sur la page où la caisse est initiée, sous la forme d'une fenêtre modale contextuelle. Un message spécifique sur la source de l'erreur est présenté dans cette fenêtre modale (par exemple, "Numéro de téléphone non valide").

Vous pouvez définir une fonction de rappel lorsque cette fenêtre modale d'erreur est fermée, mais actuellement, ce rappel ne relaie aucune donnée d'événement spécifique au message d'erreur affiché dans la fenêtre modale.

Voici un exemple de définition de ce rappel d'événement :

affirm.ui.ready(
    function() {
        affirm.ui.error.on("close", function(){
            alert("Please check your contact information for accuracy.");
        });
    }
);