Add The Checkout Button

πŸ“˜

Prerequisites

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

Add the HTML snippet below as a checkout option. The ChargeAfter SDK will locate it and replace the element with 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):

444444

πŸ‘

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.


What’s Next