HomeGetting StartedSolutionsplatformsGlobal Integration
DocsAPI referenceAPI referenceRecipesChangelog
HomeGetting StartedSolutionsplatformsGlobal IntegrationLog In
Docs

Set Up Split Capture

Easily integrate Affirm Split Capture to offer flexible payment options, customize the experience to match your brand, and ensure a smooth, secure checkout for your customers.

Suggest Edits

Country Availability

USA USA
Canada Canada

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

What’s Next?

Updated 10 days ago