Set Up Split Capture

Prerequisites

Set up your Affirm account to access to your merchant account credentials.

Steps

1. Add Affirm.js

Add the Affirm.js script to the <head> on your site. The script loads directly from the Affirm domain.

🚧
Sandbox API Keys
Use only your sandbox API keys and domain during testing and development. This ensures that you don't accidentally modify live transactions.

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

Adding Affirm.js creates a defined instance of Affirm on your client. This grants you access to the following methods within the Affirm object to trigger multiple actions:

affirm.checkout({ }) - Stores the checkout object and is used for the checkout request payload.
affirm.checkout.post() - Sends the checkout object via POST request.

2. Initiate Checkout

Create a checkout object and launch the checkout process with the Checkout function. Rendering the Affirm checkout enables your customers to use Affirm to pay for purchases on your site.

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": "[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":           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()

📘
Create a Checkout Object
You can find more information on how to create a checkout object via our Affirm Javascript library.

3. Handle Callbacks

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, we send this request via POST. You can configure the checkout object so that we send this request via GET.

To choose how we send the checkout_token, you can set the user_confirmation_url_action parameter in the checkout object to:

POST to send the checkout_token in the body of the HTTP request (default setting).
GET to send the checkout_token in the query string of the HTTP request.

4. Create a Transaction

When a customer successfully completes a checkout, it’s recorded as a new purchase attempt. This must be handled on your server-side to be fulfilled by our Transaction API.

Prerequisites

Steps

1. Add Affirm.js

Sandbox API Keys

2. Initiate Checkout

Create a Checkout Object

3. Handle Callbacks

4. Create a Transaction

What’s Next?