The Trustly Brand

Trustly is a safe, easy way to make payments and retrieve financial information on websites and mobile apps. By using their Online Banking credentials, users can authorize payments, confirm their identity, and grant controlled access to their financial information. Trustly’s patented technology ensures all credentials are securely encrypted and safeguarded so neither the merchant nor Trustly can access them.

In order to maximize end-user benefits and remain compliant with the brand and legal requirements, we request that merchants and partners adhere to the Trustly Brand and Experience Requirements along with the Trustly Presentation Standards. These requirements are best practices designed and proven to enhance the end-user experience and therefore contribute to a high conversion rate.

Trustly provides a highly customizable set of experience options. The examples below show some of what is possible. Trustly Experience Services are available to assist with determining the customization options that match your needs.

Trustly Brand and Experience Requirements

Trustly provides hosted assets and pre-approved messaging to use on your site or app when providing or referring to Trustly and Trustly solutions. The use of Trustly hosted assets and pre-approved messaging is required to be compliant with Trustly as well as NACHA and other agency regulations and requirements, when applicable.

Websites and apps with Trustly solutions must display the applicable Trustly Mark wherever available payment and data options are shown and whenever the Trustly service is being introduced.

Where applicable, the Trustly Widget, Express Checkout Button, and Sign-In Button are also presented following the instructions for each asset.

Clicking on the Trustly Payment or Data Mark, presents the Trustly Widget if it's not already displayed. Selecting a bank tile on the Trustly Widget presents the Trustly Lightbox where users log in to their bank using their Online Banking credentials to grant data access or payment consent.

More information on each Trustly asset and element can be found below, along with experience styles to achieve the best possible Trustly experience for end-users in your website or app.

The Trustly Assets

Where and how Trustly appears within your website or app may vary slightly depending on your use case. The assets below are used to provide and promote Trustly to end-users. Using Trustly hosted assets is a requirement for certification and launch of your integration, so it is important to understand what the Trustly assets are and how they apply to your use case.

1. Trustly Mark

The Trustly Mark identifies Trustly as an available option to the end user and is typically displayed in the payment line up. A collection of mark variants in a wide range of footprints, colors, and content are available to match your experience context and can include the title of the method, an image, and a benefit message. The mark used depends on your user interface.

2. Trustly Widget

The Trustly Widget has selectable bank tiles for the most frequently used banks within your website or app. Presenting the Widget directly in the payment lineup creates a one-click user flow that drives maximum conversion. Additional banks can be chosen by selecting the "more banks" tile.

3. Trustly Lightbox

The Trustly Lightbox opens from the Widget (or from a call to action, see below) for the user to authenticate by logging in to their selected bank and choosing the bank account they want to use.

4. Trustly Buttons

Certain scenarios require the use of a button to initiate the Trustly payment method, like Express Check-Out. In these cases, Trustly provides branded buttons with service-specific messaging.

5. Trustly Notifications & Emails

Any notification, email, or other communication that mentions Trustly solutions, whether transactional or promotional, must use Trustly-approved messaging (e.g. for product naming). Speak with Trustly Marketing Services if you need help crafting the perfect message.

Trustly Mark

The Trustly Mark identifies Trustly as an available option to the end-user as an available payment option and can include the title of the method, an image, and a benefit message, depending on the use case and existing interface.

Trustly provides several asset styles which you can use in your app or website to communicate the availability of Trustly as a payment option or authentication service.

Always the use of approved Trustly Marks ensures:

  • A mark that is guaranteed to use a Trustly-approved caption, font, color, and style
  • That the mark’s contents maintain ideal proportions as you change its size
  • The mark’s caption can be automatically translated (default: English)

🚧

Warning

Do not create your own Trustly Mark design or attempt to mimic the system-provided button designs. Using the approved Trustly Marks ensures: In order to remain in compliance with the Trustly Branding Requirements, you must use the assets that are hosted on the Trustly CDN. It is not acceptable to host any of the Trustly assets in your own environment.

To comply with Trustly Brand and Experience Requirements, you must use assets hosted in the Trustly CDN. Hosting of Trustly assets in your own environment is not permitted.

The Mark Library following this section has more information on available Trustly Marks and their specific use-cases, see. For guidance on customization options, refer to the Integration Best Practices section or work with Trustly Experience Services.

Trustly Hosted Assets - Mark Library

There are several approved hosted assets that you can leverage, depending on the layout of your payment lineup. They are listed below.

  • Banners - Banners are typically used when you're showing Pay with Online Banking as a method of payment.
  • Buttons - Buttons are typically used when you're providing a call to action to initiate the Trustly experience.
  • Payment Marks - Payment Marks are typically used when you have a call to action to initiate the Trustly experience or want to show that Online Banking is available as a method of payment along with other methods of payment on your site.
Mark

Payment method title as image format + visual accessories such as bank icons.
Mark ExampleMark Example
Banner

A big component that usually is composed by a text part that is not necessarily Online Banking or Trustly, but a phrase + benefit message or bank icons, banners appear especially if the merchant is not using a Gold Standard Implementation and needs to be accompanied by a benefit message.
Banner ExampleBanner Example
Icon

