Add The Checkout Button

📘

Prerequisites

The code requires the SDK to be loaded in the current page

Add the the HTML snippet below as a checkout option. The ChargeAfter SDK will locate it and replace the element with a the relevant button design based on your ChargeAfter configuration.

<a href="javascript:void(0)" class="ca-checkout-button" data-button-type="medium-generic" onclick="ChargeAfter.checkout.present(opt);"></a>

The above code adds a pre-rendered clickable button that presents the Checkout UI with some opt object. You may change the callback function so that when the button is clicked, your custom function (in which you will call ChargeAfter.checkout.present) will be called.

You can set the data-button-type attribute according the space available to you:

  • small-generic
  • medium-generic (default)
  • large-generic

The image below is an example of one of the button options, in the different sizes (specific branding determined by the setup of the specific financing program):

👍

Make Your Own Button

If you wish to further customize your checkout button, you may do so. Please contact ChargeAfter's merchant onboarding team for guidance and relevant visual assets.


Did this page help you?