# Widget (Offramp)

Create a withdraw voucher request to be redeemed by anyone. Money will be deducted from your lightning wallet.

#### Method

```

POST https://prod.ninjapay.me/lapi/v1/requestVoucher

```

#### HTML

```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ninjapay Withdraw Widget</title>
    <script src="ninjapay-sdk.js"></script> <!-- Ensure this file is correctly set up -->

  </head>

  <body>

    <div id="ninjapay-widget">
      <!-- ... rest of your existing HTML ... -->
      <div style="width: 326px; height: 386px; left: 26px; top: 38px; position: absolute;">
        <div style="width: 326px; height: 69px; left: 0px; top: 0px; position: absolute; background: white; border-radius: 4px; border: 2px rgba(0, 0, 0, 0.10) solid;">
          <div style="left: 15px; top: 15px; position: absolute; color: #708598; font-size: 12px; font-family: Graphik; font-weight: 500;">You send</div>
          <input type="number" id="amount" style="left: 15px; top: 34px; position: absolute; color: #21728D; font-size: 18px; font-family: Graphik; font-weight: 400;" placeholder="Amount in SAT" />
          <!-- ... rest of the 'You Send' section ... -->
        </div>
        <!-- ... rest of the sections ... -->
        <div style="width: 326px; height: 69px; left: 0px; top: 100px; position: absolute; background: white; border-radius: 4px; border: 2px rgba(0, 0, 0, 0.10) solid;">
          <div style="left: 15px; top: 15px; position: absolute; color: #708598; font-size: 12px; font-family: Graphik; font-weight: 500;">Username/Invoice</div>
          <input type="text" id="usernameOrInvoice" style="left: 15px; top: 34px; position: absolute; color: #21728D; font-size: 18px; font-family: Graphik; font-weight: 400;" placeholder="Username or invoice" />
          <!-- ... rest of the 'You Send' section ... -->
        </div>
        <!-- ... rest of the sections ... -->
        <!-- ... rest of the sections ... -->
        <!-- Final Withdraw Amount Section -->
        <div style="width: 326px; height: 69px; left: 0px; top: 252px; position: absolute;">
          <div style="width: 326px; height: 69px; left: 0px; top: 0px; position: absolute; background: white; border-radius: 4px; border: 2px rgba(0, 0, 0, 0.10) solid;"></div>
          <div style="left: 15px; top: 15px; position: absolute; color: #708598; font-size: 12px; font-family: Graphik; font-weight: 500;">Final Withdraw Amount</div>
          <div id="final-amount" style="left: 15px; top: 34px; position: absolute; color: #21728D; font-size: 18px; font-family: Graphik; font-weight: 400;">0</div>
        </div>
        <div style="width: 326px; height: 48px; left: 0px; top: 341px; position: absolute;">
          <button onclick="handleWithdrawal()" style="width: 326px; height: 48px; left: 0px; top: 0px; position: absolute; background: #21728D; border-radius: 4px; border: 4px solid; color: white; font-size: 14px; font-family: Graphik; font-weight: 500;">Confirm</button>
        </div>
        <!-- Max Withdraw Text -->
        <div style="width: 320px; left: 0px; top: 397px; position: absolute; opacity: 0.70; text-align: right; color: #708598; font-size: 12px; font-family: Graphik; font-weight: 500;">Max withdraw: 46000 SAT</div>
      </div>
      <div id="result" style="position: absolute; bottom: 10px; width: 100%; text-align: center; color: red;"></div> <!-- Error/Success message -->
    </div>


  </body>

</html>
```

#### CSS

```css
<style>
    body {
    font-family: Montserrat, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    }
    #ninjapay-widget {
    width: 379px;
    height: 470px;
    background: white;
    border: 2px rgba(0, 0, 0, 0.10) solid;
    position: relative;
    }
/* ... rest of your CSS styles ... */
</style>
```

Note: By default for static voucher url's, a ninjapay user(@username) can redeem only once. This will avoid ass-milking.&#x20;

#### JS

```javascript
function calculateFinalAmount() {
        const amount = document.getElementById('amount').value;
        const finalAmount = amount - (amount * 0.01);  // Deducting 1% fee
        document.getElementById('final-amount').innerText = finalAmount.toFixed(0);
    }

    async function handleWithdrawal() {
        const amount = document.getElementById('amount').value;
        const usernameOrInvoice = document.getElementById('usernameOrInvoice').value;
        
        try {
            const response = await NinjapaySDK.withdraw(amount, "usernameOrInvoice");  // replace "usernameOrInvoice" with actual value
            document.getElementById('result').innerText = 'Withdrawal successful: ' + JSON.stringify(response);
        } catch (error) {
            console.error('Withdrawal failed:', error);
            document.getElementById('result').innerText = 'Withdrawal failed: ' + error.message;
        }
    }

    // Calculate final amount on page load and whenever the amount input changes
    document.getElementById('amount').addEventListener('input', calculateFinalAmount);
    window.addEventListener('load', calculateFinalAmount);

```

#### Code Example

```jsx

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'API_KEY' //Admin key required
  },
  body: '{"amount":0.00180204,"voucher_count":1,"title":"Happy Birthday🥳"}'
};

fetch('https://prod.ninjapay.me/lapi/v1/requestVoucher', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));
  
```


---

# 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://ninjapay.gitbook.io/ninjapay-api-docs/coming-soon/widget-integration/widget-offramp.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.
