Docs/Embeddable Widgets

Embeddable Widgets

Add Web3 Pay to any website with our embeddable widgets. No build step required.

Quick Start

Add our script to your page to get started:

html

<script src="https://js.web3pay.io/v1/onramp.js"></script>

Button Widget

Create a styled buy button that opens the payment modal:

html

<div id="web3pay-button"></div>

<script src="https://js.web3pay.io/v1/onramp.js"></script>
<script>
  Web3Pay.createButton({
    container: '#web3pay-button',
    apiKey: 'wp3_live_pk_your_publishable_key',
    walletAddress: '0x742d35Cc6634C0532925a3b844Bc9e7595f5fB',
    cryptoCurrency: 'ETH',
    fiatCurrency: 'USD',
    fiatAmount: 100,
    theme: 'light',
    onSuccess: function(session) {
      console.log('Success:', session);
      alert('Purchase complete! TX: ' + session.tx_hash);
    },
    onError: function(error) {
      console.error('Error:', error);
      alert('Purchase failed: ' + error.message);
    },
    onClose: function() {
      console.log('Widget closed');
    }
  });
</script>

Button Options

containerstringrequired

CSS selector for the container element

apiKeystringrequired

Your publishable API key

walletAddressstringrequired

Destination wallet address

cryptoCurrencystringrequired

Cryptocurrency to purchase

fiatCurrencystring

Fiat currency code. Default: 'USD'

fiatAmountnumber

Pre-filled purchase amount

theme'light' | 'dark'

Widget theme. Default: 'light'

buttonTextstring

Custom button text. Default: 'Buy Crypto'

styleobject

Custom button styles

onSuccessfunction

Callback on successful purchase

onErrorfunction

Callback on failed purchase

onClosefunction

Callback when modal is closed

Modal Widget

Programmatically open the payment modal from your own button:

html

<button id="buy-crypto-btn" class="my-custom-button">
  Buy Crypto
</button>

<script src="https://js.web3pay.io/v1/onramp.js"></script>
<script>
  document.getElementById('buy-crypto-btn').addEventListener('click', function() {
    Web3Pay.openModal({
      apiKey: 'wp3_live_pk_your_publishable_key',
      walletAddress: '0x742d35Cc6634C0532925a3b844Bc9e7595f5fB',
      cryptoCurrency: 'ETH',
      fiatAmount: 100,
      theme: 'dark',
      onSuccess: function(session) {
        // Handle success
        window.location.href = '/success?tx=' + session.tx_hash;
      },
      onError: function(error) {
        // Handle error
        showErrorNotification(error.message);
      }
    });
  });
</script>

Custom Styling

Customize the button appearance to match your brand:

javascript

Web3Pay.createButton({
  container: 400">&#039;#web3pay-button&#039;,
  apiKey: 400">&#039;wp3_live_pk_xxx&#039;,
  walletAddress: 400">&#039;0x742d35...&#039;,
  cryptoCurrency: 400">&#039;ETH&#039;,
  buttonText: 400">&#039;Purchase ETH&#039;,
  style: {
    500">// Background
    backgroundColor: 400">&#039;#6366f1&#039;,
    backgroundHover: 400">&#039;#4f46e5&#039;,

    500">// Text
    color: 400">&#039;#ffffff&#039;,
    fontSize: 400">&#039;16px&#039;,
    fontWeight: 400">&#039;600&#039;,
    fontFamily: 400">&#039;Inter, sans-serif&#039;,

    500">// Shape
    borderRadius: 400">&#039;12px&#039;,
    padding: 400">&#039;14px 28px&#039;,

    500">// Border
    border: 400">&#039;none&#039;,
    boxShadow: 400">&#039;0 4px 14px rgba(99, 102, 241, 0.4)&#039;,

    500">// Transition
    transition: 400">&#039;all 0.2s ease&#039;
  }
});

Dynamic Wallet Address

