{"_id":"@amwaljs/magento-react-button","_rev":"2-5f5d60b99fdabdb2bbc7d86830c98510","name":"@amwaljs/magento-react-button","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@amwaljs/magento-react-button","version":"0.1.0","_id":"@amwaljs/magento-react-button@0.1.0","maintainers":[{"name":"ghmedgalala_amwal","email":"ahmed.galal@amwal.tech"},{"name":"ahmardi","email":"mardi@amwal.tech"},{"name":"zaghoo","email":"zaghoo@amwal.tech"}],"homepage":"https://github.com/amwal-tech/amwal-magento#readme","bugs":{"url":"https://github.com/amwal-tech/amwal-magento/issues"},"dist":{"shasum":"bbeff9912a2ec052627433371b88e5b4a8646460","tarball":"https://registry.npmjs.org/@amwaljs/magento-react-button/-/magento-react-button-0.1.0.tgz","fileCount":14,"integrity":"sha512-Jv+q116thSGaAA/8Fo7BDq4ksOyHB2zvPrdYPHE9pwMXBC3scFvwj6NG9f3QzyICrfqjXV60Nyutwm+2Au5tCQ==","signatures":[{"sig":"MEYCIQCGQZAvbsaOUFVPucZ/A7tfZa1U3Ohen1JiTbNVMqftbgIhAOHvxQSXbTzlFzIoA+cfM43V+Kxjaum8kGUsgRVvX7FZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60215},"main":"./dist/cjs/index.js","types":"./dist/esm/index.d.ts","module":"./dist/esm/index.js","gitHead":"d472cd7eb63286cccfad1f50bdf358008f11178d","scripts":{"build":"npm run clean && npm run compile","clean":"rm -rf dist","rollup":"rollup -c","compile":"npm run compile:cjs && npm run compile:esm","compile:cjs":"tsc --project tsconfig.cjs.json","compile:esm":"tsc --project tsconfig.esm.json"},"_npmUser":{"name":"ahmardi","email":"mardi@amwal.tech"},"repository":{"url":"git+https://github.com/amwal-tech/amwal-magento.git","type":"git"},"_npmVersion":"11.7.0","description":"Amwal Magento Headless React Button","directories":{},"sideEffects":false,"_nodeVersion":"23.3.0","dependencies":{"@amwaljs/checkout-button":"^0.2.9","@amwaljs/checkout-button-react":"^0.2.9"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","eslint":"^8.45.0","react-dom":"^18.2.0","typescript":"^5.1.6","@types/react":"^18.2.15","eslint-plugin-n":"^16.0.1","eslint-plugin-react":"^7.33.0","eslint-plugin-import":"^2.27.5","eslint-plugin-promise":"^6.1.1","@typescript-eslint/eslint-plugin":"^5.62.0","eslint-config-standard-with-typescript":"^37.0.0"},"peerDependencies":{"react":"*","react-dom":"*"},"_npmOperationalInternal":{"tmp":"tmp/magento-react-button_0.1.0_1768210415641_0.4953255997399826","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-01-12T09:33:35.543Z","modified":"2026-04-12T01:10:56.446Z","0.1.0":"2026-01-12T09:33:35.838Z"},"bugs":{"url":"https://github.com/amwal-tech/amwal-magento/issues"},"homepage":"https://github.com/amwal-tech/amwal-magento#readme","repository":{"url":"git+https://github.com/amwal-tech/amwal-magento.git","type":"git"},"description":"Amwal Magento Headless React Button","maintainers":[{"email":"mostafa.zaki@amwal.tech","name":"mostafabadr29"},{"email":"ahmed.galal@amwal.tech","name":"ghmedgalala_amwal"},{"email":"mardi@amwal.tech","name":"ahmardi"},{"email":"zaghoo@amwal.tech","name":"zaghoo"}],"readme":"# Amwal Magento React Button\n\nA 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.\n\n## Prerequisites\n\nBefore using this component, ensure you have the [Amwal Magento Backend](https://docs.amwal.tech/docs/magento-installation) installed and configured.\n\n## Installation\n\nInstall the React component in your project:\n\n```bash\nnpm install @amwaljs/magento-react-button\n```\n\n## Basic Usage\n\n### Import the Component\n\n```javascript\nimport AmwalMagentoReactButton from '@amwaljs/magento-react-button'\n```\n\n### Product Page Implementation\n\nFor product pages, you'll need to handle adding items to cart before checkout:\n\n```javascript\nconst ProductPage = () => {\n  const submitAddToCart = async (): Promise<void> => {\n    if (!formSelector) return\n    \n    const cartForm = document.querySelector(formSelector)\n    if (cartForm == null) throw new Error('Product form not found')\n    \n    const formURL = cartForm.getAttribute('action') ?? window.location.href\n    if (!formURL) throw new Error('Product form URL not found')\n    \n    await fetch(formURL, {\n      method: 'POST',\n      body: new FormData(cartForm as HTMLFormElement),\n      headers: {\n        'X-Requested-With': 'XMLHttpRequest'\n      }\n    })\n  }\n\n  return (\n    <AmwalMagentoReactButton\n      triggerContext=\"product-page\"\n      locale=\"en\"\n      preCheckoutTask={submitAddToCart}\n      extraHeaders={{\n        'x-access-token': 'your-access-token'\n      }}\n      buttonId=\"amwal-checkout-product\"\n      redirectURL=\"/checkout/success\"\n    />\n  )\n}\n```\n\n### Cart/Mini-Cart Implementation\n\nFor cart or mini-cart pages, omit the `preCheckoutTask` since items are already in the cart:\n\n```javascript\nconst CartPage = () => {\n  return (\n    <AmwalMagentoReactButton\n      triggerContext=\"cart-page\"\n      locale=\"en\"\n      buttonId=\"amwal-checkout-cart\"\n      overrideCartId={cartId}\n      redirectURL=\"/checkout/success\"\n    />\n  )\n}\n```\n\n## API Reference\n\n### Component Properties\n\n#### Required Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `triggerContext` | `string` | Context where the button is instantiated. Values: `product-page`, `cart-page`, `mini-cart`, `regular-checkout`, etc. |\n| `buttonId` | `string` | Unique identifier for the button element. Required when multiple buttons exist on the same page. |\n\n#### Optional Properties\n\n##### Localization & Configuration\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `locale` | `string` | `\"en\"` | The locale for rendering the button text and interface. |\n| `baseUrl` | `string` | `\"/rest/V1\"` | Base URL for the Magento backend API endpoints. |\n| `extraHeaders` | `Record<string, string>` | `{}` | Additional headers to include in API requests (e.g., authentication tokens). |\n| `debug` | `boolean` | `false` | Enable debug logging in the browser console. |\n\n##### Cart & Checkout Behavior\n| Property | Type | Description |\n|----------|------|-------------|\n| `overrideCartId` | `string` | Provide a specific cart ID instead of using the default session cart. |\n| `emptyCartOnCancellation` | `boolean` | Whether to empty the cart when the user cancels checkout. |\n\n##### Callback Functions\n| Property | Type | Description |\n|----------|------|-------------|\n| `preCheckoutTask` | `() => Promise<string \\| undefined>` | Async function executed before checkout (e.g., add to cart). Can return a new cart ID. |\n| `onSuccessTask` | `(info: ISuccessInfo) => Promise<void>` | Async function executed after successful transaction. |\n| `onCancelTask` | `() => Promise<void>` | Async function executed when user cancels checkout. |\n\n##### Navigation & Redirects\n| Property | Type | Description |\n|----------|------|-------------|\n| `redirectURL` | `string` | URL to redirect to after successful checkout (only if `performSuccessRedirection` is not provided). |\n| `performSuccessRedirection` | `(orderId: string, incrementId: string) => void` | Custom function to handle post-checkout redirection with order details. |\n\n## Advanced Usage\n\n### Custom Success Handling\n\n```javascript\nconst handleSuccess = async (info) => {\n  console.log('Order completed:', info)\n  // Custom success logic here\n}\n\nconst handleCustomRedirect = (orderId, incrementId) => {\n  window.location.href = `/order/success/${incrementId}`\n}\n\n<AmwalMagentoReactButton\n  triggerContext=\"cart-page\"\n  buttonId=\"amwal-checkout-advanced\"\n  onSuccessTask={handleSuccess}\n  performSuccessRedirection={handleCustomRedirect}\n  debug={true}\n/>\n```\n\n### With Authentication Headers\n\n```javascript\n<AmwalMagentoReactButton\n  triggerContext=\"product-page\"\n  buttonId=\"amwal-checkout-auth\"\n  extraHeaders={{\n    'Authorization': 'Bearer your-jwt-token',\n    'X-Customer-ID': 'customer-id'\n  }}\n  baseUrl=\"/custom/api/v1\"\n/>\n```\n\n## TypeScript Support\n\nThis component is written in TypeScript and includes type definitions. The `ISuccessInfo` interface provides type safety for success callbacks:\n\n```typescript\ninterface ISuccessInfo {\n  orderId: string\n  incrementId: string\n  // Additional success information\n}\n```\n\n## Troubleshooting\n\n### Common Issues\n\n#### Button Not Rendering\n- Ensure the Amwal Magento Backend is properly installed and configured\n- Check that the `buttonId` is unique on the page\n- Verify API endpoints are accessible from your frontend\n\n#### Checkout Not Working\n- Confirm `triggerContext` matches your implementation context\n- For product pages, ensure `preCheckoutTask` successfully adds items to cart\n- Check browser console for errors when `debug` is enabled\n\n#### Authentication Errors\n- Verify `extraHeaders` contain valid authentication tokens\n- Ensure your Magento backend accepts the provided headers\n- Check API permissions for the authenticated user\n\n### Debug Mode\n\nEnable debug mode to get detailed console logging:\n\n```javascript\n<AmwalMagentoReactButton\n  triggerContext=\"cart-page\"\n  buttonId=\"amwal-checkout-debug\"\n  debug={true}\n/>\n```\n\n## Browser Compatibility\n\nThis component supports modern browsers with ES2017+ features:\n- Chrome 60+\n- Firefox 55+\n- Safari 10.1+\n- Edge 79+\n\n## License\n\nThis component is licensed under the same terms as the Amwal Magento extension.\n\n## Support\n\nFor support and documentation, visit [Amwal Documentation](https://docs.amwal.tech/) or contact the Amwal support team.\n","readmeFilename":"README.md"}