Skip to main content

🎨 Styling the Checkout Page

Deets allows you to fully customize your checkout experience to align with your brand. You can modify colors, fonts, borders, and placeholders to create a seamless and visually appealing payment flow.

The styles object allows you to define the visual aspects of the checkout form. Below is an example configuration:

const styles = {
    backgroundColor: '#ffffff',      // Background color of the form
    inputColor: '#000000',           // Text color inside input fields
    inputBorderColor: '#cccccc',     // Border color of input fields
    inputBorderWidth: '1px',         // Border width of input fields
    buttonColor: '#007bff',          // Primary button background color
    buttonTextColor: '#ffffff',      // Button text color
    buttonBorderColor: '#0056b3',    // Button border color
    buttonBorderWidth: '1px',        // Button border width
    fontSize: '16px',                // Default font size
    fontStyle: 'normal',             // Default font style
    labelFontSize: '14px',           // Label font size
    labelFontStyle: 'normal',        // Label font style
    buttonFontSize: '16px',          // Button font size
    buttonFontStyle: 'normal',       // Button font style
    borderRadius: '4px',             // Rounded corners for form elements
    buttonBorderRadius: '4px'        // Rounded corners for buttons
};

🔗 Passing Style Parameters to the Checkout URL​

You can pass style configurations directly into the checkout page URL:

https://payvia.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

🚀 Final Thoughts​

By customizing your checkout page styles, you can: ✔ Ensure brand consistency with custom fonts, colors, and borders.
✔ Improve customer experience with a clean and user-friendly interface.
✔ Easily test configurations using the Deets Sandbox.

Ready to go live? Start integrating Deets today and create a visually appealing, secure, and seamless checkout experience! 🚀