NMKR Payは、あなたのウェブサイトにHTMLスニペットを追加することにより、任意のウェブサイトに統合することができます。
単一のトークン支払い以外に、顧客がドロップダウンから購入したいトークンの量を選択するすることもできます。
標準的な支払いボタンの統合
支払いボタンのデザインを設定する
NMKR Payボタンには3種類のデザインと3種類の色があり、ドロップダウンで選択できます。選択に応じて、ボタンのリンクとリンクの下に表示されるHTMLスニペットも変わります
HTMLスニペットをコピー＆ペーストする
「copy code to clipboard」（クリップボードにコードをコピー）をクリックし、あなたのウェブサイトにコードを貼り付けます。
以下は、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に変更することです；
こんな感じになります：
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ウォレット経由の支払いにつながります。
例：
https://pay.nmkr.io/?p=c6392d1f60474xyz5a5ff48d56d3e&c=1&pm=wallet
