Skip to main content

Web SDK

Container​

<div id="widget"></div>

The container must be created for the widget. Inside this tag, the widget will be initialized adn rendered

Initialization​

// TypeScript

import { RTPWebWidget } from '@gini/rtp-web-sdk/widget';

var widget = new RTPWebWidget('#widget', 'bearerToken');
widget.load();
Note

The widget id is the responsible of rendering the button and the bank picker wherever its needed on the website. In order to know how to obtain the needed bearer token for this method, please go to the API documentation

With this really easy integration, the widget will be rendered on the website and initialized.

RTP Payment Initialization​

Merchants can set up the code that the button must run once the customer clicks on the button in order to follow Gini's mobile SDK recipe. It's needed to communicate with the Merchant's server in order to initiate the payment via an Api to Api call.

widget.setOnPaymentButtonClicked((widget) => {
  // It's needed to call merchant's API in order
  // to initiate the backend to backend RTP payment

  // Once the paymentRequestId is returned, the
  // payment can be initiated via our SDK method
  // as follows
  widget.initPayment(paymentRequestId);
})

With this, once the customer clicks on the button, the payment will be initiated via the Backend to Backend call and, afterwards, the payment will be initialized from the SDK method. This initPayment method will open the Bank app if the user is in a mobile device, otherwise, it will render a QR code in order to the customer to read it from their phone with the selected bank application installed on it

Customization​

With the gini widget, the widget can be customized with the background_color, border_color, text_color, button_color, font_size and the text properties so it can be smoothly added into the web application

widget.setAttributes({
  background_color: 'rgb(0, 0, 0)',
  border_color: 'yellow',
  text_color: '#FFFFAA',
  text: 'Pay with RTP',
  button_color: 'rgba(255, 255, 255, 0.9)',
  font_size: '20px'
});

Keep listening to SDK callback updates​

Merchants could want to show loaders or custom success pages in their flow. For it, the Web SDK provides a couple of callbacks that you can be used in order to achieve this:

widget.setOnPaymentRequestInitiated((payment) => {
  // This callback can be used to show a
  // custom loading on the website
})

widget.setOnPaymentRequestFinished((payment) => {
  // This callback can be used to show the
  // success/failure custom screen

  // Important: the status returned in this callback
  // is not 100% reliable. For more info, please
  // go to the web recipe on the Gini documentation
})