# amwal-checkout-button

> Amwal Checkout Button

Latest version **0.2.3** (published 2025-11-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install amwal-checkout-button
pnpm add amwal-checkout-button
yarn add amwal-checkout-button
bun add amwal-checkout-button
```

## Health

**Score 60/100 (C)** — status: stable.

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

Warnings: low downloads; large bundle; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2025-11-04 |
| First published | 2022-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 35.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mahmood-amwal, sameh-amwal, ahmed1elshaer |

## Links

- npm: https://www.npmjs.com/package/amwal-checkout-button
- Repository: https://www.amwal.tech
- npm.io page: https://npm.io/package/amwal-checkout-button

## Dependencies (5)

- [qrcode](https://npm.io/package/qrcode.md) ^1.5.4
- [@ionic/core](https://npm.io/package/@ionic/core.md) ^7.4.3
- [ua-parser-js](https://npm.io/package/ua-parser-js.md) ^1.0.36
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^3.4.2
- [libphonenumber-js](https://npm.io/package/libphonenumber-js.md) ^1.10.46

## Recent versions

- 0.2.3 (latest) — 2025-11-04
- 0.0.61-alpha-5 (test-version) — 2025-04-20
- 0.0.13-alpha.1 (old-version) — 2022-08-17
- 0.2.2 — 2025-11-02
- 0.2.1 — 2025-10-29
- 0.2.0 — 2025-10-23
- 0.1.9 — 2025-10-15
- 0.1.8 — 2025-10-14
- 0.1.7 — 2025-09-21
- 0.1.6 — 2025-09-16
- 0.1.5 — 2025-09-09
- 0.1.4 — 2025-08-17
- 0.1.3 — 2025-08-06
- 0.1.2 — 2025-08-06
- 0.1.1 — 2025-08-05
- … 186 more at https://npm.io/package/amwal-checkout-button/versions

## README

# Amwal Checkout Button

To set up your website to use Amwal checkout button, follow the following steps:

1. Sign up with amwal merchant for your country. for KSA, visit https://merchant.sa.amwal.tech to obtain a sandbox key or production key

2. include the npm package js into your website and instantate `amwal-checkout-button` web component

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>My Cool Store</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/amwal-checkout-button@latest/dist/checkout/checkout.esm.js"></script>
  </head>
  <body>
    <amwal-checkout-button
      merchant-id="sandbox-amwal-4e876d00-a50e-482c-a6e1-a1a9df400ce5"
      amount="20"
      country-code="SA"
      locale="en"
      dark-mode="off"
      address-required="true"/>
    <script>
      const amwalCheckoutElement = document.querySelector('amwal-checkout-button');
      amwalCheckoutElement.addEventListener('amwalCheckoutSuccess', ev => console.log(ev.detail) )
      amwalCheckoutButtonElement.addEventListener('amwalAddressUpdate', ev => {
        console.log(ev.detail);
        // if address-requried and address-handshake are true,
        // fire this event after updating shipping methods and taxes based on the address
        amwalCheckoutButtonElement.dispatchEvent( new Event('amwalAddressAck') )
      })
    </script>
  </body>
</html>
```

# [Amwal Plugin Reference](https://cdn.jsdelivr.net/npm/amwal-checkout-button@latest/src/components/amwal-checkout-button/readme.md)

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