Widget (Onramp)

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

<!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

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

JS

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


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));

PreviousWidget Integration NextWidget (Offramp)

Last updated 2 years ago