Uniwire Docs

Appearance

Button Parameters ​

The SDK supports various data attributes that can be added to button elements to configure payment behavior, third-party integrations, and UI options.

Basic Payment Parameters ​

data-product ​

  • Type: String
  • Description: Product or service name displayed in the payment modal header
  • Example: data-product="Demo Product"

data-amount ​

  • Type: String/Number
  • Description: Payment amount
  • Example: data-amount="2"

data-currency ​

  • Type: String
  • Description: Payment currency (USD, EUR, BTC, etc.)
  • Example: data-currency="USD"

Target Currency & Invoice Parameters ​

data-target-currency ​

  • Type: String
  • Description: Automatically selects a specific cryptocurrency for payment. Format: COIN-NETWORK (e.g., USDC-ETH, BTC)
  • Behavior: Creates invoice and automatically selects the specified currency
  • Example: data-target-currency="USDC-ETH"
  • Note: Ignored if data-target-invoice is specified

data-target-invoice ​

  • Type: String (UUID)
  • Description: Uses an existing invoice ID instead of creating a new one
  • Behavior: Loads the specified invoice and proceeds with payment
  • Example: data-target-invoice="0369cfbc-2bac-4932-9227-afc009f5bf82"
  • Priority: Takes precedence over data-target-currency

Third-party Integrations ​

For detailed information about setting up third-party integrations, see our Third-party Integrations Guide.

data-integration-provider ​

  • Type: String
  • Description: Specifies which payment provider to integrate (e.g., WE for Wert)
  • Behavior: Adds a new tab for the provider's payment method
  • Example: data-integration-provider="WE"

data-integration-label ​

  • Type: String
  • Description: Custom label for the integration provider tab
  • Default: "Buy Crypto"
  • Example: data-integration-label="Debit/Credit Cards"

data-integration-only ​

  • Type: Boolean (true/false)
  • Description: When true, skips the standard crypto payment widget and directly opens the integration provider
  • Behavior:
    • Creates invoice automatically
    • Opens only the provider's widget (Wert, etc.)
    • Requires either data-target-currency or data-target-invoice
  • Example: data-integration-only="true"

UI Control Parameters ​

data-active-tab ​

  • Type: String
  • Description: Sets which tab is active when the modal opens
  • Options: buy-crypto, integration
  • Example: data-active-tab="integration"

data-show-payment-url ​

  • Type: Boolean (true/false)
  • Description: Shows a "View Invoice" link in the payment modal
  • Example: data-show-payment-url="true"

data-passthrough ​

  • Type: String (JSON)
  • Description: Additional data passed to callbacks and backend
  • Format: JSON string
  • Example: data-passthrough='{"test": 123, "order_id": "abc123"}'

Usage Examples ​

Basic Crypto Payment ​

html
<a href="" class="btn uniwire-button" 
   data-product="Demo Product"
   data-amount="10" 
   data-currency="USD">
   Pay with Crypto
</a>

Integration Provider with Custom Tab ​

html
<a href="" class="btn uniwire-button" 
   data-product="Demo Product"
   data-amount="2" 
   data-currency="USD"
   data-integration-provider="WE"
   data-integration-label="Debit/Credit Cards"
   data-active-tab="integration">
   Pay with Card
</a>

Auto-select Target Currency ​

html
<a href="" class="btn uniwire-button" 
   data-product="Demo Product"
   data-amount="0.00123" 
   data-currency="BTC"
   data-target-currency="USDC-ETH">
   BTC to USDC
</a>

Integration Only (Direct Provider) ​

html
<a href="" class="btn uniwire-button" 
   data-product="Demo Product"
   data-amount="2" 
   data-currency="USD"
   data-integration-provider="WE"
   data-target-currency="USDC-ETH"
   data-integration-only="true">
   Pay with Card (Auto)
</a>

Use Existing Invoice ​

html
<a href="" class="btn uniwire-button" 
   data-product="Demo Product"
   data-integration-provider="WE"
   data-target-invoice="0369cfbc-2bac-4932-9227-afc009f5bf82"
   data-integration-only="true">
   Pay Invoice
</a>

Parameter Priority ​

  1. data-target-invoice has highest priority - if specified, data-target-currency is ignored
  2. data-integration-only="true" requires either data-target-currency or data-target-invoice
  3. data-integration-provider creates additional tabs when integration is available
  4. data-active-tab controls initial tab selection

External Providers ​

Currently supported providers:

  • WE (Wert) - Fiat to crypto onramp
  • Kado - Crypto onramp (Deprecated)
  • Onramper - Crypto onramp (Deprecated)

Each provider may have different requirements and behaviors when used with data-integration-only="true".