# ウェブサイトの統合

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

単一のトークン支払い以外に、顧客がドロップダウンから購入したいトークンの量を選択する[数量オプションを追加](https://docs.nmkr.io/nmkr-studio/set-up-sales/nmkr-pay/website-integration#pay-button-with-quantity-options)することもできます。

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

<figure><img src="https://content.gitbook.com/content/ZsvBdOVXa49gx1luHNu8/blobs/7wcuSoksl74E0MEY82Mw/Pay_website_integration.gif" alt=""><figcaption></figcaption></figure>

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

NMKR Payの統合については、プロジェクトの[価格リスト設定に](https://docs.nmkr.io/nmkr-studio/set-up-sales/manage-prices-pricelist)移動し、NMKR Payの統合タブに移動してください。

<figure><img src="https://content.gitbook.com/content/ZsvBdOVXa49gx1luHNu8/blobs/Pn5aAov7iokPfAEBSdny/Screenshot%202022-11-20%20at%2017.35.59.png" alt=""><figcaption><p>NMKR Payの統合タブは、価格表のすぐ下にあります</p></figcaption></figure>

[価格を設定](https://docs.nmkr.io/nmkr-studio/set-up-sales/manage-prices-pricelist/create-new-prices)し、[ NMKR Payを](https://docs.nmkr.io/nmkr-studio/set-up-sales/nmkr-pay/set-up-nmkr-pay)設定した後、NMKR Payをウェブサイトに統合する準備が整いました。

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

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

<figure><img src="https://content.gitbook.com/content/ZsvBdOVXa49gx1luHNu8/blobs/kxI8KnH9V5ShkjU7RnXF/Screenshot%202022-11-20%20at%2017.39.13.png" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://content.gitbook.com/content/ZsvBdOVXa49gx1luHNu8/blobs/eXsepzgOZ7c7eNQHBHAA/Screenshot%202022-11-20%20at%2017.41.54.png" alt=""><figcaption></figcaption></figure>

ウェブサイトに埋め込む前にテストしたい場合は、[オンラインのHTMLツールで試してみてください](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default)。

以下は、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>

```

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

<figure><img src="https://content.gitbook.com/content/ZsvBdOVXa49gx1luHNu8/blobs/w8l05lJsW6reLuVHUnFL/Pay_website_integration_quantity_option.gif" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://content.gitbook.com/content/ZsvBdOVXa49gx1luHNu8/blobs/uunRmJCpXPoygVS8ZspF/Screenshot%202022-11-20%20at%2017.50.33.png" alt=""><figcaption><p>HTMLスニペットで支払いリンクの終了を設定する金額を変更する</p></figcaption></figure>

こんな感じになります：

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

{% hint style="warning" %}
[価格リストで](https://docs.nmkr.io/nmkr-studio/set-up-sales/manage-prices-pricelist)事前に設定された価格と金額のペアのみが、数量オプションと連動します。
{% endhint %}

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

```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パラメータを追加することで、ユーザーが使用したい支払い方法を選択するステップを省略することができます。<br>

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

\&pm=fiatが[有効であれば、フィアットの支払いオプションに](https://docs.nmkr.io/nmkr-studio/set-up-sales/nmkr-pay/fiat-eth-and-sol-payment)直接つながります。

**例：**

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