Payment Screen Customization

Overview#

When your customer opens a paymentUrl, they land on the Pluggy payment screen, where they choose their bank and authorize the payment. From the Dashboard, under Payments > Customization, you can make that screen look like your product: your company name and logo, and your colors.

The customization applies to every payment of an application: immediate Pix and Pix Automático alike, on desktop and on mobile. The amount, the recipient, the list of banks, the Open Finance information and the "Powered by Pluggy" footer are never customizable, so your customers always see the payment details as they are.

Team default and per-application customization#

There are two levels:

• Team default: applies to every application of the team, including the ones you create later. It does not belong to an environment: it applies to your sandbox and production applications alike.
• Application customization: the first time you save an application, it gets a customization of its own, starting from a copy of the team default. From then on, changes to the team default no longer affect it.

When your team has more than one application in the environment selected in the Dashboard, choose which one to edit with the Application selector below the page title. The first option, All applications (team default), edits the team default. Each application shows whether it has its own customization or uses the team default, and an application with its own customization can go back to it at any time with Use the team default.

What you can customize#

Company name#

Shown next to the logo, at the top of the payment screen. Up to 30 characters.

Logo#

Shown at the top of the payment screen, next to the company name. Upload a PNG, JPG, SVG or WebP file of up to 5 MB. Unlike the widget, the payment screen only accepts uploaded logos, not URLs.

The file is checked by its content, so a file renamed to another extension is rejected. SVG files are cleaned before being stored: scripts and references to external files are removed, so use a self-contained SVG (an embedded picture is kept, a linked one is not shown).

Without a logo, the screen shows the first letter of your company name on your main color.

Main color#

Used on the buttons and highlights of the payment screen, with white text over it. Enter it as a six-digit hex color (#RRGGBB) or pick it. Use a color dark enough for that text to be easy to read: the Dashboard warns you when it is not, but it does not stop you from saving it.

Secondary color#

Also a six-digit hex color. Used on secondary buttons, with white or black text depending on which reads better, and on the details of Pix Automático payments (the recipient and the first payment). With Follow main color on, the secondary buttons are outlined in your main color, and the Pix Automático details use your main color's scale: the color itself, or lighter and darker shades of it, depending on where it is shown.

Reusing your Pluggy Connect widget customization#

If you already customized the Pluggy Connect widget, you can reuse its company name, logo and main color instead of entering them again. Turn on Use the widget's next to each field: the field shows the widget's value and keeps following it, so a change to the widget customization also changes the payment screen.

Each field chooses on its own: reusing the widget's company name does not bring in its logo or color. While a field follows the widget, the value you had entered for it is kept, and comes back when you turn Use the widget's off.

A field is only available for reuse when the widget customization has a value of its own for it. The widget's defaults (the default company name, the Pluggy logo and the Pluggy color) are not reused, and neither is a widget logo whose address is not https.

Preview#

The page shows a live preview of the payment screen as you edit, before you save. Switch between an immediate Pix payment and a Pix Automático one, and between the desktop and mobile layouts.

When changes show up#

After you save, new payment screens use the customization within about a minute. A customer who already has the payment screen open sees it the next time they load it.