These guidelines are made to make it easier to integrate Fintoc seamlessly into your flows and maximize your conversion with the help of our tried research and experience.
When integrating our widget you should keep in mind the main job your users wish to do: move money easily, securely and the fastest way possible from their account to yours in order to pay for a product/transfer money/invest/add money to their account. With that in mind, we created this guide based on the principles of Ease, Trust, Continuity, and Velocity. These principles need to be upheld at every stage: before the widget, during and after.

Recommendations per stage

Before

Before the widget even begins you need to prepare the user for the experience they are about to have. This is important so that they do not abandon the process because they feel like they have entered an unknown payment platform and create distrust in the process. This can be done with continuity and consistency across stages.

Choose the correct verbs for your action button

Select the correct action verbs for your circumstance. If you are an e-commerce, it is normal to say "Pay" (Paga con tu banco) but that would be incorrect if you are loading money into you a fintech wallet. See more examples in the use cases below.

Include an explicative text if necessary

If the next step after a button is not clear, and it is something unusual for your users it is important to explain what will happen. Explain that a widget will open up overlaid on top the current screen.

Use the correct Fintoc and Bank Logos

Utilize our official button images for your action button, which can be found here Fintoc Buttons. These include our logo as well as our available banks, providing for a sense of continuity in the payment process.

Our research indicates that people prefer to see available banks as soon as possible in order to be able to make a better decision about which payment method to utilize. This is especially important in Chile as there are limited banks available to initiate a transfer with our widget but not necessarily in Mexico where all are available.

Decide which widget bank selection model fits your use case better

Fintoc provides the option to pre-select a bank, causing the user to skip that step within the widget. It depends on your use case and users what the best solution is for you. Our recommendations are based on having the least minimum buttons options for the user to reduce cognitive load while simultaneously trying to reduce the amount of steps/clicks a user has to make. For that reason we divide our recommendations in three types:

• If Fintoc is your only payment method in Chile: Feel free to place single bank buttons externally from the widget and specify the institution ID when starting the widget. Your users will appreciate having one less step and you will not have an overcrowded screen with payment methods.
• If Fintoc is one of your multiple payment methods in Chile: We recommend placing your user´s top-most used banks (maximum two) as quick access button outside of the widget and placing a general Fintoc button alongside the rest of your payment methods. This ensures a quick access for high volume usage of a specific bank. To enable the widget to open with a specific institution ID such as cl_banco_estado:

const widget = Fintoc.create({
  ...parameters,
  institutionId: 'cl_banco_estado',
});
widget.open();

You can read more about the Web Integration here: Web Integration and Web Integration

• If your are using Fintoc in México: Given that in México all banks are available, there are many of them, and the experience is not very differentiated per bank, we recommend keeping all bank selection within the widget.

Choose default payment method and location

We have noticed that placing Fintoc as the default payment method or higher in location or with a recommended banner leads to higher opening rates by users. It is up to you to decide if this benefits your users and financial model.

During

During the widget it is important to create a seamless consistent experience without any confusing UI elements that can stop them from their payment goal.

Keep your current background

When opening the widget, there is no need to redirect the user to a new page. This will worsen the overall experience, as it might feel as if they are moving to another application. You should execute the widget.open() method in the same page where your user clicked the button to open the widget. This will open the widget on top of an overlay and your original screen. Here’s an example:

const onWidgetOpenButtonClick = () => {
  const widget = Fintoc.create(params);
  widget.open();
}

Notice how the click method of the button to open the widget does not include a redirection. This will result in the widget being opened on top of the current view with an overlay, feeling more “native” to your application.

Avoid duplicated UI elements like an exit button

Having duplicated navigational buttons places more cognitive load on a user that will have to understand which button leads to what outcome.

Personalize the widget

Personalization makes it easier for your users to recognize the widget as part of your own user flow. Currently we offer one personalization:

• A custom name that is not necessarily your legal name. This is in order to maximize legibility and recognizability. Please contact sales in order to modify your screen name.

Minimize user effort when possible

Reduce the amount of work necessary to complete a payment by utilizing shortcuts such as pre-inserting a RUT (add it as a username) in Chile or pre-selecting a bank (set as institution_id) for a recurring user. For this section see more here: Webview Integration and Web Integration

After

After the payment is completed, it is important to close the loop in order to indicate what happens next.

Redirect to proper screens when there are successful outcomes

As a general rule, when a successful outcome is obtained it is important to indicate that the process was done correctly and has achieved the sought after outcome of moving money or purchasing a product. This may vary according to your use case but usually includes clarifying the consequence of having used Fintoc.

This consequence might be showing an account screen with a refreshed balance or further instructions on how to obtain the product you purchased. Please see the example use cases below for ideas. Read more about how to best handle widget results in frontend and backend here Accept a Payment .

React appropriately when there are errors

Small errors will always be handled and mitigated by Fintoc within the widget but in the case that final state ones exist, your should react appropiately to each one in order to ensure a retrial of the process. Currently, you can receive a error_reason when you receive a payment_intent.failed webhook. For all of the error_reasons we have messages to indicate what the problem was to the user as well as a retry button. You can see examples of those on-screen messages in the error_reasons section.

We recommend that for these you urge your user to retry the process with the proper modifications as well as indicate that no money was moved given the error explained.

Example Use Cases

P2P in Chile

• Verbs for your action button: Move / Send money with your bank (Envía dinero con tu banco)
• Fintoc is usually the single form of payment method which means, if possible, place bank selection outside of the widget to speed up the process.
• Successful flows usually mean reiterating that the money is sent and showing their account minus the money that was just moved.
• Errors should lead you to see that your account was not deducted any money and prompted to try again. Fintoc tries to minimize the friction here by letting the user retry the flow through the widget itself.

Fintech wallets/investment in Chile

• Verbs for your action button: Add money with your bank (Carga con tu banco}
• There can be times where Fintoc is the only method of payment and other times where there is more than one method. Try to minimize extra steps and clicking while adding the least amount of options available to reduce cognitive load.
  • If Fintoc is the only method of payment, try to enable bank selection outside of the widget and organize for easier access for recurring users (Example: If someone preciously paid with X Bank, place X Bank with easier access).
  • If Fintoc is not the only payment method, leave bank selection inside of the widget and only bring out any bank buttons that are consistently used by a high percentage of your users.
• Successful flows usually mean seeing their account screen with new money clearly added and visualized.
• Errors should lead to messages to try the process again and afterwards, an account screen where the user can see that no money was added. Fintoc tries to minimize the friction here by letting the user retry the flow through the widget itself.

E-commerce in Chile

• Verbs for your action button: Pay with your bank (Paga con tu banco)
• There is almost always more than one payment method. In this case we recommend leaving most of the bank selection inside of the widget and only placing one or maximum two external bank buttons for quick access for high volume usage of a specific bank. These should be equal in design to any other payment method available.

👆

For e-commerce in Chile:

We recommend placing an external quick access button for Banco Estado.

• Successful flows usually mean a confirmation screen that includes information about the amount paid, billing information, the products purchased, address and delivery date if applicable, or further instructions to obtain the product.
• Errors should lead to a screen that encourages the retrial of the payment process, whether it be by Fintoc method of payment or other.

E-commerce in México

• Verbs for your action button: Pay with your bank (Paga con tu banco)
• There is almost always more than one payment method. We recommend leaving all of the bank selection inside of the widget.
• Successful flows usually mean a confirmation screen that includes information about the amount paid, billing information, the products purchased, address and delivery date if applicable, or further instructions to obtain the product.
• Errors should lead to a screen that encourages the retrial of the payment process, whether it be by Fintoc method of payment or other.