Amwal Magento Headless React Button
npm install @amwaljs/magento-react-buttonA React component for integrating Amwal checkout functionality with Magento. This component provides a seamless checkout experience that works in conjunction with the Amwal Magento API Backend.
Before using this component, ensure you have the Amwal Magento Backend installed and configured.
Install the React component in your project:
``bash`
npm install @amwaljs/magento-react-button
`javascript`
import AmwalMagentoReactButton from '@amwaljs/magento-react-button'
For product pages, you'll need to handle adding items to cart before checkout:
`javascript
const ProductPage = () => {
const submitAddToCart = async (): Promise
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'
}
})
}
return (
locale="en"
preCheckoutTask={submitAddToCart}
extraHeaders={{
'x-access-token': 'your-access-token'
}}
buttonId="amwal-checkout-product"
redirectURL="/checkout/success"
/>
)
}
`
For cart or mini-cart pages, omit the preCheckoutTask since items are already in the cart:
`javascript`
const CartPage = () => {
return (
locale="en"
buttonId="amwal-checkout-cart"
overrideCartId={cartId}
redirectURL="/checkout/success"
/>
)
}
#### Required Properties
| Property | Type | Description |
|----------|------|-------------|
| triggerContext | string | Context where the button is instantiated. Values: product-page, cart-page, mini-cart, regular-checkout, etc. |buttonId
| | string | Unique identifier for the button element. Required when multiple buttons exist on the same page. |
#### Optional Properties
##### Localization & Configuration
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| locale | string | "en" | The locale for rendering the button text and interface. |baseUrl
| | string | "/rest/V1" | Base URL for the Magento backend API endpoints. |extraHeaders
| | Record | {} | Additional headers to include in API requests (e.g., authentication tokens). |debug
| | boolean | false | Enable debug logging in the browser console. |
##### Cart & Checkout Behavior
| Property | Type | Description |
|----------|------|-------------|
| overrideCartId | string | Provide a specific cart ID instead of using the default session cart. |emptyCartOnCancellation
| | boolean | Whether to empty the cart when the user cancels checkout. |
##### Callback Functions
| Property | Type | Description |
|----------|------|-------------|
| preCheckoutTask | () => Promise | Async function executed before checkout (e.g., add to cart). Can return a new cart ID. |onSuccessTask
| | (info: ISuccessInfo) => Promise | Async function executed after successful transaction. |onCancelTask
| | () => Promise | Async function executed when user cancels checkout. |
##### Navigation & Redirects
| Property | Type | Description |
|----------|------|-------------|
| redirectURL | string | URL to redirect to after successful checkout (only if performSuccessRedirection is not provided). |performSuccessRedirection
| | (orderId: string, incrementId: string) => void | Custom function to handle post-checkout redirection with order details. |
`javascript
const handleSuccess = async (info) => {
console.log('Order completed:', info)
// Custom success logic here
}
const handleCustomRedirect = (orderId, incrementId) => {
window.location.href = /order/success/${incrementId}
}
buttonId="amwal-checkout-advanced"
onSuccessTask={handleSuccess}
performSuccessRedirection={handleCustomRedirect}
debug={true}
/>
`
`javascript`
buttonId="amwal-checkout-auth"
extraHeaders={{
'Authorization': 'Bearer your-jwt-token',
'X-Customer-ID': 'customer-id'
}}
baseUrl="/custom/api/v1"
/>
This component is written in TypeScript and includes type definitions. The ISuccessInfo interface provides type safety for success callbacks:
`typescript`
interface ISuccessInfo {
orderId: string
incrementId: string
// Additional success information
}
#### Button Not Rendering
- Ensure the Amwal Magento Backend is properly installed and configured
- Check that the buttonId is unique on the page
- Verify API endpoints are accessible from your frontend
#### Checkout Not Working
- Confirm triggerContext matches your implementation contextpreCheckoutTask
- For product pages, ensure successfully adds items to cartdebug
- Check browser console for errors when is enabled
#### Authentication Errors
- Verify extraHeaders contain valid authentication tokens
- Ensure your Magento backend accepts the provided headers
- Check API permissions for the authenticated user
Enable debug mode to get detailed console logging:
`javascript``
buttonId="amwal-checkout-debug"
debug={true}
/>
This component supports modern browsers with ES2017+ features:
- Chrome 60+
- Firefox 55+
- Safari 10.1+
- Edge 79+
This component is licensed under the same terms as the Amwal Magento extension.
For support and documentation, visit Amwal Documentation or contact the Amwal support team.