Overview

This topic describes the following Simply Connect 2.0 user-interface customizations:

• Card Icon
• Card Scheme Logos
• Pay Button
• Styling

Card Icon

To define the position and size of the card icon that appears in the card number field, use the cardLogo class with the following parameters:

• cardLogoPosition – Possible values: right, left.
• backgroundSize – The size of the icon in pixels.

To hide the card icon, use: cardLogo: false

Example of cardLogo: false

simplyConnect({
            …
            uiConfig {
                …
                cardLogo: {
                    cardLogoPosition: 'right',
                    backgroundSize: '30px 40px'
                }, //or cardLogo: false -> to hide the card icon }, …});

Card Scheme Logos

To determine whether card scheme logos appears on the Simply Connect form, use: showCardLogos

To enable logos for supported card schemes, set showCardLogos to true.

To block card scheme logos from being displayed (even if showCardLogos equals true), use blockCards. See Features and Functionality.

Example of blockCards

{
    simplyConnect({
                …
                uiConfig {
                    showCardLogos: true, // default is false blockCards: ["visa","mastercard","maestro","amex"],... } })

Pay Button

The following customizations are provided for the display of the Pay button in the user-interface:

• Text and Translation i18n styling class. See Features and Functionality.
• Design using styles. See Styling.
• Define type of button using the payButton parameter. See payButton Parameter.

payButton Parameter

amountButton (default)	Displays the amount on the button.
textButton	Displays text on the button.
noButton	Button can be displayed outside the checkout user interface. Note: When the customer presses the button in this case, submitPayment() method must be called, which invokes the payment externally from Simply Connect 2.0.

Styling

To customize the styles of the Simply Connect 2.0 HTML elements to match the look-and-feel of the payment page, style the Simply Connect payment form in one of the following ways:

• CSS – Override the default CSS classes by using the CSS class names. See Styling Code Example.
• JavaScript Style Object for State Stylizing – Control the user-interface of certain text states (such as empty, invalid, and valid) by setting objects containing the specific styles.

Styling Code Example

Test and modify the code using the following live JSFiddle example.

Customization of Card Fields with fieldStyle Object

fieldStyle is an optional object that allows further customization of details in card field styles. fieldStyle supports all known default CSS properties and is nested under the uiConfig class of the simplyConnect() initialization methods.

Example (default)

simplyConnect({
    uiConfig: {
        ...
        fieldStyle: {
            "base": {
                "iconColor": "#c4f0ff",
                "color": "#4A5568",
                "fontWeight": 400,
                "fontFamily": "Nunito Sans",
                "fontSize": "14px",
                "fontSmoothing": "antialiased",
                ":-webkit-autofill": {
                    "color": "#ffffff"
                },
                "::placeholder": {
                    "color": "#D3DCE6",
                    "opacity": "1"
                }
            },
            "invalid": {
                "iconColor": "#FFC7EE",
                "color": "#4A5568"
            },
            "valid": {
                "iconColor": "#FFC7EE",
                "color": "#4A5568"
            },
            "empty": {
                "iconColor": "#FFC7EE",
                "color": "#4A5568"
            }
        }
    }
    ...
});