Examples

This page provides practical examples of different SDK configurations and button combinations.

Basic Examples

Try the examples below to see different payment configurations in action:

Click a button to see events...

Simple Payment Button

A basic payment button with fixed amount and currency:

<button class="uniwire-button btn" 
        data-amount="10" 
        data-currency="USD"
        data-product="My Product">
  Pay 10 USD
</button>

Donation Button

A donation button without fixed amount - users can enter any amount:

<button class="uniwire-button btn" 
        data-product="Donate">
  Donate
</button>

Multiple Currency Options

Payment button with cryptocurrency as the base currency:

<button class="uniwire-button btn" 
        data-amount="100" 
        data-currency="USDT"
        data-product="Premium Service">
  Pay 100 USDT
</button>

Inline Placement Examples

See how inline placement works by embedding the payment widget directly into the page:

Basic Inline Widget

Click a button to see events...

Basic Inline Widget

Embed the payment widget directly into a specific container instead of showing it as a modal:

<div id="payment-container"></div>

<button class="uniwire-button btn" 
        data-amount="25" 
        data-currency="EUR"
        data-product="Service"
        data-placement="inline"
        data-placement-target="payment-container">
  Pay with Crypto
</button>

Inline with Custom Styling

Create a styled container for the payment widget with custom CSS classes:

<div id="checkout-widget" class="border rounded-lg p-4 bg-gray-50">
  <!-- Payment widget will appear here -->
</div>

<button class="uniwire-button btn" 
        data-amount="50" 
        data-currency="USD"
        data-product="Checkout"
        data-placement="inline"
        data-placement-target="checkout-widget">
  Complete Payment
</button>