For an overview of the Apply flow, see Apply Overview.

Apply Button

📘

Better Safe Than Sorry

There's an option to add a callout or button to launch an Apply flow from anywhere on the merchant's website, but it must be in compliance with the regulatory requirements with regards to financing. Contact our support team via email for technical guidance, compliance guidance and visual assets.

The code sample below demonstrates how the Apply button is configured:

function apply(){
  ChargeAfter.payments.present('apply')
}
<button id="my-chargeafter-apply-button" onclick="apply()">Apply</button>

Launching the Apply Flow

📘

Prerequisites

The SDK must already be loaded in the current page for the Apply flow to work.

After loading the SDK, you can launch the Apply UI with the ChargeAfter.payments.present('apply') function.

📘

Script Loading

To avoid any impact to the performance of your website, the script is loaded asynchronously. This means that the ChargeAfter.payments.present('apply') function might not be available immediately after script load.

An example for the integration is presented below:

// Present the Apply UI modal box and pass it an options object

ChargeAfter.payments.present.('apply')
  // This object is completely OPTIONAL, but recommended
  {
    // If you are in posession of the details, it will pre-fill the application and 		
    // provide a better customer experience
    consumerDetails: {
        firstName: "John",
        lastName: "Doe",
        email: "[email protected]",      	
        merchantConsumerId: "merchant-internal-consumer-id",
        shippingAddress: {
            line1: "3 My Street",
            line2: "My Building, 4th floor",
            city: "New York",
            zipCode: "10019",
            state: "NY"
        },
        billingAddress: {
            line1: "3 My Street",
            line2: "My Building, 4th floor",
            city: "New York",
            zipCode: "10019",
            state: "NY"
        }
    },
    
    preferences: { 
      language: 'En' 
    },
  
    currency : 'USD',
    
    // This object is OPTIONAL
		filter: {
      creditTiers : ["SubPrime"], //possible value Prime, NearPrime, SubPrime
    }
    
    // optional string-string/number/Boolean/Date map
    // tags: {property: 'value'}
    
    // This callback allows you to process the result of the application process
    // see onComplete callback page for details
    callback: function(data, error) {    
    },
});

👍

Sharing is Caring about the Customer

It is recommended to provide all the available customer information when launching the ChargeAfter Apply UI. It enables ChargeAfter to pre-populate some values, providing the consumer with a better experience and increasing conversion rates.

shippingAddress and billingAddress Objects

🚧

Billing and Shipping Address

As an anti-fraud measure, billingAddress and shippingAddress (if provided) must be the same, otherwise, the checkout will not work.

preferences Object

The preferences object is optional, and has the following fields:

onComplete Callback

For information on the completion callback that is sent at the end of the Apply flow, see onComplete.

After the Apply Flow

If the consumer receives a full offer from a financing provider, an account token is returned to the merchant that can be used to create a charge to the client/provider.

For more information on how to continue from a full Apply flow to a Checkout flow, see Creating a Charge.