UX Guidelines

When integrating our widget you should keep in mind the main job your users wish to do: move money easily, securely, and in the fastest way possible from their account to yours in order to pay for a product/transfer money/invest/add money to their account.

In this guide, we will dive deeper into these topics and show you how to get the best possible conversion rates with your Fintoc integration.

Optimizing the Journey

Depending on the unique characteristics of your product, you can make several optimizations to your payment flow using Fintoc.

Choose the correct verbs for your action button in Chile

Our research has shown a big rise in conversion rate when using the word “Pay” (Paga con tu banco) in Chile over other options referring to bank transfers (Transferencia Bancaria). The latter is associated with a long, manual process which is exactly what Fintoc is here to solve.

Wording Recommendation

It’s also important to 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 a fintech wallet. We currently have approved the following alternative wordings:

  • “Donate with your bank” / ”Dona con tu banco”: if you are using Fintoc to collect donations.
  • “Buy with your bank” / “Compra con tu banco”: if using the word “Buy” is a better fit within your checkout.

If you need custom wording, feel free to reach out to our team for approval.

If you are using Fintoc in Mexico, our research hasn’t shown an improvement using specific verbs in your action button. We recommend sticking with “Transferencia Bancaria”.

Preselecting a bank

Fintoc provides the option to pre-select a bank, causing the user to skip that step within the widget. If it makes sense within your payment flow, you can place single bank buttons or pre-select the bank for returning users.

Our recommendation depends on your payment screen:

  • 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.
Pre-selecting Bank.svg
  • If Fintoc is one of your multiple payment methods in Chile: We recommend placing your user’s top-most used banks (maximum two) as a quick access button outside of the widget and placing a general Fintoc button alongside the rest of your payment methods. This ensures quick access for high volume usage of a specific bank.
Multiple Payments.svg
  • If you 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 selections within the widget.
Mexico Payment Options (1).svg

You can get Bank Logos in different formats here.

Pre-filling user's information

Similar to preselecting your users bank, if you have access to a users payment information (like their RUT in Chile), you can pre-fill this information for users. This is useful to avoid extra steps and to meet any regulatory requirements regarding who makes the payment.

Pre-fill RUT (1).svg

Use our widget guide to get more information on how to do it by pre-filling the username field.

Keep your current background

When opening the widget, don’t redirect users to a new page as this will create new friction points for your users. Instead, keep them in your app or website and open the widget on top and overlay your current screen.

Don't Redirect.svg

Avoid duplicated UI elements

For a user-friendly experience, steer clear of repeating the same elements, keeping the interface clean and straightforward. In Fintoc, we've integrated navigation into the widget, so users can easily access features without unnecessary clutter. This ensures a smoother, more intuitive journey through the platform.

Duplicate UI Elements.svg

Recommended Badge

Add a recommended badge to Fintoc’s option in your checkout and place it as your first option. These changes will incentivize your users to choose Fintoc when paying and help you save in fees.

Recommendation Badge.svg

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, you should react appropriately to each one in order to ensure a retrial of the process. Currently, failed payments include an error_reason to indicate what caused the transaction to fail. You can check them out here.

We highly 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.

React on Errors.svg

Close the loop

When a payment succeeds, it’s important to minimize friction from Fintoc’s flow back into your website or app. We highly suggest you show the consequence of using Fintoc, explaining to your user what happens next. Here are some common use cases:

  • P2P Transfers: Reiterate that the money has been sent and show their account minus the money that was just moved.
  • Fintech wallets/investment: show their account screen with new money clearly added and visualized.
  • E-commerce: show 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.