Afterpay and Clearpay extension for Adobe PWA Studio

This is a payment extension for Adobe PWA Studio which provide the Afterpay and Clearpay payment methods in your storefront.

Installation

You can add the extension to your project using yarn or npm:

yarn add @square/adobe-pwa-studio-extension

Alternatively, you can install it manually:

1. Create a new directory in your project root: @square/adobe-pwa-studio-extension.
2. Clone the repository contents into the new directory using git clone.
3. Register the extension: yarn add file:./@square/adobe-pwa-studio-extension.

Usage

After installation, the Afterpay and Clearpay payment methods will be automatically added to the checkout of your Adobe PWA Studio storefront.

Please note that these payment methods need to be configured on the backend side, using version 5.1.2 or above of the Afterpay module and/or Clearpay module for Adobe Commerce.

If you also want to add the Messaging Widget to the Product page, MiniCart, Cart page and/or add the logo for the Afterpay/Clearpay payment method to the checkout page, you'll need to edit the local-intercept.js file in your project root.

The local-intercept.js file is where the PWA Studio's extensibility framework allows you to modify existing components with custom functionality.

The following example code provided will import the Messaging Widget from the Square extension and integrate it into the Product Full Detail, Price Summary, and Mini Cart components and it will add the logo for the Afterpay/Clearpay payment method to the checkout page.

function localIntercept(targets) {
    const {Targetables} = require('@magento/pwa-buildpack');
    const targetables = Targetables.using(targets);

    const ProductFullDetailComponent = targetables.reactComponent('@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js');
    const PriceSummaryComponent = targetables.reactComponent('@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js');
    const MiniCartComponent = targetables.reactComponent('@magento/venia-ui/lib/components/MiniCart/miniCart.js');
    const RadioComponent = targetables.reactComponent('@magento/venia-ui/lib/components/RadioGroup/radio.js');

    ProductFullDetailComponent.addImport("MessagingWidget from '@square/adobe-pwa-studio-extension/src/components/messagingWidget/messagingWidget.js'");
    PriceSummaryComponent.addImport("MessagingWidget from '@square/adobe-pwa-studio-extension/src/components/messagingWidget/messagingWidget.js'");
    MiniCartComponent.addImport("MessagingWidget from '@square/adobe-pwa-studio-extension/src/components/messagingWidget/messagingWidget.js'");
    MiniCartComponent.addImport("extraStyles from '@square/adobe-pwa-studio-extension/src/components/extraCss/MiniCart/extra.css'");
    RadioComponent.addImport("CheckoutMessaging from '@square/adobe-pwa-studio-extension/src/components/checkoutMessaging/checkoutMessaging.js'");

    // DEFINE SQUARE PAYMENT TYPE START
    const squarePaymentType = 'afterpay'; // options: afterpay or clearpay
    // DEFINE SQUARE PAYMENT TYPE END

    ProductFullDetailComponent.insertAfterJSX(
        '<section className={classes.title}>',
        `<MessagingWidget price={productDetails.price} applyExtraStyles={true} paymentType='${squarePaymentType}' componentPage='productPage'/>`
    );
    PriceSummaryComponent.insertBeforeSource(
        '{proceedToCheckoutButton}',
        `<MessagingWidget price={total} paymentType='${squarePaymentType}' componentPage='checkoutPage' />`
    );
    MiniCartComponent.insertAfterSource(
        '<div className={classes.footer}>',
        `<MessagingWidget price={subTotal} paymentType='${squarePaymentType}' componentPage='minicart' />`
    );
    MiniCartComponent.addJSXClassName(
        'div ref={ref} className={contentsClass}',
        `extraStyles.extraHeight`
    );
    RadioComponent.replaceJSX(
        'span className={classes.label}',
        `<span className={classes.label}>{value === '${squarePaymentType}' ? <CheckoutMessaging paymentType='${squarePaymentType}'/> : (label || (value != null ? value : ''))}</span>`
    );
}
module.exports = localIntercept;

The widget displays payment information based on the price of the product and applies extra styles to the Mini Cart component.

The example uses the Afterpay brand. To display the Clearpay brand instead, change the squarePaymentType const value to clearpay, like so: const squarePaymentType = 'clearpay';.

To apply these changes to your storefront, rebuild your application:

yarn watch for local env and yarn build for production build.

Please refer to the full code in this repository for more details.

Changelog

Version 1.2.1

Tue 12 Mar 2024

Highlights

• Update the README.md

Supported Editions & Versions

Tested and verified in clean installations of:

• Adobe Commerce Enterprise Edition (EE) version 2.4.6-p3
• Adobe PWA Studio version 13.2.0
• Afterpay for Adobe Commerce version 5.3.0
• Clearpay for Adobe Commerce version 5.3.0

Version 1.2.0

Tue 12 Mar 2024

Highlights

• Updated checkout assets in preparation for future improvements.
• Update the local-intercept.js

