Styling the Checkout

You can use these sandbox credentials to preview our Pay via checkout form.

Merchant ID: digitzs-paolomercha-718643500-3230807-1732171363
API Key: pOZnjKUSBk8pEhBoOAu0qzz6WpfqLxm3YmmZnDy2
APP Key: HTxKp4jh1cSIprscR81zXt6EtsOup1wNf8HPNLr5vTNWMAUloj0i7yEhVmIxZrck

This is an example of the styles object passing the new configuration parameters:

const styles = {
    backgroundColor: '#ffffff',
    inputColor: '#000000',
    inputBorderColor: '#cccccc',
    inputBorderWidth: '1px',
    buttonColor: '#007bff',
    buttonTextColor: '#ffffff',
    buttonBorderColor: '#0056b3',
    buttonBorderWidth: '1px',
    fontSize: '16px',
    fontStyle: 'normal',
    labelFontSize: '14px',
    labelFontStyle: 'normal',
    buttonFontSize: '16px',
    buttonFontStyle: 'normal',
    borderRadius: '4px',
    buttonBorderRadius: '4px'
};

Here is an example of a checkout page with style configuration passed:

https://payvia.staging.ondeets.ai/content-delivery/hppgdigitzs-deetstest4-33581424-4333173-1719501441.html?amount=1000&style=%7B%22origin%22%3A%22http%3A%2F%2Fmysite.com%22%2C%22enablePrettyFormat%22%3Atrue%2C%22placeholder%22%3A%22XXXX-XXXX-XXXX-XXXX%22%2C%22cvvPlaceholder%22%3A%22XXX%22%2C%22styles%22%3A%7B%22backgroundColor%22%3A%22%23ffffff%22%2C%22inputColor%22%3A%22%23000000%22%2C%22inputBorderColor%22%3A%22%23cccccc%22%2C%22inputBorderWidth%22%3A%221px%22%2C%22buttonColor%22%3A%22%23007bff%22%2C%22buttonTextColor%22%3A%22%23ffffff%22%2C%22buttonBorderColor%22%3A%22%230056b3%22%2C%22buttonBorderWidth%22%3A%221px%22%2C%22fontSize%22%3A%2216px%22%2C%22fontStyle%22%3A%22normal%22%2C%22labelFontSize%22%3A%2214px%22%2C%22labelFontStyle%22%3A%22normal%22%2C%22buttonFontSize%22%3A%2216px%22%2C%22buttonFontStyle%22%3A%22normal%22%2C%22borderRadius%22%3A%224px%22%2C%22buttonBorderRadius%22%3A%224px%22%7D%7D