# Ecommerce Widget

This guide will take you through the process of integrating PurplePay checkout page to your ecommerce website and start accepting crypto payments instantly.<br>

### Ecommerce Widget Integration

1. Create an API key, [here](https://purple-pay.gitbook.io/purple-pay/developers/api-key).<br>
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.<br>

   ```jsx
   <div className='h-10' id='purplepay-checkout-button' data-apikey='YOUR_API_KEY'/>
   ```

   *<mark style="color:orange;">**It’s important that you don’t change the**</mark><mark style="color:orange;">**&#x20;**</mark><mark style="color:orange;">**`id`**</mark><mark style="color:orange;">**&#x20;**</mark><mark style="color:orange;">**of the div.**</mark>*\
   \
   \&#xNAN;**\*\*NOTE:** Remember to switch 'YOUR\_API\_KEY' here with the generated key.<br>
3. To load the widget script, you'd have to load the script tag of your checkout page.<br>

   ```typescriptreact
   <script async src="https://staging.purplepay.app/js/index.js" />
   ```

   \
   Upon document load, the widget is initialised automatically.<br>
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.<br>
5. You have to call this method with the correct arguments to initiate a checkout session.<br>
6. Once the payment is done, using the successCallback, you can perform actions in your app.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://purple-pay.gitbook.io/purple-pay/developers/ecommerce-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
