@amwaljs/checkout-button 0.2.5 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -32
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,40 +1,35 @@
|
|
|
1
1
|
# Amwal Checkout Button
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A fast and secure checkout solution for your e-commerce website.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Getting Started
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
For detailed setup instructions, configuration options, and API reference, visit our official documentation:
|
|
8
|
+
|
|
9
|
+
**📚 [https://docs.amwal.tech](https://docs.amwal.tech)**
|
|
10
|
+
|
|
11
|
+
## Quick Overview
|
|
12
|
+
|
|
13
|
+
The Amwal Checkout Button is a web component that integrates seamlessly into your website:
|
|
14
|
+
|
|
15
|
+
1. **Sign up** - Get your merchant credentials at [merchant.sa.amwal.tech](https://merchant.sa.amwal.tech) (for KSA)
|
|
16
|
+
2. **Install** - Add the checkout button to your website
|
|
17
|
+
3. **Configure** - Customize the button for your needs
|
|
18
|
+
4. **Handle events** - Listen for checkout success and address updates
|
|
19
|
+
|
|
20
|
+
### Minimal Example
|
|
8
21
|
|
|
9
22
|
```html
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
</head>
|
|
18
|
-
<body>
|
|
19
|
-
<amwal-checkout-button
|
|
20
|
-
merchant-id="sandbox-amwal-4e876d00-a50e-482c-a6e1-a1a9df400ce5"
|
|
21
|
-
amount="20"
|
|
22
|
-
country-code="SA"
|
|
23
|
-
locale="en"
|
|
24
|
-
dark-mode="off"
|
|
25
|
-
address-required="true"/>
|
|
26
|
-
<script>
|
|
27
|
-
const amwalCheckoutElement = document.querySelector('amwal-checkout-button');
|
|
28
|
-
amwalCheckoutElement.addEventListener('amwalCheckoutSuccess', ev => console.log(ev.detail) )
|
|
29
|
-
amwalCheckoutButtonElement.addEventListener('amwalAddressUpdate', ev => {
|
|
30
|
-
console.log(ev.detail);
|
|
31
|
-
// if address-requried and address-handshake are true,
|
|
32
|
-
// fire this event after updating shipping methods and taxes based on the address
|
|
33
|
-
amwalCheckoutButtonElement.dispatchEvent( new Event('amwalAddressAck') )
|
|
34
|
-
})
|
|
35
|
-
</script>
|
|
36
|
-
</body>
|
|
37
|
-
</html>
|
|
23
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/amwal-checkout-button@latest/dist/checkout/checkout.esm.js"></script>
|
|
24
|
+
|
|
25
|
+
<amwal-checkout-button
|
|
26
|
+
merchant-id="your-merchant-id"
|
|
27
|
+
amount="20"
|
|
28
|
+
country-code="SA"
|
|
29
|
+
locale="en"/>
|
|
38
30
|
```
|
|
39
31
|
|
|
40
|
-
|
|
32
|
+
## Plugin Reference
|
|
33
|
+
For a complete list of attributes, methods, and events, please refer to the [Plugin Reference](https://cdn.jsdelivr.net/npm/@amwaljs/checkout-button@latest/src/components/amwal-checkout-button/readme.md)
|
|
34
|
+
|
|
35
|
+
**Need help?** Visit [docs.amwal.tech](https://docs.amwal.tech) for comprehensive guides and support.
|