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 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://panel.pay-cross.com',
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"
}
}
}
}
}
}