# amwal-magento-react-button

> Amwal React Button with Magento Backend

Latest version **0.0.40** (published 2024-04-04) · 0 weekly downloads

## Install

```sh
npm install amwal-magento-react-button
pnpm add amwal-magento-react-button
yarn add amwal-magento-react-button
bun add amwal-magento-react-button
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.40 |
| Published | 2024-04-04 |
| First published | 2023-07-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | sameh-justpass-me |

## Links

- npm: https://www.npmjs.com/package/amwal-magento-react-button
- Repository: https://github.com/amwal-tech/amwal-magento
- Homepage: https://github.com/amwal-tech/amwal-magento#readme
- Issues: https://github.com/amwal-tech/amwal-magento/issues
- npm.io page: https://npm.io/package/amwal-magento-react-button

## Dependencies (2)

- [amwal-checkout-button](https://npm.io/package/amwal-checkout-button.md) ^0.0.53-alpha-7
- [amwal-checkout-button-react](https://npm.io/package/amwal-checkout-button-react.md) ^0.0.53-alpha-7

## Recent versions

- 0.0.40 (latest) — 2024-04-04
- 0.0.39 — 2024-04-03
- 0.0.38 — 2024-03-06
- 0.0.37 — 2024-02-29
- 0.0.36 — 2024-02-25
- 0.0.35 — 2024-02-22
- 0.0.34 — 2024-02-22
- 0.0.33 — 2024-02-22
- 0.0.32 — 2024-02-22
- 0.0.31 — 2024-02-21
- 0.0.30 — 2023-11-14
- 0.0.29 — 2023-11-02
- 0.0.28 — 2023-10-29
- 0.0.27 — 2023-10-12
- 0.0.26 — 2023-10-12
- … 26 more at https://npm.io/package/amwal-magento-react-button/versions

## README

# 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](https://docs.amwal.tech/docs/magento-installation)


2. Install react component into your react project
```bash
npm i amwal-magento-react-button
```
## Usage

```javascript
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
| Property                  | Type                                                     | Description                                                                                                   |
|---------------------------|----------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
| triggerContext            | string                                                   | Context where the button is instantiated. possible values `product-listing-page`, `regular-checkout`, .. etc. |
| locale                    | string                                                   | The locale that should be used for rendering the button. Default `en`.                                        |
| preCheckoutTask           | ()  =>   Promise < string \| undefined > \| undefined     | An 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. It can possibly return a new cartId to be used for checkout |
| onSuccessTask             | (Info: ISuccessInfo)  =>   Promise < void > \| undefined | An asynchronous function that is fired when a successful transaction happens |
| onCancelTask              | ()  =>   Promise < void > \| undefined                   | An asynchronous function that is fired when the users cancels |
| emptyCartOnCancellation   | boolean \| undefined                                     | controls behavior if Cart is emptied when the user cancels the checkout                                                                                                       |
| baseUrl                   | string \| undefined                                      | base URL for the magento backend. Defaults to `/rest/V1`                                                                                                                      |
| extraHeaders              | Record<string, string> \| undefined                      | extra headers in JSON format to send with fetch requests                                                                                                                      |
| overrideCartId            | string \| undefined                                      | Useful when you want to provide your own cartId. |
| redirectURL               | string \| undefined                                      | URL to redirect to after checkout is completed. Only effective if `performSuccessRedirection` is not set|
| performSuccessRedirection | (orderId: string, IncrementId:string)  =>  void \| undefined | A function that performs redirect on success, orderId has the magento order id and increment_id.                                                                                                                                          |
| buttonId                  | string                                                   | The id of the button that will be rendered. This is useful when you want to have multiple buttons on the same page. |
| debug                     | boolean \| undefined                                     | Add debug option to button in console |

---
_Source: https://npm.io/package/amwal-magento-react-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._