npm package: @square/adobe-pwa-studio-extension
Description: This is a payment extension for Adobe PWA Studio which provide the Afterpay and Clearpay payment methods in your storefront.
Latest version: 1.2.4

# 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](https://github.com/afterpay/afterpay-magento-2) and/or [Clearpay module](https://github.com/clearpayeu/clearpay-magento-2) 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.

```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;
```

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

_Thu 12 Dec 2024_

**Highlights**

- Improved summary page assets.

**Supported Editions & Versions**

Tested and verified in clean installations of:

- Adobe Commerce Enterprise Edition (EE) version 2.4.7-p1
- Adobe PWA Studio version 13.2.0
- Afterpay for Adobe Commerce version 5.4.2
- Clearpay for Adobe Commerce version 5.4.2

---

### 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](https://github.com/afterpay/afterpay-magento-2) and/or [Clearpay module](https://github.com/clearpayeu/clearpay-magento-2) 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