Affirm Integration Guide for Split Capture
Integrate Affirm easily by adding Affirm.js, setting up a checkout form, and securely processing transactions. Offer flexible payment options, customize the experience to match your brand, and ensure a smooth, secure checkout for your customers.
Aperçu
Offering Affirm as a payment option on your site consists of creating a checkout form, securely tokenizing customer information, and using that checkout_token
to initiate a charge.
Nous faisons en sorte que l'expérience d'achat soit facile et sans stress :
- A simple application requiring a few pieces of information for a real-time decision.
- More purchasing power for your customers with flexible payment options.
- Customization and branding options that integrate harmoniously with your site.
- A seamless and secure transaction experience for you and your customers.
How It Works
Affirm checkout streamlines the process of gathering customer details when they choose Affirm for payment. After customers submit their information, you create a checkout object. Affirm then redirects the customer to a platform or displays a modal, where they sign in or sign up to review and confirm their loan terms. Once they complete the process, Affirm redirects the customer back to your site’s confirmation page.
1. Configurez votre compte Affirm
Before you begin, you must create an Affirm account. This account provides access to your merchant account credentials. To start your integration process, sign in to your account.
2. Ajouter Affirm.js
Clés API Sandbox
Utilisez uniquement les clés et le domaine d'API de votre sandbox à des fins de test et de développement. Cela garantit que vous ne modifiez pas accidentellement vos transactions en direct.
Include the following script in the head section on every page on your site. The script always loads directly from the Affirm domain.
<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>
L'ajout de Affirm.js
crée une instance d'Affirm sur votre client. Cela vous donne accès aux méthodes suivantes dans l'objet Affirm pour déclencher plusieurs actions:
affirm.checkout({ })
- Stores the checkout object and is used for the checkout request payload.affirm.checkout.post()
- Sends the checkout object viaPOST
request.
3. Initier la caisse
Rendering the Affirm checkout allows your customers to use Affirm to pay for purchases on your site. You create a checkout object and launch the checkout process with the Checkout function.
Créer un objet checkout
Vous pouvez trouver plus de renseignements sur la façon de créer un objet de paiement via notre bibliothèque Javascript Affirm.
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": "joedoe@123fakestreet.com"
},
"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": "joedoe@123fakestreet.com"
},
"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"]
],
}],
"shipping_amount": 1000,
"tax_amount": 500,
"total": 5997
});
affirm.checkout.open()
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.
- La configuration sur
POST
envoie lecheckout_token
dans le corps de la demande HTTP (paramètre par défaut). - En lui donnant la valeur
GET
, on envoie lecheckout_token
dans la chaîne de requête de la demande HTTP .
5. Créer une transaction
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 traité via notre API Transaction.
Mis à jour about 2 months ago