Add an Application Button

You may add a custom apply button to you website.
The example below shows one way to do that.


Don't Forget To Load The SDK

The ChargeAfter payment SDK must be loaded on the page for this to work properly

<button id="my-chargeafter-apply-button">Apply</button>

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('my-chargeafter-apply-button').addEventListener('click', () => {
        const opt = {
            // populate this object as per the instructions above
				// make sure ChargeAfter object is initialized prior to this line

import { prequalify, CompletionApplyData } from "@chargeafter/payment-sdk";
import { useCallback } from "react";

const ApplyButton = () => {
	const onClick = useCallback(async () => {
  	const retVal: CompletionApplyData = await prequalify({
        config: {
            //optional - use in case of more than a single store
            storeId: "<storeId>",
            env: {
                name: "production",
                apiKey: "<your api key>",
  }, [])
  return <button onClick={onClick}>Click to apply</button>

An example for the integration is presented below:

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

  // 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' 
    currecny : 'USD',
    // This callback allows you to process the result of the application process
    callback: function(data, error) {    


Multi Language and Currency Support


Use the preferences object to pass language for which the Checkout UI will be launched. The expected value should consist of two letters representing the language. The default value is En and other languages currently supported are:

  • English - En
  • French - Fr

ChargeAfter fully supports multi-currency. Followed the ISO 4217 code to set the requested currency. The default value is USD.


Sharing Is Caring (About The Customer)

By sharing with ChargeAfter the information you already have about the customer, even if the API doesn't require it, allows us to pre-populate some of the values, provide the customer with a better experience and increase conversion rates.