amwal-magento-react-button

amwal-magento-react-button

This is a react component for Amwal Checkout button working in conjunction with an installed Amwal Magento API Backend

Installation.

1. Install Amwal Magento Backend

2. Install react component into your react project

npm i amwal-magento-react-button

Usage

import AmwalMagentoReactButton from 'amwal-magento-react-button'

const ReactPage= () => {
    ...
    // add item to cart if the button is on the product page. when used in cart or mini-cart, preCheckoutTask should be left undefined
    const submitAddToCart = async (): Promise<void> => {
      if (!formSelector) return
      const cartForm = document.querySelector(formSelector)
      if (cartForm == null) throw new Error('Product form not found')
      const formURL = cartForm.getAttribute('action') ?? window.location.href
      if (!formURL) throw new Error('Product form URL not found')
      await fetch(formURL, {
        method: 'POST',
        body: new FormData(cartForm as HTMLFormElement),
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
    }

    <AmwalMagentoReactButton
        triggerContext={triggerContext}
        locale={locale}
        preCheckoutTask={submitAddToCart}
        extraHeaders={{
          'x-access-token': 'abc'
        }}
        buttonId="amwal-checkout-knmch"
        overrideCartId={cartId}
        redirectURL={redirectURL}
    />
    ...
}

Properties