Add BNPL support via Afterpay and Clearpay

[jeffpaul]

The Square extension currently does not support Buy Now Pay Later (aka BNPL), but the SDK does support it so I'm opening this enhancement issue to consider adding BNPL support (via the Afterpay and Clearpay integrations available via the Square SDK). We'll want to:

• [ ] investigate how Square handles this via their own web interface
• [ ] how it might integrate into the Woo extension user flows
• [ ] work on some light wireframes for how this will work within the extension
• [ ] engineer updates based on wireframes
• [ ] update Woo.com documentation noting any settings/config for this feature

[jeffpaul]

@vikrampm1 can you please work on identifying how Square integrates this on their web admin/dashboard side of things / grab details on how they market this on their website?

[vikrampm1]

@jeffpaul I am looking into it, will add details here as soon as I find something.

[vikrampm1]

Afterpay overview - https://squareup.com/help/us/en/article/7782-afterpay-and-square

Afterpay - https://squareup.com/us/en/townsquare/what-is-buy-now-pay-later

Clearpay - https://squareup.com/gb/en/buy-now-pay-later

• Afterpay is available only to the sellers in the USA and Australia.
• Clearpay is available to the sellers in UK.

If the sellers/businesses are from a different country, then the afterpay/clearpay option is not available on the Square dashbaord.

Activating Afterpay from Square Dashboard:

[jeffpaul]

It appears that Afterpay/Clearpay became available in the Square PHP SDK Version 17.2.0.20220216 which the Square extension already supports. I'm going to check our test integrations to see if I can already enable this on the Square side and see it update on our Sandbox (in which case, I guess this already works?) though I suspect there likely will still need to be some integration needed within the extension... Update to follow.

[jeffpaul]

After checking out Afterpay, working to configure a test Woo site and test Square site to enable Afterpay, I was not able to see Afterpay as an option on the test Woo site nor how to view them in the Afterpay mobile app.

In researching Afterpay and Square it seems like Afterpay is activated for all eligible Square Online sites (note that's different than a Woo site) as of 11 February 2022. That means that once we ensure the integration is working as expected, that we'll likely want to alert store owners that if they do NOT want Afterpay accepted on their site that they will need to disable that in their Square Dashboard (though worth double-checking if the Square Dashboard defaults for the Afterpay settings within Business > Payment Methods is enabled or not).

Afterpay eligibility for a specific item, total purchase, and for a store itself are based on the following requirements:

• Seller must be in an approved merchant category (specific Merchant Category Codes - MCCs)
• Seller must be based in the United States
• Local delivery orders not supported
• Self-serve (QR) ordering not supported
• Item or cart totals outside of the eligible purchase range not supported (BNPL effective for cart totals between $50 - $2,000 with 0% interest)
• Restricted digital goods or services not supported
• Cross-border orders not supported
• Website must be in English (Spanish support for Afterpay coming in the future)

The above requirements will likely be worthwhile at least linking to from the Woo.com Square product/docs page for any store owner curious if they can make use of Afterpay or why Afterpay may not be appearing for them.

The Square Developer site has details on the Afterpay (and Clearpay) Payments integration with the Payments API in the Web Payments SDK. Assuming that the seller is eligible to accept Afterpay (via the requirements above and technical details noted in the Square Developer docs), then we'll want to ensure that the Afterpay button appears on:

• Cart
• Checkout
• ...and potentially on individual product pages who's dollar value is within the cost thresholds for Afterpay (such that someone could immediately start the purchase flow for a single item similar to the Apple Pay and GPay experiences)

Those integrations should also be tested within the construct of the WooCommerce Blocks cart and checkout blocks experiences as well to ensure things display & work as expected via those blocks as well (product display blocks as well if we go the route of rending Afterpay on specific product pages).

If someone from @woocommerce/10up picks up this issue, note that the test Woo site and test Square site are documented in our Teamwork Notebook as "WooCommerce payments test site" and "Test Square Site" respectively. Note that in setting up those sites that I was not able to successfully get the Woo products to sync to Square, presumably because of our HTTP basic auth and Restricted Site Access (as well as possibly because of needing to be on 10up VPN) so we may need to tweak things on a test site to ensure we're able to properly test things here.

[iamdharmesh]

Hi @jeffpaul,

As we discussed last week, I have checked on this. Square’s test site directly displays the Afterpay button when we enable it from the Square Dashboard. But for the WooCommerce we have to integrate it with WooCommerce's Cart/Checkout flow using Web Payments SDK and CreatePayment from the backend using Square SDK, Something similar to what we are doing with ApplePay/GooglePay and Card Payment currently.

I don't have AfterPay sandbox credentials (as it requires a US mobile number) to check and confirm the whole payment process, but Based on the information I got from Square documentation, we could integrate Afterpay with WooCommerce as below:

1. Initial Integration: In the initial phase of integration, we'll incorporate Afterpay into the traditional cart and checkout processes. A rough development estimate for this task is approximately 4 to 6 weeks (excluding QA and other related activities.) The Afterpay button will be placed on the following pages:

   • Single Product page
   • Cart page
   • Checkout page.

2. Support for WooCommerce Blocks: This phase involves extending Afterpay support to WooCommerce blocks. A rough development estimate for this task is approximately 2 weeks (excluding QA and other related activities.). Specific tasks include:

   • Enabling compatibility with Cart and Checkout blocks
   • Potentially add support for the "Single Product" block (pending feasibility assessment)

Reference links: https://developer.squareup.com/docs/web-payments/add-afterpay https://developer.squareup.com/docs/payments-api/take-payments/afterpay-payments

Note: Afterpay/Clearpay is not available to all countries (Available to countries listed here) and there are some Square Online eligibility for the same as well.

Thanks cc: @vikrampm1