Web (transactions)

Disponibilité des pays

Liste des pays ⬇️

USA

Canada

UK

📘

API des frais hérités

This integration uses the updated v1/transactions API endpoints. If you're using our legacy v2/charges endpoints, see the legacy Web (Charges).

Aperçu

Pour démarrer un paiement avec Affirm en ligne, trois étapes principales doivent être complétées :

1. Créer un formulaire de caisse.
2. Sécurisez en toute sécurité les renseignements du client.
3. Utilisez checkout_token pour initier la transaction.

Les sections ci-dessous vous guident à travers les étapes nécessaires pour initier un passage à la caisse.

Initiation du checkout

Lancez l'application Affirm en quatre étapes.

Étape 1 : Ajouter affirm.js

📘

Configuration du compte

Assurez-vous d'avoir configuré un compte dans le Tableau de bord commerçant Affirm.

Incluez le script suivant dans la section d'en-tête de chaque page de votre site. Ce script est toujours chargé directement depuis le domaine Affirm.

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

Après avoir inclus le script ci-dessus, une instance définie d'Affirm est créée sur votre client. Vous accédez ensuite aux méthodes qui se trouvent dans l'objet Affirm pour déclencher plusieurs actions.

Étape 2. Rendre le checkout d'Affirm

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

Étape 3.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 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. Autoriser le 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

If you are a travel merchant, you are required to include the itinerary object in your checkout flow. Learn more about the itinerary object.