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.

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:

1. PaymentOptionKey
2. Icons

And two optional text components

1. Descriptions
2. Tool tips

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:

1. Configure Icons
2. Configure Descriptions
3. Configure Tool tips
4. Configure rules to disable payment methods

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.

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.

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.

Copy

[
  {
    "paymentOptionKey": "adyen_creditcard",
    "icons": [
       "maestro",
      "mastercard",
      "mbway",
      "iDeal",
      "visa",
      "blik"
    ]
  }
]

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.

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.

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

Copy

  | '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

Copy

  | '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';