Afterpay is a payment gateway that offers your customers an easy way to pay over time for their purchases. Afterpay breaks transactions into four equal installments due every two weeks. With Afterpay, you can improve the conversion rate, reduce cart abandonment, and increase average order value. Best of all, Afterpay settles the full amount up-front and assumes any credit and fraud risk.
Afterpay is branded as Clearpay for the UK market. For more information on Clearpay, see Connecting with Clearpay.
Requirements
- Your store must be using Optimized One Page Checkout.
- If additional payment gateways are enabled, they must be compatible with Optimized One Page Checkout.
- Your store must be located in Australia, New Zealand, Canada, the United Kingdom, or the United States.
- Your store must be using one of the following currencies: AUD, NZD, CAD, or USD
- Manage Payments and Manage Settings user permissions must be enabled.
Setting Up Afterpay
If you do not currently have an Afterpay merchant account, you can apply for one.
Once you have an account, use the steps below to connect it with your store.
1. Go to Settings › Payments.
2. Click the ▼ icon next to Online Payment Methods.
3. Locate Afterpay and click Set up beside it.
4. Enter the credentials from your Afterpay merchant account into their corresponding Merchant ID and Secret Key fields, then configure the transaction type and test mode.
- Merchant Id — merchant ID that was supplied during account creation
- Secret Key — secret key that was supplied during account creation
- Transaction Type — can be set to Authorize & Capture or Authorize Only. Authorize Only allows you to capture the funds manually. See Manually Capturing Transactions (Authorize Only) to learn more.
- Test Mode — set this to Yes to test checkout flow. Make sure this is set to No when your store goes live. To use Test Mode, you will need Afterpay Sandbox Credentials. Please reach out to your Afterpay Delivery Manager for assistance in obtaining these credentials.
5. Save your changes.
Not every order will qualify for "pay over time" financing. We recommend offering additional payment methods to ensure everyone can check out successfully.
Installing the Afterpay Banner
These instructions require editing code! Before making any changes to theme template files, back up your current theme customizations. If you are not comfortable adjusting code, see our Partner Directory or or consider using our Agency Design Request program to work with a Certified Design Partner. Due to our Design Policy, our Technical Support is unable to edit code or make design changes.
Part of the Afterpay experience is displaying the Afterpay banner on product pages. Follow the instructions below to add the banner to your Stencil theme. If your store is using Blueprint, see Blueprint Themes for more information.
1. Go to Storefront › Script Manager and click Create a Script.
2. Select the following while setting up the script. We recommend "Afterpay banner" as the name of the script, and entering in a description for what the script will do ("Afterpay banner on product pages").
- Location on page — Footer
- Select pages where script will be added — Store pages
- Script category — Essential
- Script type — Script
- Load method — Default
3. Copy and paste the script below into Script Contents:
<!-- Begin Afterpay Stencil Snippet for BigCommerce v3.1.1 -->
<script>
{{#or (if page_type '===' 'product') (if page_type '===' 'cart')}}
(function(){
const supported = ["AUD", "NZD", "USD", "CAD"];
const currency = '{{currency_selector.active_currency_code}}';
if (supported.indexOf(currency) > -1) {
{{#if page_type '===' 'product'}}
let targetSelector = '.productView .productView-price';
{{#if product.price.with_tax}}
let priceSelector = '.productView-price .price--withTax';
let cachedAmount = '{{product.price.with_tax.value}}';
{{else}}
let priceSelector = '.productView-price .price--withoutTax';
let cachedAmount = '{{product.price.without_tax.value}}';
{{/if}}
{{else if page_type '===' 'cart'}}
let targetSelector = 'ul.cart-totals li.cart-total:last-child';
let priceSelector = '.cart-total-grandTotal';
let cachedAmount = '{{cart.grand_total.value}}';
{{/if}}
const locales = {
AUD: 'en_AU',
NZD: 'en_NZ',
USD: 'en_US',
CAD: 'en_CA',
};
const init = function(){
Afterpay.createPlacements({
targetSelector: targetSelector,
attributes: {
locale: locales[currency],
currency: currency,
amount: cachedAmount,
}
});
};
const script = document.createElement('script');
script.src = "https://js.afterpay.com/afterpay-1.x.js";
script.dataset.min = "1.00";
script.dataset.max = "2000.00";
script.onload = function () {
init();
setInterval(() => {
if (cachedAmount != document.querySelector(priceSelector).innerText) {
cachedAmount = document.querySelector(priceSelector).innerText;
if (document.querySelector('afterpay-placement')) {
document.querySelector('afterpay-placement').dataset.amount = cachedAmount;
} else {
init();
}
}
}, 400);
};
document.head.appendChild(script);
}
})();
{{/or}}
</script>
<!-- End Afterpay Stencil Snippet for BigCommerce v3.1.1 -->
You can modify the script so that the banner will only display a price breakdown if the product meets your order minimum and maximum thresholds.
To do so, you will need to edit the following values within the script and set the minimum and maximum values to mirror your Afterpay account settings.
script.dataset.min = "1.00"; script.dataset.max = "800.00";
Banner not showing up? Sometimes the script may not work because the HTML elements may be named differently, depending on your theme. If this is the case, work with your developer to help update the script for your store's theme.
Checkout Experience
When your customer is checking out, they'll be given the option to pay with Afterpay or choose another payment method that you have enabled.
When choosing Afterpay, they will be redirected to the Afterpay portal detailing the payment amount, payment frequency, and the amount that is due at time of checkout.
Common Questions
General
What financing options can I offer using Afterpay?
Afterpay splits payments over four equal installments due every two weeks.
Are there any other financing options?
Four equal installments are the only option at this time.
What items are restricted for merchants to sell?
This varies by market. After submitting your application form, Afterpay will review and contact you with additional information regarding the approval process. All products must be physical products; digital products will not work with Afterpay.
I am using another payment gateway. Can Afterpay be added as an alternative payment method (APM)?
Yes, Afterpay can be added as an APM with Adyen. See Afterpay for more information.
Pricing and Fees
What fees are associated with Afterpay?
Merchant fees are determined on a merchant-by-merchant basis. Afterpay is interest-free and consumers are only charged late fees.
Account Eligibility
What countries does Afterpay support?
Our integration currently supports merchants based in Australia, New Zealand, Canada, the United States, and the United Kingdom.
Does Afterpay support multi-currency?
Yes, Afterpay supports multi-currency with the following currencies: AUD, NZD, CAD, and USD.
In order to offer Afterpay to your shoppers in multiple transactional currencies, you will need separate Afterpay accounts for each region/currency you want to sell into. This is not the same as having a single Afterpay account.
Transactions
How long until a transaction's funds are transferred to my account?
This is based on your merchant agreement with Afterpay.
Does Afterpay support manual capture?
Yes, Afterpay can be set up with a transaction type of Authorize Only, allowing you to delay capture. Capture must be performed within 13 days of authorization.
How much can a shopper spend with Afterpay?
When determining which orders to approve, Afterpay considers a number of different factors. For example, the longer they have been a customer with Afterpay, and the more orders they have successfully repaid, the more likely it is they will be able to spend more on orders. Customers can check this information by logging in to Afterpay.
Can I edit an Afterpay order after it has been approved?
There are no restrictions to prevent you from editing an Afterpay order, such as changing the email associated with the order, exchanging one product for another product of the same price, or updating the shipping address. It should be noted however that updating these details in BigCommerce will not update the Afterpay order.
Additionally, order edits cannot be used to authorize or capture additional items or charges. If you need to adjust the transaction to a lesser amount after Authorization, we recommend performing a refund on the order. For more information, see Editing an Order.
Can I set up an order minimum or maximum threshold that shoppers must meet in order to use Afterpay?
Yes, after you save your Afterpay settings, your order minimum and maximum thresholds will be retrieved from your account and displayed on your Afterpay Settings page. Note that this is informational only. Contact Afterpay if you want to change your minimum and maximum order total thresholds on your account.
Refunds
How soon after a transaction can I perform a refund?
A refund can be processed after a capture has been successfully executed on the order.
How do I perform a refund?
Refunds can be performed directly from within the BigCommerce control panel. See Processing Refunds for more information.
Troubleshooting and Payment Disputes
Why is my customer's order being declined?
When determining which orders to approve, Afterpay considers a number of different factors. For example, the longer a customer uses Afterpay and the more orders they have successfully repaid, the more likely they will be able to spend more. Restrictions are tighter for new customers (first six weeks) until Afterpay gets to know them.
Why might an order fail?
The most common reasons for an order failing to be approved by Afterpay is:
- the customer not having sufficient funds on their card
- the customer not entering their card details correctly
How do I contact Afterpay Customer Service?
A request can be submitted through Afterpay's Contact Us page.
