@utorgapp/widget

Utorg Invoicing Widget

• Partner's guide
• Installation
• Usage
  • Create styled widget
  • Bare HTML
• API
  • createWidget
• Demo
• Support
• License

Partner's guide

The SDK allows partners to create a customizable widget that would store invoicing information in the QR so that the customers can scan it and pay via UTORG app.

To get started a partner should

1. Request Utorg to provide the options for the widget
2. Install the SDK or link it via CDN
3. Employ the SDK following the usage guide and API description

List of the options that should be requested from support team:

• currency
• chain
• merchantId
• paymentCurrency

Installation

npm i @utorg-invoicing/widget

yarn add @utorg-invoicing/widget

Usage

Create styled widget

Preconditions: @utorgapp/widget is installed with npm

import {createWidget} from "@utorgapp/widget";

// partner's theme
const theme = {
  button: {
    bg: '#1084b2',
    main: '#fff',
    visited: '#fff',
    hover: '#052d3d',
    shadow: 'rgb(9 73 99 / 30%)'
  }
}

createWidget({
  options: {
    address: "some address",
    chain: 'POLYGON',
    paymentAmount: 777,
    currency: 'USDT',
    externalId: 'some id',
    merchantId: 'some id',
    paymentType: 'fiat',
    paymentCurrency: 'USD',
  },
  customStyles: {
    button: {
      backgroundColor: theme.button.bg,
      color: theme.button.main,
      '&:visited': {
        color: theme.button.visited,
      },
      '&:hover': {
        color: theme.button.hover,
        boxShadow: `0 10px 30px ${theme.button.shadow}`
      },
    },
  },
}).then(widget => {
  // set widget as inner html to some element
}).catch(error => {
  // log validation errors
  consle.error(error)
})

Bare HTML

1. Create a div that will contain the widget
2. Add script to load library from CDN 3. Use https://static.utorg.com/js/widget/latest/web/index.js for latest builds 4. Use https://static.utorg.com/js/widget/1.0.15/web/index.js for specific version
3. Use UtorgInvoicing object to access methods and constants

<div id="main"></div>
<script src="https://static.utorg.com/js/widget/latest/web/index.js"></script>
<script>
  UtorgInvoicing.createWidget({
    options: {
      address: "some address",
      chain: 'POLYGON',
      paymentAmount: 777,
      currency: 'USDT',
      externalId: 'some id',
      merchantId: 'some id',
      paymentType: 'fiat',
      paymentCurrency: 'USD',
    },
  }).then(widget => {
    document.getElementById('main').innerHTML = widget
  })
</script>

API

createWidget

Use this method to generate HTML string that represents a widget.

const createWidget = async ({
  options,
  attributes,
  customStyles,
}: WidgetOptions): Promise<string> => {}

• options - deep links options object

	Mandatory	Type	Description
address	true	string	Crypto wallet address of a customer
currency *	true	string	Payment crypto currency
chain *	true	string	Payment blockchain
paymentType	true	'fiat' or 'crypto'	Specifies the payment amount type
paymentAmount or amount	true	number	If paymentType is 'fiat' then paymentAmount should be passed. For 'crypto' pass amount
externalId	true	string	Invoice identifier prvided by merchant
merchantId *	true	string	Merchant's identifier
postbackUrl	false	string	A URL for sending data via postback
paymentCurrency *	false	string	Payment fiat currency
email	false	string	Customer's email
paymentMethodId	false	string	Payment method external identifier

 * Please contact Utorg to get specific values

• attributes (optional) - marketing attributes (AppsFlyer OneLink attributes)
• customStyles (optional) - JSS object for widget customization. Check the usage example. List of available styles for customization:
  • @font-face
  • wrapper
  • button
  • card
  • flex
  • amount-card
  • pay-text
  • amount-text
  • currency-text
  • qr-code-text
  • divider-text
  • divider-wrapper
  • divider-hr
  • qr-code-img
  • qr-code-card
  • divider-vertical

Demo

cd example/react-demo
npm run build
cd build && open index.html

Support

If any questions occurs please contact us [e-mail]

License

MIT