> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://amer.developers.trustly.com/integrate/get-started/branding-guidelines/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://amer.developers.trustly.com/_mcp/server.

# Branding and experience requirements

In order to maximize end-user benefits and remain compliant with the brand and legal requirements, Trustly requests 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 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 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 lineup.  A collection of mark variants in a wide range of footprints, colors, and content is 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 Checkout**. 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 payment option to the end-user 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.

Consistent use of the 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. 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.

### Payment Mark layout patterns

Choose the layout pattern based on the size and format of your existing payment method list:

**Image only** — Use when all three mark elements must render as a single image: name, bank icons, and brand ("via Trustly").

**Text + auxiliary image** — Use when one element renders as inline text with room for a smaller supporting image: name as text ("Online Banking via Trustly"), bank icons and brand as image.

**Text only / text + icon** — Use when your list only supports inline text: name as text ("Online Banking").

#### Do's and don'ts

* Use the mark **with** "Online Banking" text when your payment method list is image-only.
* Use the mark **without** "Online Banking" text when your list already names payment methods in text.
* Evaluate your available real estate before choosing a pattern, to maximize visibility of all mark elements.

The [Mark library](/integrate/get-started/branding-guidelines/mark-library) has more information on available Trustly Marks and their specific use-cases. For guidance on customization options, refer to the **Integration Best Practices** section or work with Trustly Experience Services.

## Trustly Hosted Assets - [Mark library](/integrate/get-started/branding-guidelines/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.

<table>
  <thead>
    <tr>
      <th />

      <th />
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        * *Mark*\*\
          \
          Payment method title as image format + visual accessories such as bank icons.
      </td>

      <td>
        ![](https://paywithmybank.com/assets/mark_trustly-256x65/mark_trustly-256x65-2_light_en-US.png)
      </td>
    </tr>

    <tr>
      <td>
        * *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 are recommended if the merchant is not using a Gold Standard Implementation and needs to display an accompanying benefit message.
      </td>

      <td>
        ![](https://paywithmybank.com/assets/banner_trustly-380x90/banner_trustly-380x90-2_light_en-US.png)
      </td>
    </tr>

    <tr>
      <td>
        * *Icon*\*\
          \
          The bank icons are used to illustrate the Online Banking option in the payment lineup.
      </td>

      <td>
        ![](https://paywithmybank.com/assets/icon_trustly-80x80/icon_trustly-80x80_1_light_en-US.png)
      </td>
    </tr>
  </tbody>
</table>

> **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](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](/integrate/core-concepts/content-strings).

## Trustly Invisible Pixel

If none of the recommended assets can be integrated, Trustly will allow using an invisible pixel to track impressions of the payment page. This is a 1x1 transparent pixel that works like any brand or payment mark. It will be an image inside a URL within your environment. It’s possible to set other parameters for tracking purposes through alternative methods should the need arise. Speak with the Trustly Solutions team or your Engagement Manager to configure unique implementations.

## Trustly Widget

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

![](/_fern-img/390860f38f9aaf47805d66df70cc2916b157484f27370238c4b1d33756b93f31.webp)

#### Desktop Widget Experience

![](/_fern-img/fda68e0b23b067cf3f917f99e0dae7df6ad22718eee4620a5c70df345955823e.webp)

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 12 tiles in a 3x4 grid (3 rows by 4 columns) on desktop, and a 2-column grid on mobile devices. You can also configure the desktop widget to display 9 tiles (3x3) or 6 tiles (2x3) to best fit your checkout environment. One of the spaces is always reserved for the "All other banks" tile, which opens the full list of available banks.

> **Note**
>
> 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.

![](/_fern-img/2e2e17f6aea4ac696ee0aacf516b786fb0070177e5816ff5c10a5f2c58f2ffaa.webp)

### Account selection button labels

The **Choose an account** screen displays a call-to-action button whose label depends on the transaction type:

* `Deposit`
* `Pay Now`
* `Deposit {amount}`
* `Pay {amount}`
* `Continue`

### Desktop Lightbox:

![](/_fern-img/1dc53ede26649d32f897422a6abf82059abbaf1e149ae1d559364001306bd67e.webp)

> **Note**
>
> If you require the billing address for the transaction and it hasn't been collected, it should be retrieved using the [Get User API](/api-reference/api/identity/get-trustly-id-user-data) 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.

![](/_fern-img/da3e4767da8e85692224dd6a7d64824b0d9e63a30db2463f944eb6e8e97ddb26.webp)

### 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.

![](/_fern-img/1bfbd960898f1133f3e92ae4fc5f6f0152f196b20bfac32530a7b021d51c8111.webp)

## 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 example `https://trustly.one/start/assets/institutions/\{paymentProviderId}.png` for the logo, or `https://trustly.one/start/assets/institutions/icons/\{paymentProviderId}.png` for the icon.
* The Bank Account name can be retrieved using the transaction.payment.account.name field in the Get Transaction API.

![](/_fern-img/44425a20b59cf9ae5c1f73c4f0fb8144d85d62d1788e65d1078950a2093a869c.webp)

## Desktop Account on File View

![](/_fern-img/e4669a8334f414bfabdef01be5fb3a4c19b9a3c39b1dcca3b3d416e0bb452fbf.webp)

## Docs

- [Mark library](https://amer.developers.trustly.com/integrate/get-started/branding-guidelines/mark-library.md)