Skip to content

Advanced widget customization

For an advanced widget customization you can add the style parameter section to an API request body. The section should contain the CSS styles that you'd like to apply to the widget. Please note, the submitted customization parameters override the basic widget customization settings made in the back office.

General scheme of parameters available for an advanced widget customization

Widget customization parameters

Widget styles

Parameter Description
style
widget A section of general widget customization settings.
backgroundColor An HEX code of the widget background color.
buttonsColor An HEX code of the widget buttons and background type color. Applicable to button elements, if no relevant CSS properties are set in the button.card, button.brands, and button.pay sections.
backgroundType A widget background type.
Possible values:
0- no image;
1- random;
2- shards;
4- rhombus;
8- ovals;
16- triangles.
backgroundCustomLeft An image embedded as a background left to the widget. An SVG format and a size up to 1 MB supported only.
Possible values:
0 - no image;
{url of your svg image} - a URL of your image.
backgroundCustomRight An image embedded as a background right to the widget. An SVG format and a size up to 1 MB supported only.
Possible values:
0 - no image;
{url of your svg image} - a URL of your image.
extra CSS properties Additional CSS properties that you can customize, if needed. See the property list here. Applicable to button elements, if no relevant CSS properties are set in the button.card, button.brands, and button.pay sections.
header A section of customization settings of the widget header.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
shop A shop name. Shown as a URL or a shop name set in the system back office.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
margin Element margins. Set as a string of values in the {margin-top} {margin-right} {margin-bottom} {margin-left} format.
close A close-iFrame widget element.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
margin Element margins. Set as a string of values in the {margin-top} {margin-right} {margin-bottom} {margin-left} format.
price A price display element.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
margin Element margins. Set as a string of values in the {margin-top} {margin-right} {margin-bottom} {margin-left} format.
description A payment description element.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
margin Element margins. Set as a string of values in the {margin-top} {margin-right} {margin-bottom} {margin-left} format.
button A section of widget customization settings applicable to the Pay by card, Pay by alternative payment methods, Pay button, and Payment result button elements.
borderRadius A button border radius. Applicable to button elements, if no relevant CSS properties are set in the buttons.card, buttons.brands, and buttons.pay sections.
backgroundColor An HEX-code of the element background color. Applicable to button elements, if no relevant CSS properties are set in the button.card, button.brands, and button.pay sections.
card A section of widget customization settings applicable to the Pay by card button element.
borderRadius A button border radius.
backgroundColor An HEX code of the element background color.
text A text shown on the Pay by card button. Use the {amount} placeholder to show the payment amount on the button.
extra CSS properties Additional CSS properties that you can customize, if needed.
brands A section of widget customization settings applicable to the Pay by alternative payment methods button element.
borderRadius A button border radius.
backgroundColor An HEX code of the element background color.
text A text shown on the Pay by alternative payment methods button. Use the {amount} placeholder to show the payment amount on the button.
extra CSS properties Additional CSS properties that you can customize, if needed.
pay A section of widget customization settings applicable to the Pay and Payment result button elements.
borderRadius A button border radius.
backgroundColor An HEX code of the element background color.
text A text shown on the Pay button. Use the {amount} placeholder to show the payment amount on the button.
extra CSS properties Additional CSS properties that you can customize, if needed.
inputs A section of customization settings for the element of input fields for customer details for a payment by a card or an alternative payment method.
backgroundColor An HEX code of the element background color.
holder An element of a cardholder input field.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
backgroundColor An HEX code of the element background color.
cardFace An element of a card-face background.
backgroundColor An HEX code of the element background color.
backgroundImage A URL of an embedded card-face image. SVG, PNG, and JPG formats and a size of up to 1 MB supported only.
backgroundPosition An embedded card-face image position.
Possible values:
top;
bottom;
left;
right;
center;
a string of percent values, for example 25% 75%;
a string of position measurements, for example 1cm 2cm.
backgroundSize An embedded card-face image size.
Possible values:
cover;
contain;
a string of the image width and height, for example 50% auto.
backgroundRepeat An image repeat on the widget background.
Possible values:
repeat-x;
repeat-y;
repeat;
space;
round;
no-repeat.
footer A widget footer element.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.
logo A payment service provider's logo element.
display An option to display the widget element.
Possible values:
none - do not show;
block - show the element. Set by default.

Extra CSS properties

Here you can find a list of additional CSS properties supported for button.card, button.brands, and button.pay elements. If you want to customize the element, submit the property key and value in the relevant request section. Otherwise, the system applies general widget customization settings.

