Button guidelines

Accepted terminology: Paga con transferencia or Paga con SPEI or Paga con transferencia SPEI Supporting images: SPEI logo 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.

Button

Use this if there are other buttons at the checkout.

	Description	HTML
	Mexican dark button with trailing isotype	`<img src="https://assets.fintoc.com/?img_name=button_mx_dark_trailing">`
	Mexican light button with trailing isotype	`<img src="https://assets.fintoc.com/?img_name=button_mx_light_trailing">`
	Mexican dark button with leading isotype	`<img src="https://assets.fintoc.com/?img_name=button_mx_dark_leading">`
	Mexican light button with leading isotype	`<img src="https://assets.fintoc.com/?img_name=button_mx_light_leading">`

Multiple payment options

In case there are multiple payment options listed there are three options you can follow:

Combination (recommended)

If you have more space available, we recommend using the isotype with supporting bank images. We provide you with a single image to reference for ease. Remember that the terminology should be Paga con transferencia or Paga con SPEI or Paga con transferencia SPEI.

	Description	HTML
	Combination of dark isotype with spei logo	`<img src="https://assets.fintoc.com/?img_name=combo_mx_dark">`
	Combination of light isotype with spei logo	`<img src="https://assets.fintoc.com/?img_name=combo_mx_light">`

Logo

If you are using the full logos of other brands, use the full Fintoc logo. The terminology should be Paga con transferencia or Paga con SPEI or Paga con transferencia SPEI.

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

Other logo usage

You may want to display our logo to show who you work with. We provide two URLs for you to embed within your website or app for this purpose. Leave the recommended safe space around our logo.

	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-filling user’s information

If you have access to a user’s payment information (like their telephone number), you can pre-fill this information for users, it will be editable by your user. This is useful to avoid extra steps.
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 the customer to retry. See Payment Intent Error Reason for the full list of reasons. Ask the customer to retry with the required changes. Tell the customer that no money moved because the payment failed.

Close the loop

After a payment succeeds, show what happens next in your website or app. Common use cases include:

P2P transfers: Show a confirmation that the money was sent and update the account balance.
Fintech wallets or investments: Show the account screen with the new balance.
E-commerce: Show a confirmation screen with the amount paid, billing details, purchased products, address, delivery date, or next steps.

Home

Resources

Payments

Transfers

Movements

Mexico Guidelines

Button guidelines

Button

Multiple payment options

Combination (recommended)

Logo

Other logo usage

Other recommendations

Pre-filling user’s information

Keep your current background

Avoid duplicated UI elements

React appropriately when there are errors

Close the loop

​Button guidelines

​Button

​Multiple payment options

​Combination (recommended)

​Logo

​Other logo usage

​Other recommendations

​Pre-filling user’s information

​Keep your current background

​Avoid duplicated UI elements

​React appropriately when there are errors

​Close the loop

Button guidelines

Button

Multiple payment options

Combination (recommended)

Logo

Other logo usage

Other recommendations

Pre-filling user’s information

Keep your current background

Avoid duplicated UI elements

React appropriately when there are errors

Close the loop