Checkout UX guidelines for Chile

Button and image assets

Accepted terminology: Paga con tu banco or Tarjeta de crédito o débito Supporting images: Combo of Chilean bank logos for Paga con tu banco and Visa + Mastercard logos for Tarjeta de crédito o débito To use our assets, you can directly use the URLs we provide, for example:

HTML

<button>
  <img alt="Fintoc Logo" src="https://assets.fintoc.com/?img_name=button_cl_light_trailing" />
</button>

Refrain from downloading our assets for useWe recommend using the direct URLs to our assets instead. This way, you’ll always have the latest versions without needing to make updates whenever Fintoc changes in the future.

Bank transfer payment button

If your checkout lists multiple payment methods, you can follow one of these options:

Combination (recommended)

If you have more space available, we recommend supporting bank images with the full Fintoc logo. Fintoc provides a single image you can reference. Use the terminology Paga con tu banco.

Image	Description	HTML
	Combination of dark isotype with bank logos	`<img src="https://assets.fintoc.com/?img_name=combo_cl_dark">`
	Combination of light isotype with bank logos	`<img src="https://assets.fintoc.com/?img_name=combo_cl_light">`
	Combination of text “Paga con tu banco” with light isotype and bank logos +12	`<img src="https://assets.fintoc.com/?img_name=text_banks_cl_12">`
	Isotype and bank logos +12	`<img src="https://assets.fintoc.com/?img_name=banks_cl_12">`
	Combination of text “Paga con tu banco” with light isotype and bank logos +16	`<img src="https://assets.fintoc.com/?img_name=text_banks_cl_16">`
	Isotype and bank logos +16	`<img src="https://assets.fintoc.com/?img_name=banks_cl_16">`

Individual banks

In Chile, Fintoc provides the option to pre-select a bank. Use our widget guide to get more information on how to enable these options. Our recommendation depends on your checkout screen:

If Fintoc is your only payment method in Chile: Place single bank buttons outside the widget.
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 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.

Image	Description	HTML
	BCI bank logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_bci_dark">`
	BCI bank logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_bci_light">`
	BICE bank logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_bice_dark">`
	BICE bank logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_bice_light">`
	Banco de Chile logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_de_chile_dark">`
	Banco de Chile logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_de_chile_light">`
	Banco Estado logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_estado_dark">`
	Banco Estado logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_estado_light">`
	Banco Falabella logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_falabella_dark">`
	Banco Falabella logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_falabella_light">`
	Banco Itaú logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_itau_dark">`
	Banco Itaú logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_itau_light">`
	Ripley bank logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_ripley_dark">`
	Ripley bank logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_ripley_light">`
	Santander bank logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_santander_dark">`
	Santander bank logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_santander_light">`
	Scotiabank bank logo and dark isotype	`<img src="https://assets.fintoc.com/?img_name=bank_scotiabank_dark">`
	Scotiabank bank logo and light isotype	`<img src="https://assets.fintoc.com/?img_name=bank_scotiabank_light">`

Logo

If you display the full logos of other brands, use the full Fintoc logo. Use the terminology Paga con tu banco.

Image	Description	HTML
	Dark logotype	`<img src="https://assets.fintoc.com/?img_name=logo_dark">`
	Light logotype	`<img src="https://assets.fintoc.com/?img_name=logo_light">`

Card payment button

Add the credit or debit card payment button that matches your checkout configuration: Example of checkout button on light and dark modes following the guidelines:

Image	Description	HTML
	Horizontal logos to use with the text “Tarjeta de crédito o débito”	`<img src="https://assets.fintoc.com/credit_card_assets/credit_card_horizontal" alt="Fintoc and Card Brands Logos" style="max-width: 100%; height: auto;">`
	Vertical logos to use with the text “Tarjeta de crédito o débito”	`<img src="https://assets.fintoc.com/credit_card_assets/credit_card_vertical" alt="Fintoc and Card Brands Logos" style="max-width: 100%; height: auto;">`

Other logo usage

To show your users that you work with Fintoc, display the Fintoc logo. Fintoc provides two URLs that you can embed in your website or app. Leave the recommended safe space around the logo.

Image	Description	HTML
	Dark imagotype	`<img src="https://assets.fintoc.com/?img_name=imagotype_dark">`
	Light imagotype	`<img src="https://assets.fintoc.com/?img_name=imagotype_light">`

Other recommendations

Pre-fill your user’s information

Similar to preselecting your user’s bank, you can pre-fill your user’s payment information, such as their Chilean tax ID (RUT), if you have access to that information. You can make the field editable or not. Pre-filling avoids extra steps and helps you meet any regulatory requirements regarding who makes the payment.
Use our widget guide to get more information on how to pre-fill 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.

Avoid duplicated UI elements

Avoid repeating navigation elements. Fintoc already includes navigation in the widget, so users can move through the payment flow without duplicate controls.

React appropriately when there are errors

Fintoc handles recoverable errors inside the widget. For final-state errors, use error_reason to explain why the transaction failed and guide your user to retry. See Payment Intent Error Reason for the full list of reasons. Ask your user to retry with the required changes. Tell them that no money moved because the payment failed.

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.

Home

Resources

Payments

Business Accounts

Movements

Skeleton group medium 9

Checkout UX guidelines for Chile

Button and image assets