Website Integration
Integrate NMKR Pay easily to your website via HTML
NMKR Pay can be integrated to any website by adding a HTML snippet to your website.
Besides the single Token payment, you can also add quantity options where your customer selects the amount of tokens he want to buy from the dropdown.
NMKR Pay won't work embedded in a HTML iframe tag. If you embed NMKR Pay in an iframe it won't be able to communicate with your browser extensions.
For the NMKR Pay integration, please go to the price list settings of your project and to the NMKR Pay integration tab.
The NMKR Pay integration tab is right below your price list
After you created your prices and set up NMKR Pay, you are now ready to integrate NMKR Pay to your website.
The NMKR Pay button comes in three different designs and three different colours that can be selected in the dropdown. Depending on your selection the button link and also the HTML snippet that you can see below the links changes.
Click on "copy code to clipboard" and paste the code on your website.
If you want to test it before you embed it to your website, try it with an online HTML tool.
The following is an example HTML snippet that you would copy and paste it directly to your website.
<img src="https://studio.nmkr.io/images/buttons/paybutton_1_1.svg" onclick="javascript:openPaymentWindow()">
<script type="text/javascript">
function openPaymentWindow() {
const paymentUrl = "https://pay.nmkr.io/?p=7e221683f55e48b9a1f9e2666c6551b7&c=1";
// Specify the popup width and height
const popupWidth = 500;
const popupHeight = 700;
// Calculate the center of the screen
const left = window.top.outerWidth / 2 + window.top.screenX - ( popupWidth / 2);
const top = window.top.outerHeight / 2 + window.top.screenY - ( popupHeight / 2);
const popup = window.open(paymentUrl, "NFT-MAKER PRO Payment Gateway", `popup=1, location=1, width=${popupWidth}, height=${popupHeight}, left=${left}, top=${top}`);
// Show dim background
document.body.style = "background: rgba(0, 0, 0, 0.5)";
// Continuously check whether the popup has been closed
const backgroundCheck = setInterval(function () {
if(popup.closed) {
clearInterval(backgroundCheck);
console.log("Popup closed");
// Remove dim background
document.body.style = "";
}
}, 1000);
}
</script>
To integrate a quantity option to your NMKR Pay integration simply add the following snipped and extend with the quantity options (<option value="n">n</option>) you need for your project.
<p style="text-align:center;">
<select id="NFT">
<option value="None">-- Select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
</script> </p>
The second step is to change the parameter for the amount of the link in the HTML snippet that was copied from NMKR Studio from c=1"; to c="+NFT.value;
Change the amount defining ending of the payment link in your HTML snippet
It will now look like this:
const paymentUrl = "https://payment.nmkr.io/?p=29e512...039&c="+NFT.value;
Only price/amount-pairs that are previously specified in the price list will work with the quantity options.
The following shows an example of a HTML integration with quantity options (1, 2, 5, 10).
<p style="text-align:center;">
<select id="NFT">
<option value="None">-- Select --</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
<br><br>
</script> </p>
<img src="https://pro.nft-maker.io/images/buttons/paybutton_1_1.svg" onclick="javascript:openPaymentWindow()">
<script type="text/javascript">
function openPaymentWindow() {
const paymentUrl = "https://pay.nmkr.io/?p=cec3419ddf2c4c5ca9b3abdbc719ff29&c="+NFT.value;
// Specify the popup width and height
const popupWidth = 500;
const popupHeight = 700;
// Calculate the center of the screen
const left = window.top.outerWidth / 2 + window.top.screenX - ( popupWidth / 2);
const top = window.top.outerHeight / 2 + window.top.screenY - ( popupHeight / 2);
const popup = window.open(paymentUrl, "NFT-MAKER PRO Payment Gateway", `popup=1, location=1, width=${popupWidth}, height=${popupHeight}, left=${left}, top=${top}`);
// Show dim background
document.body.style = "background: rgba(0, 0, 0, 0.5)";
// Continuously check whether the popup has been closed
const backgroundCheck = setInterval(function () {
if(popup.closed) {
clearInterval(backgroundCheck);
console.log("Popup closed");
// Remove dim background
document.body.style = "";
}
}, 1000);
}
</script>
By adding the parameter &pm=wallet or &pm=fiat at the end of your payment link, you would skip the step where the user selects what payment method he wants to use.
&pm=wallet would lead directly to the payment via Cardano Wallet
&pm=fiat would lead directly to the FIAT payment option, if enabled.
https://pay.nmkr.io/?p=c6392d1f60474xyz5a5ff48d56d3e&c=1&pm=wallet
Last modified 5mo ago