- Get your Afterpay Account ID and Secret Key
- Copy and paste Account ID and Secret keys to your Cart Online Store Afterpay setup page.
- Put in your account's Currency Code, supported "USD", "CAD", "AUD", and "NZD".
- Put in API Endpoint. For US and Canada accounts, use https://api.us.afterpay.com. For AU and NZ accounts, use https://api.afterpay.com
- Enable the integration, you are ready to accept Afterpay payment.
If the Afterpay integration is not showing on your One Page Checkout, your theme might be missing the code needed. Paste the following code inside your PaymentTypeArea layout on your One Page Checkout HTML Editor.
<div class="checkout-afterpayWrap payment-method Afterpay list-group-item list-group-item-action hide">
<div class="checkout-afterpay">
<div data-payment-name="Afterpay" class="checkout-afterpay-header payment-name row m-0 align-items-center">
<img class="col-auto p-0" height="40px" src="/store/images/afterpay.png">
</div>
<div style="padding-left:80px;">
<afterpay-placement data-locale="en_US" data-currency="USD" data-amount="##CARTRAWTOTAL##"></afterpay-placement>
</div>
<ac:visibilityarea id="AfterpayArea">
<div class="checkout-afterpay-body card-body">
<span class="checkoutafterpay-placeOrder">
You will be redirected to Afterpay to complete payment once you have clicked <strong>Place Order</strong>.
</span>
</div>
</ac:visibilityarea>
</div>
</div>
You can also advertise that your store accepts Afterpay on your Product Details Pages by adding the following code inside your pricing layout area on your Product Details Page HTML Editor.
<afterpay-placement data-locale="en_US" data-currency="USD" data-amount-selector=".ProductDetailsPrice"></afterpay-placement>
The advertisement will render on your Product Details Page as:
