> For the complete documentation index, see [llms.txt](https://purple-pay.gitbook.io/purple-pay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://purple-pay.gitbook.io/purple-pay/developers/ecommerce-widget.md).
# Ecommerce Widget
Integrate PurplePay widget to your Ecommerce website.
This guide will take you through the process of integrating PurplePay checkout page to your ecommerce website and start accepting crypto payments instantly.
### Ecommerce Widget Integration
1. Create an API key, [here](/purple-pay/developers/api-key.md).
2. In case of a SPA,
Paste the HTML code in the `public/index.html` or `_documents.tsx` or directly in the file where you want to make the checkout.
```jsx
```
***It’s important that you don’t change the**** ****`id`**** ****of the div.***\
\
**\*\*NOTE:** Remember to switch 'YOUR\_API\_KEY' here with the generated key.
3. To load the widget script, you'd have to load the script tag of your checkout page.
```typescriptreact
```
\
Upon document load, the widget is initialised automatically.
4. The payment sessions are created with the method `window.createPaymentSession` which take in arguments:
* **orderID**
* The order id of the cart.
* **orderAmount**
* The amount to be paid in USD.
* **chainId**
* Chain in which payment is to be done.
* **successCallback**
* Callback to be called once payment is successful.
5. You have to call this method with the correct arguments to initiate a checkout session.
6. Once the payment is done, using the successCallback, you can perform actions in your app.