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>
<script>
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
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>
}
An example for the integration is presented below:
// 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 callback allows you to process the result of the application process
callback: function(data, error) {
},
});
Multi Language and Currency Support
LanguageUse the
preferences
object to passlanguage
for which the Checkout UI will be launched. The expected value should consist of two letters representing the language. The default value isEn
and other languages currently supported are:
- English - En
- French - Fr
CurrencyChargeAfter 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.
Updated 6 months ago