NanoPay.js
Nano Currency Web Payment Library.
Easily add Nano to any website.
Live Demo
Edit on CodePen
https://codepen.io/nano2dev/pen/VwRQypE
Install
CDN:
<script src="https://pay.nano.to/latest.js"></script>
Local:
<script src="/NanoPay.js"></script>
Download latest version.
Simple Usage
Created with basic HTML:
<a
data-title="Tip @Nano2Dev"
data-amount="0.133"
data-address="@development"
data-button="Open Natrium"
data-position="bottom">
Tip 0.133 NANO</a>
JavaScript API
Configure and open popup with NanoPay.open().
NanoPay.open({
title: "Demo",
address: '@development', // Username or Nano Address
notify: '[email protected]', // get an email receipt
contact: true, // Collect user's email
shipping: 10, // Collect user's shipping address, use 'true' for free shipping
currency: 'EUR', // converts prices EUR, default NANO
// amount: 30, // not used if using line_items
line_items: [
{ name: "Shirt (X-Small)", price: 50 },
{ name: "Mens Shoes (9.5)", price: 20 }
],
success: (block) => {
console.log(block)
// {
// "hash": "D16FF348B634CDB3DF8...9D6F5B180CCD3B93F99A4D15203",
// "amount": "NANO_AMOUNT_PAID",
// "address": "PAYEE_NANO_ADDRESS",
// "username": "PAYEE_USERNAME",
// "height": "PAYEE_BLOCK_HEIGHT",
// "shipping": "PAYEE_SHIPPING_ADDRESS",
// "email": "PAYEE_EMAIL_ADDRESS",
// "nanolooker": "https://nanolooker.com/block/D16FF348B634CDB3DF8...9D6F5B180CCD3B93F99A4D15203"
// "checkout": "https://api.nano.to/checkout/93be1ab9",
// }
},
cancel: () => {
console.log("User cancelled")
},
})
All Options
title
: (string) Show custom title shown in popup.address
: (string) Nano address or Nano.to @Username.contact
: (string) User's email address.shipping
: (number or bool) User's mailing address. 'true' for free shipping.position
: (string) Control popup position (top, center, bottom).wallet
: (string) Custom wallet icon: natrium, nault, nautilus, cakebutton
: (string) Custom button text, default "Open Natrium".random
: (bool) Use unique payment amounts, default true.unique
: (bool) Use unique payment address, default false.notify
: (string) Send email notification to admin, default false.amount
: (string) Custom popup amount, used for simple payments.line_items
: (array) List of products user is buying, replaces amount.currency
: (string) Fiat currency for Nano price conversion, default "NANO".note
: (string) Custom note shown in admin email, default false.qrcode
: (string) Always show QR Code, default desktop only.checkout
: (string) Nano.to Checkout ID. Read More.expiration
: (number) Limit completion of checkout in milliseconds.email
: (string) Pre-configure user's emailmailing_address
: (string) Pre-configure user's shipping addresssuccess
: (async function) Called when payment is successful.cancel
: (async function) Called when popup is cancelled.expired
: (async function) Called when popup has expired.onShippingUpdate
: (async function) Called when shipping address is updated.
Dynamic Shipping Price
NanoPay.open({
address: '@bank', // Your Nano Address or Username
strings: {
email_placeholder: 'Required *',
shipping_placeholder: 'Required *',
},
line_items: [
{ name: "Shirt (X-Small)", price: 0.122 },
{ name: "Mens Shoes (9.5)", price: 0 }
],
shipping: 5, // default price
onShippingUpdate: async (address, updateShipping) => {
// do stuff, like calling a backend
if (address.country === 'US') {
updateShipping(5)
} else {
updateShipping(20)
}
return address // must return true or formatted object
},
// ...
})
Timed Checkout
By default, NanoPay does not limit Checkout time. If you'd like to, you can use expiration
and expired
. A countdown will be shown next to description
.
function showNanoPay() {
NanoPay.open({
address: '@bank', // Your App's Address
amount: "0.13300XXXX", // Amount with random decimals
description: "Checkout",
expiration: 5 * 60, // 5 minutes in ms
currency: 'USD',
expired: () => {
showNanoPay() // call again to reset
},
success: (block) => {
// {
// "hash": "D16FF348B634CDB3DF8...9D6F5B180CCD3B93F99A4D15203",
// "address": "PAYEE_NANO_ADDRESS",
// "username": "PAYEE_USERNAME",
// ...
// }
console.log("Hello:", block.username || block.address)
}
})
}
showNanoPay() // call initially
Login with Nano
NanoPay makes Login with Nano easy.
NanoPay.open({
title: "Login",
address: '@bank', // Your App's Address
amount: 0.0001, // Small Amount
success: (block) => {
// {
// "hash": "D16FF348B634CDB3DF8...9D6F5B180CCD3B93F99A4D15203",
// "address": "PAYEE_NANO_ADDRESS",
// "username": "PAYEE_USERNAME",
// ...
// }
console.log("Hello:", block.username || block.address)
}
})
HTML Content Paywall
NanoPay includes an easy way to monetize any website client-side.
Please note, this method does not use a back-end, it's not for keeping secrets from public. Google bots can still crawl content.
<style>
/* This css prevents flash of content on page load */
.premium { display: none; }
</style>
<article class="premium">
Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Amet tenetur ab reprehenderit temporibus, illum recusandae nostrum iusto omnis repellendus id quae ullam reiciendis dolorem aliquam fuga, tempora iste animi.
</article>
NanoPay.wall({
element: '.premium',
title: 'Read Story',
button: 'Unlock Story',
free: true, // Allow free reading
amount: 0.001, // Cost of Article
address: '@development', // Your Nano Address or Username
success: (block) => {
// do stuff like render highlight.js
console.log("Thanks for reading:", block.username || block.address)
}
})
Payment Alerts
const axios = require('axios');
axios.post('https://rpc.nano.to', {
"action": "checkout",
"address": "@esteban",
"random": "true",
"note": "Nano Bird Feeder",
"notify": "[email protected]",
}).then((res) => {
console.log(res.data);
});
const axios = require('axios');
axios.post('https://rpc.nano.to', {
"action": "checkout",
"address": "@esteban",
"random": "true",
"note": "Nano Pizza App",
"notify": "https://discord.com/api/webhooks/11165660...",
}).then((res) => {
console.log(res.data);
});
Backend API
NanoPay.js is a front-end UI for Checkout API.
// Create a checkout (ideally in a secure back-end)
var checkout = (await axios.post('https://rpc.nano.to', {
action: 'checkout',
description: "Invoice #284", // recommended
notify: '[email protected]', // your admin email
plans: [
{ "title": "200 Sky Credits", "value": "0.13300000XXXX" },
{ "title": "200 Sky Credits", "value": "0.13300000XXXX" },
],
address: '@bank', // Your Nano Address or @Username
webhook: 'http://secret_endpoint.com/webhook' // optional
})).data
// Pass the checkout.id to NanoPay.js
NanoPay.open({
checkout: checkout.id,
success: (block) => {
console.log(block)
}
})
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Source Code
- Github: Source Code
- Issues: Issues
Dedicated Support
- Email: [email protected]
- Discord: Nano.to Discord
- Twitter: twitter.com/@nano2dev
- Mastodon: xno.social/@nano2dev