> For the complete documentation index, see [llms.txt](https://docs.vpay.africa/vpay-js-inline-dropin-integration-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vpay.africa/vpay-js-inline-dropin-integration-guide/3.-web-app-setup.md).

# 3. Web App Setup

With a few lines of code, you can integrate the VPay Javascript Dropin library and start accepting payments on your web and mobile web sites. The library is available at:

*Sandbox Base URL:* [*https://dropin-sandbox.vpay.africa*](https://dropin-sandbox.vpay.africa)

*Live Base URL:* [*https://dropin.vpay.africa*](https://dropin.vpay.africa)

### HTML Code Snippet (For Sandbox)

```html
<!DOCTYPE html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Order Checkout Page</title>
        <script src="{{baseURL}}/dropin/v1/initialise.js"></script>
        <!-- Use appropriate Base URL as described above -->
    </head>
    
    <body>
        <!--Your HTML Content goes here-->
        
        <script>
            (() => {
                const options = {
                    amount: 119,
                    currency: 'NGN',
                    domain: 'sandbox',
                    key: 'fdcdb195-6553-4890-844c-ee576b7ea715',
                    email: 'orderbuyer@givmail.com',
                    transactionref: 'z31zs098zas8w3774h44344f8yg',
                    customer_logo:'https://www.vpay.africa/static/media/vpayLogo.91e11322.svg',
                    customer_service_channel: '+2348030007000, support@org.com',
                    txn_charge: 6,
                    txn_charge_type: 'flat',
                    onSuccess: function(response) { console.log('Hello World!', response.message); },
                    onExit: function(response) { console.log('Hello World!', response.message); }
                }
                
                if(window.VPayDropin){
                    const {open, exit} = VPayDropin.create(options);
                    open();                    
                }                
            })();
        </script>
    </body>
</html>
```

{% hint style="warning" %}
Each transactionref that you generate should be unique, alphanumeric and different from previously used ones. You may generate a ref using any scheme of your preference.
{% endhint %}

{% hint style="warning" %}
When setting up for your live web app, remember to edit the **head** \<script> reference from the SANDBOX library to the LIVE library i.e. \_<https://dropin.vpay.africa/dropin/v1/initialise.js_&#x20>;
{% endhint %}
