Checkout UI

📘

Are You On an eCommerce Platform?

Use our dedicated eCommerce plugins to get started - no integration work needed. More details can be found in the eCommerce Platforms section

ChargeAfter provides a simple JavaScript module called Checkout, which can be embedded into the merchant's website. The merchant’s website can present the modal box to the consumer in order to launch the checkout flow using ChargeAfter. The modal box securely collects relevant details provided by the consumer, proposes a selection of targeted financing offers, and facilitates the legal process of selecting and confirming an offer.

At the end of the checkout flow, ChargeAfter will provide the merchant with a confirmation token that can be used to securely commit a charge, thus completing the payment.

<script type="text/javascript">
    var caConfig = {
        apiKey: 'public-api-key',
        // Optional:
        storeId: 'your-store-id',
        // Optional:
        delegatedMerchantId : '<merchant id to act on behalf of>'
    };

    !function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
    e.ChargeAfter || (e.ChargeAfter = {}),
    t.getElementById(a)||(e.ChargeAfter.cfg = n,(r=t.createElement(c)).id=a,
    r.src="https://cdn-sandbox.ca-dev.co/web/v2/chargeafter.min.js?t="+1*new Date,
    r.async=!0,o.parentNode.insertBefore(r,o))}
    (window,document,"script","chargeafter-checkout-finance",caConfig);
</script>

<a href="javascript:void(0)" class="ca-checkout-button" onclick="ChargeAfter.checkout.present(opt);" />
<script type="text/javascript">
    var caConfig = {
        apiKey: 'public-api-key',
        // Optional:
        storeId: 'your-store-id',
        // Optional:
        delegatedMerchantId : '<merchant id to act on behalf of>'
    };

    !function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
    e.ChargeAfter || (e.ChargeAfter = {}),
    t.getElementById(a)||(e.ChargeAfter.cfg = n,(r=t.createElement(c)).id=a,
    r.src="https://cdn.chargeafter.com/web/v2/chargeafter.min.js?t="+1*new Date,
    r.async=!0,o.parentNode.insertBefore(r,o))}
    (window,document,"script","chargeafter-checkout-finance",caConfig);
</script>

<a href="javascript:void(0)" class="ca-checkout-button" onclick="ChargeAfter.checkout.present(opt);" />
curl https://api.chargeafter.com/v2/post-sale/charges \
    -X POST \
    -H 'Content-Type: application/json' \
    -H 'Authorization: Bearer private-api-key' \
    -d '{"confirmationToken":"received-token"}'

What’s Next