CSS property Description
fontFamily A text font style.
color An HEX code of the text font color.
fontSize A text font size.
fontSmooth A property of anti-aliasing when the element font is rendered.
fontStyle A text font style.
fontVariant A property to render a text in small-caps font.
fontWeight A text weight meaning.
lineHeight A vertical distance between two lines of text.
letterSpacing A horizontal spacing between text symbols.
textAlign A property of text alignment.
textDecoration A property of applying decorative lines on text.
textShadow A property of text shadowing.
textTransform A property of text capitalization.
Example of widget customization
<script type='text/javascript'>
            this.payment = function() {
                var params ={
                    checkout_url: 'https://checkout.overpay.io',
                    checkout: {
                        iframe: true,
                        test: true,
                        transaction_type: 'payment',
                        public_key: 'your_shop_public_key',
                        order: {
                            amount: 999,
                            currency: 'EUR',
                            description: 'Payment description',
                            tracking_id: 'your_transaction_id'
                        }
                    },
                    settings: {
                        widget_version: 2,
                        require: [],
                        customer: {},
                        success_url: 'http://127.0.0.1:4567/success',
                        fail_url: 'http://127.0.0.1:4567/fail',
                        decline_url: 'http://127.0.0.1:4567/decline',
                        notification_url: 'http://your_shop.com/notification',
                        verification_url: null,
                        cancel_url: 'http://127.0.0.1:4567/cancel',
                        return_url: 'http://127.0.0.1:4567/return',
                        language: 'ru',
                        customer_fields: {
                            visible: [
                                'city'
                            ],
                            read_only: []
                        },
                        credit_card_fields: {
                            read_only: [
                                'holder'
                            ]
                        },
                        save_card_toggle: {
                            display: true,
                            customer_contract: true,
                            text: 'save_card_toggle text',
                            hint: 'save_card_toggle hint'
                        },
                        style: {
                            widget: {
                                backgroundColor: '#dbc21f',
                                buttonsColor: '#fcf400',
                                backgroundType: '4',
                                backgroundCustomLeft: 'https://svgsilh.com/svg/1517090.svg',
                                backgroundCustomRight: 'https://svgsilh.com/svg/1517090.svg',
                                fontFamily: 'fantasy',
                                color: '#ff0000',
                                fontSize: '',
                                fontSmooth: '',
                                fontStyle: '',
                                fontVariant: '',
                                fontWeight: '',
                                lineHeight: '',
                                letterSpacing: '',
                                textAlign: '',
                                textDecoration: '',
                                textShadow: '',
                                textTransform: ''
                            },
                            header: {
                                display: 'block',
                                shop: {
                                    display: 'block',
                                    margin: ''
                                },
                                close: {
                                    display: 'block',
                                    margin: ''
                                }
                            },
                            price: {
                                display: 'block',
                                margin: ''
                            },
                            description: {
                                display: 'block',
                                margin: ''
                            },
                            button: {
                                borderRadius: '22px',
                                backgroundColor: '#03b3ff',
                                card: {
                                    borderRadius: '22px',
                                    backgroundColor: '#ffffff',
                                    text: 'Pay with card {amount}',
                                    fontFamily: 'roboto',
                                    color: '#6f7d79',
                                    fontSize: '',
                                    fontSmooth: '',
                                    fontStyle: '',
                                    fontVariant: '',
                                    fontWeight: '',
                                    lineHeight: '',
                                    letterSpacing: '',
                                    textAlign: '',
                                    textDecoration: '',
                                    textShadow: '',
                                    textTransform: ''
                                },
                                brands: {
                                    borderRadius: '22px',
                                    backgroundColor: '#cf8608',
                                    text: 'Pay {amount}',
                                    fontFamily: 'consolas',
                                    color: '#2f2cd1',
                                    fontSize: '',
                                    fontSmooth: '',
                                    fontStyle: '',
                                    fontVariant: '',
                                    fontWeight: '',
                                    lineHeight: '',
                                    letterSpacing: '',
                                    textAlign: '',
                                    textDecoration: '',
                                    textShadow: '',
                                    textTransform: ''
                                },
                                pay: {
                                    borderRadius: '22px',
                                    backgroundColor: '#24ff03',
                                    text: 'Pay pay final button {amount}',
                                    fontFamily: 'calibry',
                                    color: '#bc4ce5',
                                    fontSize: '',
                                    fontSmooth: '',
                                    fontStyle: '',
                                    fontVariant: '',
                                    fontWeight: '',
                                    lineHeight: '',
                                    letterSpacing: '',
                                    textAlign: '',
                                    textDecoration: '',
                                    textShadow: '',
                                    textTransform: ''
                                }
                            },
                            inputs: {
                                backgroundColor: '',
                                holder: {
                                    display: '',
                                    backgroundColor: ''
                                }
                            },
                            cardFace: {
                                backgroundColor: '',
                                backgroundImage: '',
                                backgroundPosition: '',
                                backgroundSize: '',
                                backgroundRepeat: ''
                            },
                            footer: {
                                display: 'block',
                                logo: {
                                    display: 'block'
                                }
                            }
                        }
                    }
                }

                new BeGateway(params).createWidget();
            };
