Afterpay "Buy Now, Pay Later" Now Available

We’re excited to announce that Square now offers the ability for developers and partners to integrate Afterpay into their online checkout flow through the Square Web Payments SDK. Afterpay is a global leader in the buy now, pay later (BNPL) space with more than 20M customers signed up in North America and nearly 100K businesses accepting it globally. It enables customers to pay for transactions in four interest-free installments while businesses get paid the full amount upfront. With Afterpay, businesses report a 20% increase in cart conversion and improved customer retention, with approximately 90% of underlying monthly sales coming from repeat customers.

Before today, developers could build separate integrations with Square and Afterpay APIs. With this release, developers can:

• Integrate Afterpay into their checkout flow with a few lines of code. Instead of building two separate integrations, developers can now add a few lines of code within the Square Web Payments SDK to enable Afterpay in their Square-powered online checkout flow.

• Maintain a single integration for Square and Afterpay payments. This decreases the developer resources required to build multiple integrations and reduces the maintenance costs associated with maintaining multiple integrations.

• Consolidate transaction data in Square Dashboard. With a single integration, all Square and Afterpay funds flow into sellers’ Square accounts for simpler cash flow management.

"Afterpay via the Square Web Payments SDK is more than just a payment method. This release enables developers and partners to build an innovative commerce solution that attracts new shoppers and drives incremental revenue for businesses, all through a single integration with Square. Our robust developer platform and developer documentation simplify the integration process so developers can get up and running smoothly."
- Marylise Tauzia, Head of Developer Relations at Square

How it works

Below is a short walk-through of how to integrate Afterpay into your Web Payments SDK integration. For a full walk-through, view our developer documentation.

First, add an element for attaching Afterpay.

<div id="afterpay-button"></div>

Then, build a payment request object.

 function buildPaymentRequest(payments) {
   const req = payments.paymentRequest({
     countryCode: 'US',
     currencyCode: 'USD',
     total: {
       amount: '1.00',
       label: 'Total',
     },
     requestShippingContact: true,
   });

   req.addEventListener('afterpay_shippingaddresschanged', function (_address) {
     return {
       shippingOptions: [
         // List your shipping options
         amount: '0.00',
           id: 'shipping-option-1',
           label: 'Free',
           taxLineItems: [
             {
               amount: '0.10',
               label: 'Tax'
             }
           ],
           total: {
             amount: '1.10',
             label: 'total',
           }
         },
       ],
     };
   });

   return req;
 }

Initialize and attach Afterpay.

 async function initializeAfterpay(payments) {
   const paymentRequest = buildPaymentRequest(payments);
   const afterpay = await payments.afterpayClearpay(paymentRequest);
   await afterpay.attach('#afterpay-button');

   return afterpay;
 }

 document.addEventListener('DOMContentLoaded', async function () {
   let payments;
   try {
     payments = window.Square.payments(appId, locationId);
   } catch (e) {
     console.error(e)
   }

   let afterpay;
   try {
     afterpay = await initializeAfterpay(payments);
   } catch (e) {
     console.error(e);
   }
//...

Finally, set your event listener for when to start checkout.

//...
   async function handlePaymentMethodSubmission(event, paymentMethod) {
     event.preventDefault();

     try {
       const token = await tokenize(paymentMethod);
       const paymentResults = await createPayment(token);
       displayPaymentResults('SUCCESS');

       console.debug('Payment Success', paymentResults);
     } catch (e) {
       cardButton.disabled = false;
       displayPaymentResults('FAILURE');
       console.error(e.message);
     }
   }

   if (afterpay) {
     const afterpayButton = document.getElementById('afterpay-button');
     afterpayButton.addEventListener('click', async function (event) {
       await handlePaymentMethodSubmission(event, afterpay);
     });
   }
 });

Get started

Afterpay is available to developers and partners in the U.S. and Australia through Web Payments SDK. To start building, check out our developer documentation, technical reference, and payments pricing. As always, please share your feedback in our community Slack channel or Square Developer Forums. If you want to keep up to date with the rest of our content, be sure to follow this blog and our Twitter account!