The bank icons are used to illustrate the Online Banking option in the payment lineup
Icons ExampleIcons Example

📘

Note

If Trustly does not have a valid icon for a bank, Trustly provides a default bank icon instead. You can control the color of the default bank icon by adding a default query string parameter with a value of green, outline, black, or gray to the icon url defined above. If you don't specify a value, then green is used. For example, https://trustly.one/start/assets/institutions/icons/255075576.png?default=black.

If you have specific asset requirements that aren't shown here, contact your Account Team.

Trustly Hosted Strings - String Library

Trustly Hosted Strings will allow you to dynamically serve the non-graphic elements of the Payment Mark - the title, the benefit message, the learn more text - through a string provided by Trustly. More information on this topic can be found here.

Trustly Widget

The Trustly Widget displays the top banks as 1-click tiles which maximize conversion. This step reduces a step in the checkout process for a majority of users and is highly recommended.

Use the selectBankWidget function to display a Trustly Widget inline on your page which allows the User to select their bank. The SDK controls opening the Trustly Lightbox where the User will complete their Bank Authorization.

By default, the Trustly Widget displays 6 tiles in a 4x3 grid (2x3 grid on mobile devices). One of the spaces is always reserved for the "All other banks" tile, which opens the full list of available banks.

📘

Info

Do not open a pop-up window to display the Trustly Widget. This can be accomplished with the Trustly Lightbox option described below.

Trustly Lightbox

The Trustly Lightbox is recommended as a second step to the Widget, but in certain use-cases will be the first step (see below). The Lightbox is where the user logs in to the Online Bank and selects an account to use. If a bank is not already selected on the Widget, the Lightbox also displays a list of banks to choose from, including a search option that allows users to seamlessly find their regional bank that may not be in the 8-12 Top Banks listed in the Widget, and at the top of the list.

If the payment process is triggered by a call to action (i.e. a button to “Select Payment Method”) and directing the user to a payment flow where the Trustly Widget isn't applicable from a User Experience standpoint, you can launch the Trustly Lightbox directly from your call to action.

In either case, the user selects their bank from either the Lightbox or the Widget, then in the Lightbox authenticates (including multi-factor authentication when required), and selects their account. Then they are redirected to a Return Page in your site or app with a Success Message. More information on the Lightbox flow and what your users will see within the Trustly experience can be found in the Integration Best Practices and Available Customizations sections below.

📘

Info

If you require the billing address for the transaction and it hasn't been collected, that should be retrieved using the Get User API and shown to the user once the Trustly experience is completed.

Trustly Buttons

Express Checkout Button

Skip the checkout line! Presenting Trustly high in the funnel will reduce friction for users and help them checkout faster.

Trustly Sign-In Button

Sign in with Trustly allows users to perform an action without first having to create an account on your site, reducing friction.

Account on File

You must display the Bank name or logo and Bank Account name when displaying the method of payment used with the transaction. These details will come from a Trustly API.

  • The Bank name can be retrieved using the transaction.payment.paymentProvider.name field in the Get Transaction API.
  • The Bank logo can be retrieved using the transaction.payment.paymentProvider.paymentProviderId field in the Get Transaction API and using the Image URL: For the Logo OR For the Icon
  • The Bank Account name can be retrieved using the transaction.payment.account.name field in the Get Transaction API.

Notifications (Contextual/Transactional)

There are certain required notifications that must be sent when the transaction occurs, and by extension requirements for how the Trustly brand is presented within those notifications.

Transaction Confirmation

You must send transaction confirmation communication via SMS/text message or email. This communication should include (at a minimum):

  • Amount of the transaction
  • Descriptor use with the transaction (provided to Trustly during account setup, not to exceed 16 characters).
  • Bank Account Name used for the transaction (retrieved from the transaction.payment.account.name field in the Get Transaction API).
  • Expected transaction settlement timing ('3-5 banking days').

Trustly Marketing Services

Beyond required transactional emails, additional communications that mention Trustly must adhere to Trustly naming conventions and the Trustly Brand Standards and Usage Policy.

Trustly Marketing Services are available to help you craft the strategy and content to fuel user adoption in promotional emails, banners, other touchpoints, and campaigns.

Below are some examples of co-marketing campaigns that will drive consumer adoption:

Integration Best Practices

The Integration Best Practices outlined below help you identify and align on the best possible Trustly Presentation Standard for your website or app to maximize user adoption and conversion.

The key drivers to user adoption and transaction completion, and have determined several best practice recommendations and service standards that can help lead to maximum benefits with the Trustly solutions.

  1. Naming, Mark, Banner - What is this payment method? How do I spot it rapidly?

Best: “Pay with Online Banking” or “Online Banking” + Mark / Banner

  1. Placement, Endorsement - How visible and promoted is it?

Best: 1st in payment line + “Preferred” endorsement

  1. Benefit Message - Why should I use it?

Best: “No card needed” or “Simple and safe — no card needed”

  1. Flow - How easy is it to use? 1 or 2+ clicks to bank sign-in

Best: Widget with bank tiles to select bank and get to bank sign-in in 1 click

  1. Tooltip - What is it in more detail?

