Visual Guidelines

To optimize functionality and conversion of Ecster’s payment methods it’s important how you present the payment methods in your web shop. Here you find the guidelines and visuals you need.    

Logos

You can get Ecster logotypes in PNG or SVG. There are varieties for dark or light background. You fetch the logos with a URL and the basic structure is:

https://ecster.se/content/shared/images/logos/{graphic}/{format}/{width} 
 
{graphic}
Output: Graphic:
Ecster logo ecster_logo
Ecster logo negative
ecster_logo_neg
 Ecster symbol green ecster_symbol
Ecster symbol negative
ecster_symbol_neg

{format}
Description: Parameter:                                                            
PNG png
SVG svg                                                        

 

{width}

For PNG you put in the width value in the URL and Ecster will scale it to correct height.

Minimum allowed width
Ecster logo: 50 px
Ecster symbol: 20 px

For SVG you need to prepare an element on your site with a specific width. The width parameter is written in integer without px.
Please note: you may not set height since it can deform the logotype.

Description: Parameter:                                                                       
Width of logo %value%

Banners

You can get Ecster banners in PNG or SVG. There are varieties for dark or light background. You fetch the banners with a URL and the basic structure is:

https://ecster.se/content/shared/images/banners/{graphic}/{format}/{width} 
{graphic}
Output: Graphic:
Ecster banner green
ecster_banner_green
Ecster banner transparent
ecster_banner_transparent
{format}
Description: Parameter:                                                            
PNG png
SVG svg                                                        

 

{width}

For PNG you put in the width value in the URL and Ecster will scale it to correct height.

Minimum allowed width 80 px, maximum allowed width 200 px

For SVG you need to prepare an element on your site with a specific width. The width parameter is written in integer without px.
Please note: you may not set height since it can deform the banner.

Description: Parameter:                                                                       
Width of banner %value%

Other visuals

Here you find other visuals for Ecster functions. There are varieties for dark or light background. The preapplication button "Ansökan om lånelöfte" may only be used for the product "Lånelöfte" by Ecster.

You fetch the visuals with a URL and the basic structure is:

https://ecster.se/content/shared/images/common/{graphic}/{format}/{width} 
 
{graphic}
Output: Graphic:
ecster_preapplication_button_green
Ecster preapplication button bright ecster_preapplication_button_bright

{format}
Description: Parameter:                                                            
PNG png
SVG svg                                                        

 

{width}

For PNG you put in the width value in the URL and Ecster will scale it to correct height.

Minimum allowed width 150 px

For SVG you need to prepare an element on your site with a specific width. The width parameter is written in integer without px.
Please note: you may not set height since it can deform the logotype.

Description: Parameter:                                                                       
Width of logo %value%

Ecster Pay

Guidelines

Presenting Ecster Pay in your checkout is easy. We recommend that you place it below your shopping cart and shipping options.

Breakpoints

These are examples of the breakpoints in different designs. The vertical view is optimal for size between 320-767 pixels. The horizontal view is shown for screens larger than 768 pixels. The max width is 1024 pixels.

Payment badge

Use the Ecster Pay payment badge on your website to inform customers about the available payment options before they go to the checkout. We recommend that you place the payment badge in the sidebar or footer.

Ecster Pay (with Swish)

You can get the Ecster Pay payment badge in PNG or SVG.  You can fetch the badge with a URL and the basic structure is:

https://ecster.se/content/shared/images/logos/{graphic}/{format}/{width} 
 
{graphic}

<tdstyle="background-color: black;">

Output: Graphic:
Ecster Pay badge   ecster_pay2_long_badge
    ecster_pay2_badge_2
Ecster Pay badge

  ecster_pay2_long_badge_transparent 
  (dark background)

Ecster Pay badge   ecster_pay2_badge_2_transparent
  (dark background)

{format}
Description: Parameter:                                                            
PNG png
SVG svg                                                        

 

{width}

For PNG you put in the width value in the URL and Ecster will scale it to correct height.

Minimum allowed width
Ecster Pay badge: 180 px
Ecster Pay badge 2: 120 px

For SVG you need to prepare an element on your site with a specific width. The width parameter is written in integer without px.
Please note: you may not set height since it can deform the logotype.

Description: Parameter:                                                                       
Width of badge %value%

Ecster Pay (without Swish)

You can get the Ecster Pay payment badge in PNG or SVG.  You can fetch the badge with a URL and the basic structure is:

https://ecster.se/content/shared/images/logos/{graphic}/{format}/{width} 
 
{graphic}

<tdstyle="background-color: black;">

Output: Graphic:
Ecster Pay badge   ecster_pay_badge
    ecster_pay_badge_2
Ecster Pay badge

  ecster_pay_badge_transparent 
  (dark background)

Ecster Pay badge   ecster_pay_badge_2_transparent
  (dark background)

{format}
Description: Parameter:                                                            
PNG png
SVG svg                                                        

 

{width}

For PNG you put in the width value in the URL and Ecster will scale it to correct height.

Minimum allowed width
Ecster Pay badge: 180 px
Ecster Pay badge 2: 120 px

For SVG you need to prepare an element on your site with a specific width. The width parameter is written in integer without px.
Please note: you may not set height since it can deform the logotype.

Description: Parameter:                                                                       
Width of badge %value%

Ecster Card only

You can get the card badge in PNG or SVG.  You can fetch the badge with a URL and the basic structure is:

https://ecster.se/content/shared/images/logos/{graphic}/{format}/{width} 

 

{graphic}

<tdstyle="background-color: black;">

 

Output:     Graphic
 ecster_card
 ecster_card_dark
 ecster_card_xl
 ecster_card_xl_dark

  

