Amwal Checkout Button

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

Sign up with amwal merchant for your country. for KSA, visit https://merchant.sa.amwal.tech to obtain a sandbox key or production key
include the npm package js into your website and instantate amwal-checkout-button web component

<!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>

Package detail

amwal-checkout-button

readme

Amwal Checkout Button

Amwal Plugin Reference