amwal-checkout-button
v0.0.59
Published
Amwal Checkout Button
Downloads
983
Keywords
Readme
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-buttonweb 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>