ウェブサイトの統合

NMKR PayをHTML経由で簡単にウェブサイトに統合できます

NMKR Payは、あなたのウェブサイトにHTMLスニペットを追加することにより、任意のウェブサイトに統合することができます。

単一のトークン支払い以外に、顧客がドロップダウンから購入したいトークンの量を選択する数量オプションを追加することもできます。

NMKR Payは、HTMLのiframeタグに埋め込まれて動作しません。NMKR Payをiframeに埋め込むと、ブラウザの拡張機能と通信できなくなります。

標準的な支払いボタンの統合

NMKR Payの統合については、プロジェクトの価格リスト設定に移動し、NMKR Payの統合タブに移動してください。

NMKR Payの統合タブは、価格表のすぐ下にあります

価格を設定し、 NMKR Payを設定した後、NMKR Payをウェブサイトに統合する準備が整いました。

支払いボタンのデザインを設定する

NMKR Payボタンには3種類のデザインと3種類の色があり、ドロップダウンで選択できます。選択に応じて、ボタンのリンクとリンクの下に表示されるHTMLスニペットも変わります

HTMLスニペットをコピー＆ペーストする

「copy code to clipboard」（クリップボードにコードをコピー）をクリックし、あなたのウェブサイトにコードを貼り付けます。

ウェブサイトに埋め込む前にテストしたい場合は、オンラインのHTMLツールで試してみてください。

以下は、HTMLスニペットの例で、これをコピーしてあなたのウェブサイトに直接貼り付けます。

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

数量オプション付きの支払いボタン

NMKR Pay統合に数量オプションを統合するには、以下のコードを追加し、プロジェクトに必要な数量オプション(n)を追加するだけです。

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

2つ目のステップは、NMKR StudioからコピーしたHTMLスニペットのリンク量のパラメータをc=1";からc="+NFT.valueに変更することです；

HTMLスニペットで支払いリンクの終了を設定する金額を変更する

こんな感じになります：

const paymentUrl = "https://payment.nmkr.io/?p=29e512...039&c="+NFT.value;

価格リストで事前に設定された価格と金額のペアのみが、数量オプションと連動します。

以下は、取引ごとに1～5NFTの数量オプションを使用したHTML統合の例です。

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

支払いリンクに役立つパラメータ

支払いリンクの最後に&pm=walletまたは&pm=fiatパラメータを追加することで、ユーザーが使用したい支払い方法を選択するステップを省略することができます。

&pm=walletは直接Cardanoウォレット経由の支払いにつながります。

&pm=fiatが有効であれば、フィアットの支払いオプションに直接つながります。

例：

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