🛒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.

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.

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

   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.

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

   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.