Best: “Learn more” or “What’s this?” element with our service description

Trustly offers defined assets, pre-approved messaging, and best practice recommendations to optimize these key drivers within your website. Using our assets and messaging ensures your integration is compliant with the Trustly Brand and any applicable NACHA and other agency regulations and requirements, and sticking to our Product Presentation Standards, you will provide the best possible experience for your end-users.

Trustly Experience Patterns

The Trustly Experience Patterns below are playbooks for maximizing the benefits of Trustly for you and your users.

Prominent Placement Experience

Position Trustly first in the payment line-up, as a preselected option tagged as “Recommended”.

We know not every interface or use case will allow for this exact presentation, so you can use the Product Presentation Standards to align the Trustly Brand Standards to your real-world implementation of the Trustly product.

Express Experience

With Express, the user skips the shipping form and payment lineup, avoiding many clicks and form-filling friction; shipping information is auto-filled on the ‘Review and confirm order’ page.

Naming, Mark & Benefit Message - “Pay with Online Banking” button, with built-in benefit message
Placement & Endorsement - 1st in express checkout lineup on the shopping cart page

One-Click Experience (Prominent Placement + Visible Widget)

1st Placement, Pre-selected, Endorsed

One-Click requires Trustly be first in the lineup, and preselected from the list of options, with a “Recommended” endorsement and the widget visible within the lineup. This will give the user the fewest number of clicks (besides Platinum) to complete their transaction.

Two-Click (Widget or Lightbox after Click), 1st Placement, Pre-selected, Endorsed

Two-Click is for use-cases where the widget cannot be displayed within the payment lineup but is less ideal because it introduces a second step. If you cannot place the widget within the payment lineup itself use this placement instead.

Naming, Mark & Benefit Message - Single or separate “Online Banking” element + “bank icons” element with built-in benefit message
Placement & Endorsement - 1st + preselected in payment lineup or “Preferred” endorsement

Lineup Listing Pattern

The Lineup Listing option includes any other design subject to the use of Trustly-approved Naming, Mark, Banner, or APIs from the Two-Click option without the added benefit of primary placement, benefit messaging, or preferred endorsement.

The Lineup Listing option should only be used if none of the other standards can be achieved within the current UI, and/or by a specific exemption granted by the business.

Naming & Mark - Trustly-approved asset or string must be used for any element available in the lineup
Placement - Best practice is in the first position, but if not possible, identify the next best position based on the layout, and placement of the “next” / “confirmation” button in your interface

Outside the Payment Lineup - Additional UX Considerations

The primary place where users will engage with the Trustly service is within the payment lineup, but that is only one action within the user experience, and maximizing engagement with the Trustly brand outside of the payment line is another way to improve user adoption.

Product & Service-Specific Branding

Content about certain messaging being related to product types and use-cases like RTP.

RTP - Instant Payments

Instant payments where available need to be communicated clearly to the user - Trustly recommends differentiating these from “normal” payments.

In addition to presentment standards, it is recommended that instant payment availability be indicated as shown below.

Available Customizations

Within these requirements, Trustly offers a range of customizations to fit within your site. More information about what can be configured is found here, and if you don’t see what you’re looking for, your Sales Partner or Engagement Manager will partner with you to configure the optimal setup for your website or app.

Within the Payment Lineup

Learn More Content

You can use the following approved text on your site to provide more information about the Trustly mark:

Option 1 - Trustly Online Banking is a convenient alternative to cards, which allows you to make or receive payments by signing into Online Banking without leaving our site. It's simple and safe - no card or bank information to provide.

Option 2 - Simple and safe - no card or bank information to provide

If you have specific requirements that aren't handled by the text here, contact your Account Team or [email protected]

Within the Widget

Items available for customization are:

  • Number of columns to display (default is 3).
  • Number of rows to display (default is 2).
  • Colors and font used can be customized to match your site.
  • Title ("Pay with Online Banking") and Benefit Message ("Simple and safe ...") can be customized to fit the agreed-upon placement
  • Benefit messaging is customizable to your requirements and use case. Your Engagement Manager will coordinate messaging appropriate to your use case to optimize your conversion.

Within the Lightbox

Security Slider
Trustly displays a Security Slide to the User after they select their Bank. This slide is shown over the Bank Authentication screen in our Lightbox.

Items available for customization are:

  • Background color of the slider: RGB or HEX color (rgb(0, 152, 208) is shown). The color of the text will remain white, so a dark color is required. We can optionally add a gradient to the background, which will (as shown in Figure 2).
  • Accent color of the slider: RGB or HEX color (rgb(0, 255, 255) is shown in Figure 2). This color is used for accents on the page: bullet list and button outline.
  • Merchant logo: URL (not shown). Provide the URL of a white logo that can be used to tie your brand to our lightbox. The maximum size of the logo should be 34px tall by 125px wide.

Account Selection

Whether or not the NACHA language displays depends on the transaction type - this language appears whenever there is a movement of funds.

Items available for customization are:

  • Final button label (‘Continue’ is shown here).

Depending on your particular flow and use case, we can change the label of the final button. If your use case calls for a slightly different label, please email [email protected]


Did this page help you?