Web (transactions)

📘

API des frais hérités

Cette intégration utilise les points d'extrémité de l'API v1/transactions mis à jour. Si vous utilisez nos anciens points de terminaison v2/charges , cliquez ici.

Aperçu

To start a payment with Affirm online, there are three main steps to complete:

1. Create a checkout form.
2. Securely tokenize the customer's information.
3. Use the checkout_token to initiate the transaction.

The sections below walk you through the necessary steps to initiate a checkout.

Checkout Initiation

Lancez l'application Affirm en quatre étapes.

Step 1. Embed Affirm.js

📘

Account Setup

Make sure that you've set up an account in the Affirm Merchant Dashboard.

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

<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>

After you include the script above, a defined instance of Affirm is created on your client. You then gain access to methods that are within the Affirm object to trigger multiple actions.

Step 2. Render Affirm Checkout

Lorsqu'un client choisit d'utiliser Affirm pour payer un achat, un objet checkout contenant les détails de la commande doit être créé, afin qu'Affirm puisse rendre le flux de paiement. Vous pouvez créer un objet checkout à l'intérieur de affirm.checkout() , puis lancer l'expérience de paiement Affirm en utilisant la fonction affirm.checkout.open() .

Vous pouvez configurer l'objet de paiement avec les éléments suivants :

• Une user_confirmation_url pour rediriger votre client vers une page de confirmation après qu'il ait confirmé son prêt.
• Une user_cancel_url pour rediriger votre client vers une page d'annulation s'il ne remplit pas sa demande de prêt.
• Adresse de facturation/d'expédition du client.
• Une description et le total de leur panier.

Vous trouverez plus de renseignements sur les attributs des objets de paiement dans notre API de paiement.

affirm.checkout({
 
      "merchant": {
        "user_confirmation_url":    "https://merchantsite.com/confirm",
        "user_cancel_url":          "https://merchantsite.com/cancel",
        "public_api_key":  "YOUR_PUBLIC_KEY",
        "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":           10000,
        "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":600,
   "total":30100
})

affirm.checkout.open()

L'appel à la fonction affirm.checkout() effectue les opérations suivantes :

• Envoie l'objet de caisse de commande au système principal d'Affirm.
• 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 paiement

Step 3. Handle Callbacks

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 de caisse pour qu'Affirm envoie cette requête 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 checkout.

• 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 .

🚧

Paiement modal

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

Étape 4. Autoriser

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 Transactions.

1. Retrieve the checkout_token

Récupérez le checkout_token envoyé par Affirm via une requête HTTP au rappel de succès.

"checkout_token": "CJXXM8RERR0LC066"

2. Authorize the checkout_token

Autorisez le checkout_token immédiatement en transmettant la valeur du paramètre transaction_id à /transactions .

curl --request POST \
     --url https://api.affirm.com/api/v1/transactions \
     --header 'Accept: */*' \
     --header 'Content-Type: application/json' \
     --data '
{
     "transaction_id": "CJXXM8RERR0LC066",
     "order_id": "JKLM4321"
}
'

3. Enregistrer l'ID retourné

Après avoir autorisé la transaction, enregistrez le id de l'objet de transaction renvoyé dans la réponse.

{
    "id": "9RG3-PMSE"
    "currency": "USD",
    "amount": 11500,
}

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

🚧

Objet de l'itinéraire - Exigences des commerçants de voyages

Si vous êtes un commerçant de voyages, vous devez inclure l'objet de l'itinéraire dans votre flux de paiement. Cliquez ici pour en savoir plus sur l'objet de l'itinéraire.