{format}
Description: Parameter:                                                            
PNG png
SVG svg                                                        

 

{width}

For PNG you put in the width value in the URL and Ecster will scale it to correct height.

Minimum allowed width
Ecster Pay badge: 180 px
Ecster Pay badge 2: 120 px

For SVG you need to prepare an element on your site with a specific width. The width parameter is written in integer without px.
Please note: you may not set height since it can deform the logotype.

Description: Parameter:                                                                       
Width of badge %value%

Invoice

These are guidelines for the Ecster payment method; invoice. In the examples below we have used the correct Swedish term for the payment method (faktura). Please copy the correct examples and use it in your checkout.

Guidelines

Invoice should be typed “Faktura”. “Ecster” should not be spelled out together with Invoice since the invoice is not a sub brand of Ecster. Use the Ecster logotype or symbol in close connection instead.

Don´t Do this instead


As a merchant it’s your decision to charge an invoice fee for this option. The fee should be clearly visible and should be in SEK. You should also specify the payment time for the invoice and present a link to the invoice terms, “Fakturavillkor” (see Communication below on how to fetch the terms).

Checklist for Invoice:


Payment method name is “Faktura” (a)
Payment time specified (b)
Invoice fee specified (c)
Logo in close connection to context (d)
Link to invoice terms “Fakturavillkor” (e)

Communication

What to communicate to the customer

Text responses when you use our web services (applyForInvoiceOrder) for invoice.

Invoice response text (applyForInvoiceOrder)

You can get three different response codes when you use the web service call “applyForInvoiceOrder”. For each response you receive you have to communicate back to the customer what these decisions means. Below you have text responses for you to copy and use;

Decision: Godkänd

Tack för ditt köp!
Ditt köp är nu genomfört hos WEBBUTIKEN. Du får din faktura i samband med leveransen.
Ordernummer xxx
Fakturabelopp xxx kr
Leveransadress Gatunamn xx Postnr Ort

Decision: Nekad

Fakturaköpet kan inte beviljas
Tyvärr kan vi inte erbjuda dig att betala med faktura för detta köp.
Har du frågor angående din ansökan är du välkommer att kontakta Ecster på telefon 0771-675 700.

Fault: Tekniskt fel

Tekniskt fel
Ett problem har uppstått i kommunikationen med Ecster som sköter vår fakturering. Kontakta dem på telefon 0771-560 300 för mer information eller välj ett annat sätt att betala.

Terms

For the invoice terms, you have to specify the invoice fee in the URL.
Note: You have to specify an invoice fee even if you don’t have one. Then you type value “0”.

https://www.ecster.se/content/shared/documents/terms/invoice/html/{invoicefee}

{invoicefee}

The value has to be integer without currency.

Part payment

These are guidelines for the Ecster payment method; part payment. In the examples below we have used the correct Swedish term for the payment method (delbetalning). Please copy the correct examples and use it in your checkout.

Guidelines

Part payment should be typed “Delbetalning”. “Ecster” should not be spelled out since the part payment is not a sub brand of Ecster. Use the Ecster logotype or symbol in close connection instead.

Don´t Do this instead
 Part payment do

 
Show all of the part payment options in connection to the payment method. Clearly specify the monthly cost of each option and present a link to the part payment terms, “Delbetalningsvillkor”.

 When a customer selects a specific part payment option you should show the part payment specifications that you receive from the web service call “getAccountTermsList”.

 The part payment specification should be in connection with the specific payment option. It has to include information about: “Ränta för delbetalning”, “Uppläggningsavgift”, “Administrativ avgift”, “Antal betalningar”, “Effektiv ränta”, “Total kreditkostnad”.

Checklist for part payment:

Checklist part payment

Payment method name is “Delbetalning” (a)
Show all of the part payment options in connection to the payment method (b)
Monthly cost specified (c)
Logo in close connection to context (e)
Show part payment specification (d)
Link to invoice terms “Delbetalningsvillkor” (f)

Communication

What to communicate to the customer

Text responses when you use our web services (applyForAccountOrder) for part payment.

Part payment response text (applyForAccountOrder)

You can get three different response codes when you use the web service call “applyForAccountOrder”. For each response you receive you have to communicate back to the customer what these decisions means.

Below you have text responses for you to copy and use;

Decision: Godkänd

Tack för ditt köp!

Hoppas du blir nöjd med ditt köp hos WEBBUTIKEN. Din ansökan om delbetalning är beviljad och det är nu dags att signera kontoavtalet. Du har fått ett mejl med instruktioner för hur du signerar. När du har signerat kontoavtalet är köpet genomfört och köpet kommer debiteras i samband med leveransen av dina varor.

Om du inte har möjlighet att signera med e-legitimation kan du få ett avtal hemskickat för att skriva under och skicka in till oss. Allt du behöver göra är att kontakta vår kundtjänst 0771-560 300 så ordnar vi det.

Decision: Nekad

Delbetalningen kan inte beviljas

Tyvärr kan vi inte erbjuda dig att delbetala för detta köp.
Har du frågor angående din ansökan är du välkommen att kontakta Ecster på telefon 0771-675 700.

Fault: Tekniskt fel

Tekniskt fel

Ett problem har uppstått i kommunikationen med Ecster som sköter vår delbetalning. Kontakta dem på telefon 0771-560 300 för mer information eller välj ett annat sätt att betala.

Terms

For the part payments terms please use this url:

https://www.ecster.se/content/shared/documents/terms/partpayment/html

 

Card payment

Terms

For the card payments terms please use this url:

https://www.ecster.se/content/shared/documents/terms/cardpayment/html

Request test account