Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.zopay.cash/llms.txt

Use this file to discover all available pages before exploring further.

​
mountButton: Render the Branded ZoPay Payment Button

Inject the branded ZoPay button and asset/network selector dropdowns into any DOM element. Receives the selected currency and network code in your onClick callback.
mountButton mounts a pre-built, branded ZoPay button into the DOM element you specify. It automatically fetches the list of available payment currencies and their networks, populating selectors inside a wizard flow. When a customer clicks the button, your onClick callback receives the currency and networkCodes (an array of networks) of the selected options, which you pass directly to createPaymentIntent. The button and selectors remain disabled until the catalog lists have loaded. This method throws an Error if no element with the given elementId exists in the document at the time of the call. Ensure the target element is present in the DOM before calling mountButton.

​
Signature

zopay.mountButton(
  elementId: string,
  options: ZopayButtonMountOptions
): HTMLElement

​
Parameters

ParameterTypeDescription
elementIdstringThe id attribute of the DOM element into which the button should be mounted. Any existing content inside the element is replaced.
options.onClick(selection: ZopayButtonSelection) => voidA callback invoked when the customer clicks the button. Receives an object containing currency (e.g., "USDT") and networkCodes (e.g., ["SOL", "TRX"]). Use these values when calling createPaymentIntent.
options.disabledboolean (optional)When true, the button and selectors are rendered in a disabled state even after loading. Useful when you need to gate the button on a form validation or terms-of-service agreement.
options.currenciesstring[] (optional)Asset codes to offer, intersected with the API catalog. If omitted, every currency returned by the catalog is listed.

​
ZopayButtonSelection

export interface ZopayButtonSelection {
  currency: string;
  networkCodes: string[];
}

​
Return value

Returns the container HTMLElement appended inside the target element. You can store this reference to remove or hide the button programmatically.

​
What gets rendered

The method injects up to three child elements into the target container:
  1. Currency selector — a <select> dropdown populated with available asset codes (hidden if only one currency is available).
  2. Network multi-selector — a group of checkboxes populated with available networks for the chosen currency.
  3. Pagar button — a confirmation button inside the wizard.
If the catalog fetch fails, an error message is displayed and all controls remain disabled.

​
Example

<!-- index.html -->
<div id="zopay-button-container"></div>
<div id="payment-container"></div>

<script src="/dist/zopay-sdk.min.js"></script>
<link rel="stylesheet" href="/dist/zopay-sdk.min.css" />

const zopay = new ZoPay({
  apiKey: 'YOUR_API_KEY',
  paymentLinkBaseUrl: 'https://your-api.com',
});

async function handlePayClick({ currency, networkCodes }) {
  try {
    const result = await zopay.createPaymentIntent({
      amount: 100,
      currency: currency,
      networks: networkCodes,
      description: 'Premium Subscription',
    });

    if (!result.success) {
      throw new Error(result.message || result.error);
    }

    zopay.mountPaymentIntentWidget(result, {
      elementId: 'payment-container',
      theme: 'light',
      onSuccess: (info) => {
        console.log('Payment completed:', info.payment_id);
      },
      onError: (err) => {
        console.error('Payment error:', err.message);
      },
    });
  } catch (err) {
    console.error('Failed to create payment:', err.message);
  }
}

const buttonContainer = zopay.mountButton('zopay-button-container', {
  onClick: handlePayClick,
  disabled: false,
  currencies: ['USDT', 'USDC'] // Optional: filter which currencies to show
});