</script>
Example of a payment token request with widget customization parameters
{
    "checkout": {
        "test": true,
        "transaction_type": "payment",
        "payment_method": {
            "types": []
        },
        "attempts": 3,
        "order": {
            "currency": "USD",
            "amount": 1000,
            "description": "Order description"
        },
        "settings": {
            "widget_version": 2,
            "require": [],
            "customer": {},
            "success_url": "http://your_shop.com/success",
            "fail_url": "http://your_shop.com/fail",
            "decline_url": "http://your_shop.com/decline",
            "notification_url": "http://your_shop.com/notification",
            "verification_url": null,
            "cancel_url": "http://your_shop.com/cancel",
            "return_url": "http://your_shop.com/return",
            "language": "ru",
            "customer_fields": {
                "visible": [
                    "city"
                ],
                "read_only": []
            },
            "credit_card_fields": {
                "read_only": [
                    "holder"
                ]
            },
            "save_card_toggle": {
                "display": true,
                "customer_contract": true,
                "text": "save_card_toggle text",
                "hint": "save_card_toggle hint"
            },
            "style": {
                "widget": {
                    "backgroundColor": "#dbc21f",
                    "buttonsColor": "#fcf400",
                    "backgroundType": "4",
                    "backgroundCustomLeft": "https://svgsilh.com/svg/1517090.svg",
                    "backgroundCustomRight": "https://svgsilh.com/svg/1517090.svg",
                    "fontFamily": "fantasy",
                    "color": "#ff0000",
                    "fontSize": "",
                    "fontSmooth": "",
                    "fontStyle": "",
                    "fontVariant": "",
                    "fontWeight": "",
                    "lineHeight": "",
                    "letterSpacing": "",
                    "textAlign": "",
                    "textDecoration": "",
                    "textShadow": "",
                    "textTransform": ""
                },
                "header": {
                    "display": "block",
                    "shop": {
                        "display": "block",
                        "margin": "0px 0px 0px 0px"
                    },
                    "close": {
                        "display": "block",
                        "margin": "0px 0px 0px 0px"
                    }
                },
                "price": {
                    "display": "block",
                    "margin": "0px 0px 0px 0px"
                },
                "description": {
                    "display": "block",
                    "margin": "0px 0px 0px 0px"
                },
                "button": {
                    "borderRadius": "22px",
                    "backgroundColor": "#03b3ff",
                    "card": {
                        "borderRadius": "22px",
                        "backgroundColor": "#ffffff",
                        "text": "Pay with card {amount}",
                        "fontFamily": "roboto",
                        "color": "#6f7d79",
                        "fontSize": "",
                        "fontSmooth": "",
                        "fontStyle": "",
                        "fontVariant": "",
                        "fontWeight": "",
                        "lineHeight": "",
                        "letterSpacing": "",
                        "textAlign": "",
                        "textDecoration": "",
                        "textShadow": "",
                        "textTransform": ""
                    },
                    "brands": {
                        "borderRadius": "22px",
                        "backgroundColor": "#cf8608",
                        "text": "Pay {amount}",
                        "fontFamily": "consolas",
                        "color": "#2f2cd1",
                        "fontSize": "",
                        "fontSmooth": "",
                        "fontStyle": "",
                        "fontVariant": "",
                        "fontWeight": "",
                        "lineHeight": "",
                        "letterSpacing": "",
                        "textAlign": "",
                        "textDecoration": "",
                        "textShadow": "",
                        "textTransform": ""
                    },
                    "pay": {
                        "borderRadius": "22px",
                        "backgroundColor": "#24ff03",
                        "text": "Pay {amount}",
                        "fontFamily": "calibri",
                        "color": "#bc4ce5",
                        "fontSize": "",
                        "fontSmooth": "",
                        "fontStyle": "",
                        "fontVariant": "",
                        "fontWeight": "",
                        "lineHeight": "",
                        "letterSpacing": "",
                        "textAlign": "",
                        "textDecoration": "",
                        "textShadow": "",
                        "textTransform": ""
                    }
                },
                "inputs": {
                    "backgroundColor": "",
                    "holder": {
                        "display": "block",
                        "backgroundColor": ""
                    }
                },
                "cardFace": {
                    "backgroundColor": "",
                    "backgroundImage": "https://svgsilh.com/svg/1295198.svg",
                    "backgroundPosition": "center",
                    "backgroundSize": "400px 300px",
                    "backgroundRepeat": "repeat"
                },
                "footer": {
                    "display": "block",
                    "logo": {
                        "display": "block"
                    }
                }
            }
        }
    }
}