Integrazione del Widget

Tinaba dispone di un widget che può essere integrato in due modalità distinte.

Integrazione Pre-Set

Questa soluzione prevede che il widget renderizzi nella pagina di pagamento del merchant un bottone “Tinaba Pay” con grafica e, facoltativamente, l’importo della transazione.

Includere all’interno della pagina il seguente codice:

Sandbox

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

Produzione

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

ed inserire dove si vuole visualizzare il bottone “Tinaba Pay” il seguente codice

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

Al completamento della generazione dell’id server-to-server dovrà essere passato alla pagina l’evento tinaba-checkout-handshake-completecontenente come detail un oggetto con param paymentCode, il parametro button settato a true e facoltativamente il param amount (importo da mostrare).Ecco un esempio:

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

A questo punto sarà compito del javascript mostrare il QR in pagina oppure aprire l’app con deep linking.

Integrazione Custom

Questa soluzione prevede che la grafica e la modalità di ingaggio del widget siano customizzabili.

Includere all’interno della pagina il seguente codice:

Sandbox

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

Produzione

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

Per scatenare il widget occorre lanciare in pagina l’evento tinaba-checkout-handshake-complete contenente come detail un oggetto con param paymentCode ottenuto della generazione dell’id server-to-server.

Ecco un esempio:

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

A questo punto sarà compito del javascript mostrare il QR in pagina oppure aprire l’app con deep linking.