Browse by Topic

Connecting with Afterpay

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 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.

 
 

Requirements

 
 

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 Store SetupPayments.

2. Click the icon next to Online Payment Methods.

Online Payments Methods

3. Locate Afterpay and click Set up beside it.

Afterpay set up button

4. You will be taken to the Afterpay Settings tab. Enter the credentials from your Afterpay merchant account into their corresponding fields.

  • Merchant Id — merchant ID that was supplied during account creation
  • Secret Key — secret key that was supplied during account creation

Afterpay Settings

5. Save your changes.

 

Note: Not every order will qualify for "pay over time" financing. We recommend offering additional payment methods to ensure everyone can checkout 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 BigCommerce Community Ask a Design Partner Group for assistance. 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 according to which theme platform your store uses. See Which Theme Platform do I have? if you are unsure which theme platform your store uses.

Stencil

To add the banner, you will need to Edit Stencil Theme Files and find product.html.

 

Banner not showing up? For many Stencil themes, pasting this code into product-view.html may work. The HTML files may be named differently depending on your theme.

Copy the script provided below and paste it into product.html:

    <!-- Begin Afterpay Stencil Snippet for BigCommerce v1.0.2 -->
<p style="display:block; font-size:14px;">
  or make 4 interest-free payments of
  {{#if product.price.with_tax}}
    <strong class="afterpay-instalments">${{toFixed (divide product.price.with_tax.value 4) 2}}&nbsp;AUD</strong>
  {{else}}
    <strong class="afterpay-instalments">${{toFixed (divide product.price.without_tax.value 4) 2}}&nbsp;AUD</strong>
  {{/if}}
  fortnightly with
  <a style="display:inline-block; margin-bottom:10px;" target="_blank" href="https://www.afterpay.com.au/terms">
    <img style="vertical-align:middle;" src="https://static.afterpay.com/integration/product-page/logo-afterpay-colour.png" srcset="https://static.afterpay.com/integration/product-page/logo-afterpay-colour.png 1x, https://static.afterpay.com/integration/product-page/logo-afterpay-colour@2x.png 2x, https://static.afterpay.com/integration/product-page/logo-afterpay-colour@3x.png 3x" width="100" height="21" alt="Afterpay">
    <span style="font-size:12px"> <u>More info</u> </span> 
  </a>
</p>
<!-- End Afterpay Stencil Snippet for BigCommerce v1.0.2 -->

This Afterpay snippet for Stencil does not include pricing installment logic yet.The logo and first installment amount will always display for any product, even if the product is not eligible for purchase with Afterpay.

Blueprint

Access your themes template files by going to Storefront › Templates Files. Find the file product.html.

Use the script below and copy it to product.html:

<!-- Begin Afterpay Blueprint Snippet for BigCommerce v1.1.3 -->
<p class="afterpay-paragraph" style="display:block; margin-top:0.3rem;">
    or make 4 interest-free payments of
    <strong class="afterpay-instalments"></strong>
    fortnightly with
    <a style="display:inline-block; margin-bottom: 10px;" target="_blank" href="https://www.afterpay.com.au/terms">
        <img style="vertical-align:middle;" src="https://static.afterpay.com/integration/product-page/logo-afterpay-colour.png" srcset="https://static.afterpay.com/integration/product-page/logo-afterpay-colour.png 1x, https://static.afterpay.com/integration/product-page/logo-afterpay-colour@2x.png 2x, https://static.afterpay.com/integration/product-page/logo-afterpay-colour@3x.png 3x" width="100" height="21" alt="Afterpay">
        <span style="font-size:12px"> <u>More info</u> </span> 
    </a>
</p>
<script type="text/javascript">
    var ProductPrice = %%GLOBAL_RawProductPrice%%;
    var AfterpayInstalmentAmount = %%GLOBAL_RawProductPrice%% / 4;
    // The following two values should match the payment limits applied to your Afterpay merchant account.
    // Please update these as required. This will ensure the Afterpay elements will not display on the
    // product pages of ineligible products.
    var AfterpayMinimumAmount = 0.04;
    var AfterpayMaximumAmount = 1000.00;
    if(ProductPrice >= AfterpayMinimumAmount && ProductPrice <= AfterpayMaximumAmount) {
      $('.afterpay-instalments').html('$' + AfterpayInstalmentAmount.toFixed(2) + '&nbsp;AUD');
    } else {
        $('.afterpay-paragraph').hide();
    }
    $(document).ajaxComplete(function(event, xhr, settings) {
      if (settings.url == '/remote.php' && settings.dataType == 'json') {
        var data = $.parseJSON(xhr.responseText);
        if (data && data.success && data.details) {
          if (data.details.instock && data.details.purchasable
              && data.details.unformattedPrice
              && data.details.unformattedPrice >= AfterpayMinimumAmount && data.details.unformattedPrice <= AfterpayMaximumAmount) {
            AfterpayInstalmentAmount = data.details.unformattedPrice / 4;
            $('.afterpay-paragraph').show();
            $('.afterpay-instalments').html('$' + AfterpayInstalmentAmount.toFixed(2) + '&nbsp;AUD');
          } else {
            $('.afterpay-paragraph').hide();
          }
        }
      }
    });
</script>
<!-- End Afterpay Blueprint Snippet for BigCommerce v1.1.3 -->

 
 

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 presented with a pop-up detailing the payment amount, payment frequency and the amount that is due at time of checkout.

Afterpay checkout modal

 
 

Common Questions

General

Q: What financing options can I offer using Afterpay?

  • Afterpay splits payments over four equal installments due every two weeks.

Q: Are there any other financing options?

  • Four equal installments is the only option at this time.

Q: 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.
  • Products must be physical project, downloadable products will not work with Afterpay.

Pricing and Fees

Q: What fees are associated with Afterpay?

  • Merchant fees are determined on a merchant-by-merchant basis. The only fees applied to consumers are late fees.

Account Eligibility

Q: What countries and currencies does Afterpay support?

  • Our integration currently supports Australia (AUD).

Transactions

Q: How long until a transaction's funds are transferred to my account?

  • This is based on your merchant agreement with Afterpay.

Q: How much can a shopper spend with Afterpay?

  • When determining which orders to approve, Afterpay considers a number of different factors. As an example, the longer they have been a customer with Afterpay and the more orders they have successfully repaid, the more likely they will be able to spend more.

Q: Can I edit an Afterpay order after it has been approved?

  • Once Afterpay has approved an order, the order details and order value cannot be changed. Afterpay does not support the addition of items to an order.

Refunds

Q: 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.

Q: How do I perform a refund?

  • Refunds will be performed within the Afterpay Merchant Portal.

Troubleshooting and Payment Disputes

Q: 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.

Q: 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

Q: How do I contact Afterpay Customer Service?

Was this article helpful?