AccueilCommencerSolutionsPlateformesIntégrations globales
DocsRéférence APIRéférence APIRecetteChangelog
AccueilCommencerSolutionsPlateformesIntégrations globalesSe connecter
Docs

Configurer l'API Directe

Apprenez comment intégrer l'API Direct d'Affirm sur votre site pour initier et autoriser des transactions. Ce guide vous accompagne dans l'intégration d'Affirm.js, configurer l'objet de caisse, gérer les rappels et autoriser les paiements.

Suggérer des modifications

Disponibilité des pays

USA USA
Canada Canada
UK 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).

Conditions préalables

Étapes

1. Intégrer Affirm JS (AFJS)

Ajoutez le script Affirm.js au <head> sur votre site. Le script se charge directement depuis le domaine Affirm.

🚧

Clés API Sandbox

Utilisez uniquement vos clés API et votre domaine d’environnement de test pendant les essais et le développement. Cela garantit que vous ne modifiez pas accidentellement les transactions en direct.

💻
Intégrer Affirm .js
Ouvrir la recette
<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>

2. Configurer et afficher l’objet de caisse

Appelez le affirm.checkout() avec les détails de votre commande, puis utilisez affirm.checkout.open() pour lancer la modale de paiement Affirm.

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
  }]
});
affirm.checkout.open();

3. Gérer le rappel et récupérer le checkout_token

Après un paiement réussi, Affirm envoie une checkout_token au user_confirmation_url via HTTP POST ou GET, selon votre configuration. Gérez cela sur votre système principal.

Vous pouvez également utiliser un rappel JavaScript en mode de paiement modal pour récupérer le jeton.

4. Autoriser la transaction.

Envoyez une requête POST au point de terminaison /transactions pour autoriser l’achat :

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

Enregistrez l'identifiant de transaction renvoyé pour référence future :

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

5. Error Handling

Si des problèmes surviennent lors du processus de caisse, une fenêtre modale d'erreur s'affiche. Vous pouvez définir une fonction de rappel pour lorsque ce modal est fermé :

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

🚧

Commerçants voyageurs

Si vous êtes un commerçant voyageur, vous devez inclure l'objet itinéraire dans la requête de caisse.

Quelle est la prochaine étape?

Mis à jour 16 days ago