Displaying Invoices

After creating a new invoice via the POST /merchant/invoices route, you will receive two URLs in the response:

• link - to send to your clients, showcasing the invoice, with a "Pay using CoinPayments" button, initiating the checkout flow
• checkoutLink - to display the checkout/payment window directly to your clients using the methods described below

Embedded IFrame

With an IFrame, you can embed this invoice directly within your site, and customize the display as you see fit.

To create an IFrame, simply use the <iframe> element within your HTML, supplying the checkoutLink to the src attribute.

<iframe title="CoinPayments Checkout" src="https://a-checkout.coinpayments.net/checkout/?invoice-id={id}" allow="clipboard-write"></iframe>

External Pop-Up Window

Alternatively, you can create an external pop-up window to display this invoice, and listen to select events on the new Window object (such as load, unload, focus, etc.).

To create an external pop-up window, you can get started with the code snippet below:

const url = "https://a-checkout.coinpayments.net/checkout/?invoice-id={id}";
const windowFeatures = "width=500,height=600,resizable=yes,scrollbars=yes,status=yes";
const newWindow = window.open(url, '_blank', windowFeatures);
newWindow.focus();

Separate Browser Tab

To display the checkout window in a new browser tab, you can get started with the code snippet below:

const url = "https://a-dashboard.coinpayments.net/checkout/?invoice-id={id}";
const newWindow = window.open(url, '_blank');