Configurer l'API Directe
Learn how to integrate Affirm's Direct API on your site to initiate and authorize transactions. This guide walks you through embedding Affirm.js, setting up the checkout object, handling callbacks, and authorizing payments.
Disponibilité des pays
USA
Canada
UK
API des frais hérités
This integration uses the updated
v1/transactionsAPI endpoints. If you're using our legacyv2/chargesendpoints, see the legacy Web (Charges).
Conditions préalables
- Create an account in the Affirm Merchant Dashboard.
- Review the Transactions API reference.
- (Optional) Review Modal vs. Redirect Checkout.
Étapes
1. Intégrer Affirm JS (AFJS)
Add the Affirm.js script to the <head> on your site. The script loads directly from the Affirm domain.
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.
<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. Configure and Render the Checkout Object
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
checkout_tokenAprè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.
You can also use a JavaScript callback in modal checkout mode to retrieve the token.
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"
}'
Save the returned transaction ID for future reference:
{
"id": "9RG3-PMSE",
"currency": "USD",
"amount": 11500
}
5. Error Handling
If there are issues with the checkout process, an error modal is displayed. You can define a callback for when that modal is closed:
affirm.ui.ready(function() {
affirm.ui.error.on("close", function(){
alert("Please check your contact information for accuracy.");
});
});
Travel Merchants
If you're a travel merchant, you must include the itinerary object in the checkout request.
Quelle est la prochaine étape?
Mis à jour 14 days ago