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 [email protected]

License

MIT