Payment module presentation
Overview
The payment section in the SCAYLE Panel provides you with various options for customization to provide a seamless checkout experience for your users. Below, you’ll find detailed guidance on accessing and configuring these settings, along with examples and helpful tips to ensure your setup meets your needs.
Note: It is not possible to turn on specific payment methods nor service providers (PSPs) in the SCAYLE Panel. To do so, please, reach out to your SCAYLE Account Manager.
SCAYLE offers multiple ways to individualize the Checkout experience.
You may
- Add a short description to your payment option
- Add a tool tip to your payment option
- Hide the payment icons
- Display multiple or a specific payment icon
- Disable a payment option via rule engine
Understanding Payments frontend
In SCAYLE's frontend payment system, the payment concept is defined by two key elements:
And two optional text components
PaymentOptionKey
The PaymentOptionKey
defines, which payment service provider (PSP) is used, OR which specific payment method. For example standard_cod
refers to Cash on delivery and klarna_paynow
refers to Klarna's pay in advance.
The payment backend system uses the PaymentOptionKey
to channel the user to the correct payment method.
The PaymentOptionKey
is created during the integration of a PSP or the creation of a new payment method by SCAYLE and cannot be altered.
Icons
When a new PaymentOptionKey
is created SCAYLE will always assign a specific icon
to it.
Icons
refer to credit or debit card flags (like Maestro, Visa, etc) , logos of payment partners (such as Paypal, Klarna, etc) or your own personalized icons
(for instance some tenants want to create their own credit card logo instead of using the card flags or want to personalize the SCAYLE default icons for options like cash on delivery).
Descriptions
By default, payment methods do not have a description. But if you turn this configuration on, you are able to add a short description that fit your specific marketing and branding needs, of why your user should choose a specific payment method. You may choose to add some crisp marketing text like: "Pay safely with Paypal", or "Buy now worry later. Pay with Klarna."
Tool tips
By default, tool tips are turned off. You can use tool to inform users of benefits of using that payment method, information about refunds, or any information that fits your needs, but is tad bit too long for the description.
Configuring your payment Frontend
Feature overview
To access the Payment Configuration section, go to Shops > Storefront > Checkout Settings > Checkout Frontend Configuration
in your Panel, then select Payment Options
from the left menu.
From here you are able to:
Configuring icons
As a SCAYLE tenant you are able to control the only the icons
of the payment module overview. The icons
inside the payment options (module that opens when the user selects a payment method) are controlled by the Payment Service Provider.
You have 3 possible configuration for icons: Hide them, display a specific or multiple icons for one specific PaymentOptionKey.
Hide icons
Imagine you ran a user study, and as feedback, they said the payment module is too crowded. Your research and brand teams recommend removing the noise of this module. To do that, you can hide the payment method icons.
Go to Shops > Storefront > Checkout Settings > Checkout Frontend Configuration
in your Panel, then select Payment Options
from the left menu. Locate the option Hide Payment Icons. This configuration is off by default. To hide icons, turn hidePaymentIcons
on. To keep them visible, keep this configuration off. Hit save.
Display specific icon
Let's imagine that your company has struck a deal with Paypal and you want to have your on special logo during this campaign. On Panel, access Shops > Storefront > Checkout Settings > Checkout Frontend configuration > Assets
and look for Paypal.
If you want to change only the assets at the payment step, click edit on payment/payPal.svg
Add your desired image. Hit save.
Please make sure to use an icon with 32px height by 50px width and SVG format. Also remember to change the icon once the campaign is done (as this cannot be programmed to stay on for only a certain period of time).
Display multiple icons
Picture this: instead of showing only one logo which SCAYLE has given you by default for say Credit Card payment method, you want to show Visa, MasterCard and CarteBancaire for France. But in Brazil you want to show Visa, Master and Amex.
To configure multiple logos for one payment method you must know what PaymentOptionKey
you want to configure it for. You can find here a list of all available PaymentOptionKeys
here and a list of all available icons
here.
Still not sure which PaymentOptionKey to choose? Add the following parameter at the end of the URL to reveal the PaymentOptionKey on your checkout in the payment step > payment module: showPaymentOptionKeys=true
Go to Shops > Storefront > Checkout Settings > Checkout Frontend Configuration
in your Panel, then select Payment Options
from the left menu. Locate the option Payment brand list, Payment Option key and Icons.
Select your desired pairing of PaymentOptionKey
and Icon
as described bellow. Hit save.
You don't know what paymentOptionKey
and icon
to choose? check this list.
[
{
"paymentOptionKey": "adyen_creditcard",
"icons": [
"maestro",
"mastercard",
"mbway",
"iDeal",
"visa",
"blik"
]
}
]
Up to 4 icons will be displayed at once. If you configure more then 4 they will be hidden behind a tool tip.
Configure Descriptions
You may want to explain your end users the benefit of using a certain paymentOptionKey. You can use this description for it. Each short description has their own translation key, and you can translate them in Crowdin.
To enable descriptions for payment methods go to Shops > Storefront > Checkout Settings > Checkout Frontend Configuration
in your Panel, then select Payment Options
from the left menu. Locate the option Descriptions, and turn Short on. Hit save. This option is disabled by default.
If your texts for the description is too long, we will automatically break the translation into several lines, while keeping everything centralised, so the design will not break. But for a more aesthetic component we recommend your translation occupies a maximum of 2 lines. If you have only one icon configured this is about 91 characters.
If you have multiple icons configured, less text will fit. You can test by inspecting element on your checkout and locally overwriting the description.
A few examples of different text lengths for the description configuration:
Configure Tool tips
Imagine the scenario again where your company is running a campaign with a certain Payment method, and you want more real state to explain the user why should they choose this payment method over another one. You have changed the icons, but the description area is too short for all you need to say. Worry no more!
To enable tool tips for payment methods go to Shops > Storefront > Checkout Settings > Checkout Frontend Configuration
in your Panel, then select Payment Options
from the left menu. Locate the option Descriptions, and turn Tool Tip on. Hit save. This option is disabled by default.
Bear in mind that like descriptions, tool tips can be translated. Each tool tip has 2 string, one for its title, and one for the body. Check out how to translate them here.
Configuring rules to disable payment methods
As a SCAYLE tenant you are able to certain rules whereby a user will not be allowed to pay for a certain order with certain payment method.
Say for business reasons, you do not want users to pay with Klarna Pay now for orders smaller then 500 euros. To do so, access Shops > Storefront > Checkout Settings > Rule Engine
in your Panel. Click on add new rule.
Fill out name, and short description. Under conditions select payment > amount
, <= to the value you would like (in this example 500), and all match. Under results payment > your Paypal paymentOptionKey
then deactivate_payment_method.
For more on the rule engine, visit our Rule engine guide.
Deactivate payment method means it will still be visible on the front end as the screenshot bellow, but while visible it is not clickable. Disable means the payment is not visible, nor selectable
Translations
Make sure to add necessary translations for the tooltip and short description texts.
shortDescription
, toolTipHeadline
and toolTipText
are located under {Crowdin translations}.payment.paymentMethod.optionDescriptions.{specific payment option}
.
Find out more about using Crowdin platform.
Appendix
List of available PaymetOptionKeys
| 'standard_cheque'
| 'standard_creditcard'
| 'standard_invoice'
| 'standard_pay_in_advance'
| 'standard_cod'
| 'bg_cod'
| 'cy_cod'
| 'cz_cod'
| 'dhl_cod'
| 'ee_cod'
| 'es_cod'
| 'gr_cod'
| 'hr_cod'
| 'hu_cod'
| 'it_cod'
| 'lt_cod'
| 'lv_cod'
| 'pl_cod'
| 'pt_cod'
| 'ro_cod'
| 'sa_cod'
| 'si_cod'
| 'sk_cod'
| 'accounting'
| 'adyen_apple_pay'
| 'adyen_creditcard'
| 'adyen_google_pay'
| 'adyen_ideal'
| 'adyen_klarna_paynow'
| 'adyen_klarna_paylater'
| 'adyen_klarna_installments'
| 'adyen_mbway'
| 'adyen_mobilepay'
| 'adyen_paypal'
| 'adyen_online_banking_pl'
| 'adyen_twint'
| 'afterpay_invoice'
| 'amazon_pay'
| 'arvato_creditcard'
| 'arvato_p24'
| 'arvato_paypal'
| 'arvato_ideal'
| 'computop_applepay'
| 'computop_bancontact'
| 'computop_creditcard'
| 'computop_creditcard_mastercard'
| 'computop_creditcard_visa'
| 'computop_googlepay'
| 'computop_maestro'
| 'computop_paydirekt'
| 'computop_payu'
| 'computop_payu_cee'
| 'computop_payu_twisto'
| 'computop_postfinance'
| 'klarna_paylater'
| 'klarna_paynow_direct_debit'
| 'klarna_paynow_direct_bank_transfer'
| 'klarna_installments'
| 'klarna_paynow'
| 'paypal'
| 'paypal_instant'
| 'ratepay_directdebit'
| 'ratepay_invoice'
| 'saferpay_bancontact'
| 'saferpay_creditcard_maestro'
| 'saferpay_creditcard_mastercard'
| 'saferpay_creditcard_visa'
| 'saferpay_ideal'
| 'saferpay_p24'
| 'saferpay_twint'
| 'spay_adyen_apple_pay'
| 'spay_adyen_blik'
| 'spay_adyen_credit_card'
| 'spay_adyen_creditcard_bc'
| 'spay_adyen_google_pay'
| 'spay_adyen_ideal'
| 'spay_adyen_mobilepay'
| 'spay_adyen_online_banking_pl'
| 'spay_adyen_twint'
| 'spay_klarna_paynow'
| 'spay_paypal'
| 'spay_klarna_paylater'
| 'spay_klarna_payovertime'
| 'unzer_creditcard'
| 'witt_cod'
| 'witt_deferred_invoice'
| 'witt_invoice'
| 'witt_pay_instalments';
List of available Icons
| 'afterPay'
| 'amazonPay'
| 'amex'
| 'apple'
| 'applePay'
| 'bancaires'
| 'bancontact'
| 'blik'
| 'cod'
| 'creditCard'
| 'dinersClub'
| 'discover'
| 'giropay'
| 'google'
| 'googlePay'
| 'iDeal'
| 'invoice'
| 'isracard'
| 'jcb'
| 'klarna'
| 'maestro'
| 'mastercard'
| 'mbway'
| 'mobilePay'
| 'ob'
| 'p24'
| 'payPal'
| 'payU'
| 'postFinance'
| 'ratepay'
| 'ratepayInvoiceDe'
| 'ratepayInvoiceEn'
| 'ratepayInvoiceFr'
| 'ratepayInvoiceNl'
| 'riverty'
| 'sepa'
| 'sepaDirectDebit'
| 'twint'
| 'twisto'
| 'unionPay'
| 'unzerInvoice'
| 'visa';