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