1.0.17 • Published 8 months ago
@utorgapp/widget v1.0.17
Utorg Invoicing Widget
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
- Create a
div
that will contain the widget - Add
script
to load library from CDN- Use https://static.utorg.com/js/widget/latest/web/index.js for latest builds
- Use https://static.utorg.com/js/widget/1.0.15/web/index.js for specific version
- 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 |
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 support@utorg.pro