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.

Standard Pay button integration

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.

specify pay button design

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.

Copy and paste the HTML snippet

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>

Pay Button with quantity options

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>
<option value="4">4</option>
<option value="5">5</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 an HTML integration with quantity option 1-5 NFTs per transaction.

<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>
<option value="4">4</option>
<option value="5">5</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>

Useful parameters for the payment link

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.

Example

https://pay.nmkr.io/?p=c6392d1f60474xyz5a5ff48d56d3e&c=1&pm=wallet