Skip to main content

Web

Overview​

Before diving into the SDK integration process, ensure you have all the necessary credentials. These are your client Id and your client secret, all needed to integrate the Gini Request-To-Pay flow. If you don't, please, go to this page and follow the instructions there in order to obtain all the required credentials. Once you have them, you can proceed with this recipe and integrate the SDK seamlessly into your web application.

Install and import Necessary Dependencies:​

Before proceeding with this recipe, ensure that you have imported all the necessary client dependencies and libraries required for the Gini Request-To-Pay flow. For more information on this topic, click here

Diagram of the Web Integration Flow​

Authenticate with Gini​

You first need to authenticate with Gini to obtain a bearer token. For it, you need to authenticate through you API due to security reasons (you should send your client secret, so it could not be called directly through your Frontend WebApp). You should also send your customer Id, which is used to fill the bank picker with the customer's preferred bank.

For more information on how to do this request, please, direct to the authentication page. Once you received the bearer token you can continue with the Payment Button creation.

Payment Button Creation​

Once the bearer token is obtained on previous step, you can now proceed to the Payment Button creation. This is a web SDK method, which will render a native HTML/Javascript button with the correspondent bank picker so the customer can select from their preferred bank account. For it, you can go to this page which will guide you through this method and how to handle it, as well as how to set the button clicked listener so you can continue with the actual RTP payment.

Request-to-Pay Payment Initialization​

Inside the click listener, this is, once your customer clicks on the Gini Request-to-Pay Payment button, you will receive the onPaymentButtonClicked callback, where you must initiate the Payment through your API with your private key. More information on this specific endpoint can be found here.

Once you received the response and obtain it on your Web App, you should call the InitPayment SDK method (link) with the RTP Id you just received from this Payment Initialization.

Update your customer screen with payment status changes​

The Web SDK will automatically update with a loading and a success/failure screen. However, if you want to customize these screens, you can use a couple of callbacks the the same Web SDK will send with payment status changes. The first one will be once the payment flow started on the bank application, where the onPaymentRequestInitiated callback will be executed. You can update your clients screen with a loader on this step.

In the same line, you will receive a onPaymentRequestFinished callback with payment result once the customer accepts or refuses the payment. Something important to take into account, is that this not a 100% reliable status, since it is obtained from customer response to RTP Payment Screen on the Bank Application. In the majority of the scenarios this will be reliable enough.

For more info on these two callbacks, go to the SDK documentation here

If you need to be 100% sure about the payment success/failure, you can start polling to update the payment status once you receive the webhook (with a 100% reliable payment response). To obtain this information, you need to use the getPaymentRequest endpoint.