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.

Starting a payment with Affirm on the web consists of creating a checkout form, tokenizing customer information securely, and using that checkout_token to initiate a charge.

This guide shows you how to include affirm.js and Affirm Checkout on your web page.

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

Checkout creation is the process in which a customer uses Affirm to pay for a purchase in your app. You can create a checkout object and launch the Affirm checkout using affirm.checkout(checkoutObject) and affirm.checkout.open() functions, which triggers our standard flow when the customer clicks on a Complete payment button after selecting Affirm as a payment option.

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

After you initiate a checkout and the customer confirms their Affirm loan, we send an HTTP request with the checkout_token to the URL you defined in the checkout object (user_confirmation_url). By default, Affirm sends this request via POST. However, you can configure the checkout object to have Affirm send this request via GET.

You choose how we send the checkout_token by setting the user_confirmation_url_action parameter in the checkout object.

Setting it to POST sends the checkout_token in the body of the HTTP request (default setting).
Setting it to GET sends the checkout_token in the query string of the HTTP request.

🚧
You can also retrieve the checkout_id from a javascript callback if you set the metadata mode to modal. Learn more about modal checkout.

5. Créer une charge

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

Error Handling

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.");
        });
    }
);