Widget Integration

Tinaba has a widget that can be integrated into two distinct modes.

Pre-Set Integration

This solution requires the widget to render a “Tinaba Pay” button with graphics and, optionally, the transaction amount on the merchant’s payment page.

Include the following code on the page:

Sandbox

<script type="text/javascript"
 src="https://www.staging.tinaba.com/e-commerce/tinabawidget.js">
</script>

Production

<script type="text/javascript"
 src="https://www.tinaba.com/e-commerce/tinabawidget.js">
</script>

and enter where you want to display the “Tinaba Pay” button in the following code

<div id="tinaba-root"></div>

When the server-to-server id is generated, the tinaba-checkout-handshake-complete event, containing an object with param paymentCode, the button parameter set to true, and optionally the param amount, must be passed to the page. Here’s an example:

var event = new CustomEvent('tinaba-checkout-handshake-complete', {
 'detail': { 'paymentCode': 'AAAID7865', 'amount': '200', 'button': 'true'}
});
document.dispatchEvent(event);

At this point it will be up to the javascript to show the QR on the page or open the app with deep linking.

Custom Integration

This solution requires that the widget’s graphics and engagement mode be customizable.

Include the following code on the page:

Sandbox

<script type="text/javascript"
 src="https://www.staging.tinaba.com/e-commerce/tinabawidget.js">
</script>
<div id="tinaba-root"></div>

Production

<script type="text/javascript"
 src="https://www.tinaba.com/e-commerce/tinabawidget.js">
</script>
<div id="tinaba-root"></div>

To unleash the widget, you must launch the tinaba-checkout-handshake-complete event on the page, which contains as detail an object with param paymentCode obtained from the server-to-server id generation.

Here’s an example:

var event = new CustomEvent('tinaba-checkout-handshake-complete',
 { 'detail': { 'paymentCode': 'AAAID7865'}
});
document.dispatchEvent(event);

At this point it will be up to the javascript to show the QR on the page or open the app with deep linking.