Design Controls
Payment
Customize your checkout payment element to provide a seamless experience. From visually appealing backgrounds to attention-grabbing buttons, these controls let you fine-tune the element’s aesthetics and functionality. Create an intuitive, user-friendly payment process that aligns with your brand identity.
- Background – Choose a color for the payment element’s background to complement your design scheme.
- Padding – Set the amount of space surrounding the payment element’s content, ensuring it’s not cramped and visually appealing.
- Padding – Customize the specific padding space on all sides of the payment element.
- Borders – Define the payment element’s outer boundaries for a distinct and professional look.
- Radius – Round the corners of your payment element’s borders to your preference.
- Styling – Apply specific styles to the borders, like color, width, and line style.
- Shadow – Add a shadow to your payment element, giving it a sense of depth on the page.
- Button – Customize the ‘Pay’ button to make it prominent and click-worthy.
- Size – Alter the button’s size to ensure it’s noticeable and proportional.
- Size – Select a preset size for the button or define your own.
- Padding – Adjust the space inside the button to fit the text comfortably. Note: This control is available only if the size is set to ‘custom’.
- Override Width – Specify a width for the button, overriding default settings.
- Full Width At – Choose at which breakpoint the button should span the full width of its container.
- Background – Pick a color for your button’s background to make it stand out or sync with your color scheme.
- Outline – Toggle to have your button styled with just an outline, for a different aesthetic.
- Color – Select a color for your button’s outline. Note: This is only available if the ‘Outline’ option is enabled.
- Width – Set the thickness of your button’s outline. Available only when ‘Outline’ is enabled.
- No Fill On Hover – Choose to keep the button’s background color unchanged when hovered over. Active only if ‘Outline’ is enabled.
- Typography – Adjust the font, size, and style of the text within your button.
- Corners – Decide the shape of your button’s corners (e.g., rounded, sharp).
- Corner Radius – If you opt for rounded corners, specify how rounded they should be. Note: Only available when ‘Corners’ is set to ‘custom’.
- Effects – Add interactive effects to your button.
- Transition Duration – Determine how long the hover effect transition lasts.
- Scale On Hover – Set the button to increase in size when hovered over.
- Shadow – Apply a shadow effect to your button for emphasis.
- Icon – Enhance your button with an icon for added clarity or style.
- Icon – Choose an icon that represents the button’s action.
- Position – Select where the icon should be placed relative to the text.
- Size – Adjust the icon’s size to balance with the text.
- Color – Pick a color for your icon, making sure it’s visible against the button background.
- Space Before – Add space before the icon to avoid a cramped look.
- Space After – Add space after the icon, ensuring it doesn’t crowd the text.
- Hover Transform – Choose an effect for the icon when the button is hovered over.
- Payment Info – Tailor the section displaying the payment information for clarity and trust.
- Background – Set a distinct background color for the payment information area to differentiate it.
- Padding – Adjust the space around the payment information content for readability.
- Padding – Fine-tune the exact padding values for optimal layout.
- Borders – Apply styled borders to the payment information section for focus and separation.
- Radius – Choose a border radius to control corner roundness for this section.
- Styling – Customize border style elements like color, width, and type.
- Shadow – Add a shadow to elevate the payment information section from the page.
Spacing
Refine the payment element’s positioning on the page with precise spacing controls. By adjusting the margins, you can ensure the element sits perfectly within its surrounding content. Proper spacing contributes to a cleaner layout and a more organized visual structure.
- Margin Top – Set the space above the payment element to position it appropriately within its container.
- Margin Bottom – Control the space below the payment element, balancing it with other page content.