Update the wallet address dynamically (e.g., after wallet connection):

javascript

500">// Initial setup without wallet
400">const widget = Web3Pay.createButton({
  container: 400">&#039;#web3pay-button&#039;,
  apiKey: 400">&#039;wp3_live_pk_xxx&#039;,
  walletAddress: &#039;400">&#039;, 500">// Empty initially
  cryptoCurrency: &#039;ETH400">&#039;,
  disabled: 400">true 500">// Disable until wallet connected
});

500">// After user connects their wallet
400">async 400">function onWalletConnected(address) {
  widget.update({
    walletAddress: address,
    disabled: 400">false
  });
}

500">// If user disconnects
400">function onWalletDisconnected() {
  widget.update({
    walletAddress: &#039;&#039;,
    disabled: 400">true
  });
}

Multiple Currency Options

Create multiple buttons for different cryptocurrencies:

html

<div id="buy-eth"></div>
<div id="buy-usdc"></div>
<div id="buy-matic"></div>

<script src="https://js.web3pay.io/v1/onramp.js"></script>
<script>
  const commonConfig = {
    apiKey: 'wp3_live_pk_xxx',
    walletAddress: '0x742d35...',
    fiatAmount: 100,
    onSuccess: handleSuccess,
    onError: handleError
  };

  // ETH on Ethereum
  Web3Pay.createButton({
    ...commonConfig,
    container: '#buy-eth',
    cryptoCurrency: 'ETH',
    network: 'ethereum',
    buttonText: 'Buy ETH',
    style: { backgroundColor: '#627eea' }
  });

  // USDC on Polygon
  Web3Pay.createButton({
    ...commonConfig,
    container: '#buy-usdc',
    cryptoCurrency: 'USDC',
    network: 'polygon',
    buttonText: 'Buy USDC',
    style: { backgroundColor: '#2775ca' }
  });

  // MATIC on Polygon
  Web3Pay.createButton({
    ...commonConfig,
    container: '#buy-matic',
    cryptoCurrency: 'MATIC',
    network: 'polygon',
    buttonText: 'Buy MATIC',
    style: { backgroundColor: '#8247e5' }
  });
</script>

WordPress Integration

Add the widget to WordPress using a custom HTML block or shortcode:

html

<!-- Add this to a Custom HTML block in WordPress -->
<div id="web3pay-button" style="margin: 20px 0;"></div>

<script src="https://js.web3pay.io/v1/onramp.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    Web3Pay.createButton({
      container: '#web3pay-button',
      apiKey: 'wp3_live_pk_your_key',
      walletAddress: '0x742d35Cc6634C0532925a3b844Bc9e7595f5fB',
      cryptoCurrency: 'ETH',
      fiatAmount: 100,
      theme: 'light'
    });
  });
</script>

Shopify Integration

Add to your Shopify store via theme customization:

liquid

{% comment %}
  Add this to your theme.liquid or a custom section
{% endcomment %}

<div id="crypto-payment-option"></div>

{{ 'https://js.web3pay.io/v1/onramp.js' | script_tag }}

<script>
  if (typeof Web3Pay !== 'undefined') {
    Web3Pay.createButton({
      container: '#crypto-payment-option',
      apiKey: '{{ settings.web3pay_api_key }}',
      walletAddress: '{{ settings.web3pay_wallet }}',
      cryptoCurrency: 'USDC',
      fiatAmount: {{ cart.total_price | divided_by: 100 }},
      fiatCurrency: '{{ cart.currency.iso_code }}',
      buttonText: 'Pay with Crypto',
      onSuccess: function(session) {
        // Mark order as paid
        window.location.href = '/checkout/complete?session=' + session.session_id;
      }
    });
  }
</script>

Security Notes

Use publishable keys only: The widget should only use publishable keys (wp3_live_pk_). Never expose secret keys in client-side code.

Verify on backend: Always verify transaction completion via webhooks or API on your server before fulfilling orders.