function localIntercept(targets) {
    const {Targetables} = require('@magento/pwa-buildpack');
    const targetables = Targetables.using(targets);

    const ProductFullDetailComponent = targetables.reactComponent('@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js');
    const PriceSummaryComponent = targetables.reactComponent('@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js');
    const MiniCartComponent = targetables.reactComponent('@magento/venia-ui/lib/components/MiniCart/miniCart.js');
    const RadioComponent = targetables.reactComponent('@magento/venia-ui/lib/components/RadioGroup/radio.js');

    ProductFullDetailComponent.addImport("MessagingWidget from '@square/adobe-pwa-studio-extension/src/components/messagingWidget/messagingWidget.js'");
    PriceSummaryComponent.addImport("MessagingWidget from '@square/adobe-pwa-studio-extension/src/components/messagingWidget/messagingWidget.js'");
    MiniCartComponent.addImport("MessagingWidget from '@square/adobe-pwa-studio-extension/src/components/messagingWidget/messagingWidget.js'");
    MiniCartComponent.addImport("extraStyles from '@square/adobe-pwa-studio-extension/src/components/extraCss/MiniCart/extra.css'");
    RadioComponent.addImport("CheckoutMessaging from '@square/adobe-pwa-studio-extension/src/components/checkoutMessaging/checkoutMessaging.js'");

    // DEFINE SQUARE PAYMENT TYPE START
    const squarePaymentType = 'afterpay'; // options: afterpay or clearpay
    // DEFINE SQUARE PAYMENT TYPE END

    ProductFullDetailComponent.insertAfterJSX(
        '<section className={classes.title}>',
        `<MessagingWidget price={productDetails.price} applyExtraStyles={true} paymentType='${squarePaymentType}' componentPage='productPage'/>`
    );
    PriceSummaryComponent.insertBeforeSource(
        '{proceedToCheckoutButton}',
        `<MessagingWidget price={total} paymentType='${squarePaymentType}' componentPage='checkoutPage' />`
    );
    MiniCartComponent.insertAfterSource(
        '<div className={classes.footer}>',
        `<MessagingWidget price={subTotal} paymentType='${squarePaymentType}' componentPage='minicart' />`
    );
    MiniCartComponent.addJSXClassName(
        'div ref={ref} className={contentsClass}',
        `extraStyles.extraHeight`
    );
    RadioComponent.replaceJSX(
        'span className={classes.label}',
        `<span className={classes.label}>{value === '${squarePaymentType}' ? <CheckoutMessaging paymentType='${squarePaymentType}'/> : (label || (value != null ? value : ''))}</span>`
    );
}
module.exports = localIntercept;

Supported Editions & Versions

Tested and verified in clean installations of:

• Adobe Commerce Enterprise Edition (EE) version 2.4.6-p3
• Adobe PWA Studio version 13.2.0
• Afterpay for Adobe Commerce version 5.3.0
• Clearpay for Adobe Commerce version 5.3.0

Version 1.1.2

Wed 18 Oct 2023

Highlights

• Load the Sandbox version of the Square Marketplace JS when the Adobe Commerce backend is running in Sandbox mode, and the Production version otherwise.

Supported Editions & Versions

• Adobe Commerce Enterprise Edition (EE) version 2.4.6-p2
• Adobe PWA Studio version 13.2.0
• Afterpay for Adobe Commerce version 5.2.1
• Clearpay for Adobe Commerce version 5.2.1

Version 1.1.1

Thu 14 Sep 2023

Highlights

• Added new attributes to Dynamic Messaging elements.

Supported Editions & Versions

• Adobe Commerce Enterprise Edition (EE) version 2.4.6-p2
• Adobe PWA Studio version 13.2.0
• Afterpay for Adobe Commerce version 5.2.0
• Clearpay for Adobe Commerce version 5.2.0

Version 1.1.0

Mon 04 Sep 2023

Highlights

• Upgraded the JS Library to v2 to support new Dynamic Messaging variants including "Pay Monthly".

Supported Editions & Versions

• Adobe Commerce Enterprise Edition (EE) version 2.4.6-p2
• Adobe PWA Studio version 13.2.0
• Afterpay for Adobe Commerce version 5.2.0
• Clearpay for Adobe Commerce version 5.2.0

Version 1.0.0

Thu 13 Jul 2023

Highlights

• Initial release.
• Adds Afterpay and/or Clearpay to the checkout of an Adobe PWA Studio storefront.
  • Depends on the payment method(s) being configured on the backend side, using version 5.1.2 of the Afterpay module and/or Clearpay module for Adobe Commerce.
• Defines a React MessagingWidget which wraps the AfterpayPlacement WebComponent.
• Provides example code to integrate the MessagingWidget onto the Product Full Detail, Price Summary, and Mini Cart components.

Supported Editions & Versions

Tested and verified in clean installations of:

• Adobe Commerce Enterprise Edition (EE) version 2.4.6
• Adobe PWA Studio version 13.2.0
• Afterpay for Adobe Commerce version 5.1.2
• Clearpay for Adobe Commerce version 5.1.2