Magento React component

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


  1. Install Amwal Magento Backend

  2. Install react component into your react project

npm i amwal-magento-react-button


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'

          'x-access-token': 'abc'


triggerContextstringContext where the button is instantiated. possible values product-listing-page, regular-checkout, .. etc.
localestringThe locale that should be used for rendering the button. Default en.
preCheckoutTask() => Promise < void > | undefinedAn asynchronous function that is fired when the button is clicked on checkout. Possible Uses are for performing operations such as adding product to cart if on product page.
onSuccessTask(Info: ISuccessInfo) => Promise < void > | undefinedAn asynchronous function that is fired when a successful transaction happens
emptyCartOnCancellationboolean | undefinedcontrols behavior if Cart is emptied when the user cancels the checkout
baseUrlstring | undefinedbase URL for the magento backend. Defaults to /rest/V1
extraHeadersRecord<string, string> | undefinedextra headers in JSON format to send with fetch requests
overrideCartIdstring | undefinedUseful when you want to provide your own cartId.
redirectURLstring | undefinedURL to redirect to after checkout is completed. Only effective if performSuccessRedirection is not set
performSuccessRedirection(orderId: string) => void | undefinedA function that performs redirect on success, orderId has the magento order id