Starting the Apply Flow

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

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

</script>

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

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

ChargeAfter.apply.present(
  // 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 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 Callback completion pae for details
    callback: function(data, error) {    
    },
});