On This Page
FILTER BY TAG

Customize the
Unified Checkout
 Look and Feel

Follow these steps to customize the appearance of
Unified Checkout
 in the
Smartpay Fuse Portal
:
  1. Log in to the
    Smartpay Fuse Portal
    :
    If you are unable to access this page, contact your sales representative.
  2. In the
    Smartpay Fuse Portal
    , go to the left navigation panel and choose
    Payment Configuration
     >
    Unified Checkout
    . The
    Unified Checkout
     customer experience page appears:

    Figure:

    Unified Checkout
     Look and Feel Merchant Experience
    Image that shows the Unified Checkout Look & feel merchant experience page.
  3. In the Look & Feel section, click
    Configure
    . The Look and feel page appears.
  4. If you want to use AI to determine the look and feel, under AI brand studio, click
    Browse
     the upload a screenshot of your website. These components are updated using the colors from the screenshot you provide:
    • Button list background color
    • Card checkout outline and text colors
    • Header and checkout font background colors
    Proceed to the next steps to manually customize these and other components of the
    Unified Checkout
     appearance.
  5. Under Button customizations, select the options for your button list. These customizations are available:
    Universal Button Shape
    Use the Button shape drop-down menu to select if you want a sharp corner, rounded corner, or pill button:

    Figure:

    Unified Checkout
     Button Shapes
    Diagram that shows the Unified Checkout button shapes.
    Button List
    Use the color selector or enter a HEX code in the Button list background color text box to customize the background color of your button list. To review the button list preview, see Button List.
    If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.
    Card Checkout and
    Click to Pay
     Button
    Use the card checkout button label drop-down menu to select the text that appears on the checkout button. These text options are available:
    • Pay with card
    • Card payment
    • Checkout with card (default)
    • Debit/Credit payment
    • Donate with card
    • Subscribe with card
    Card Checkout Buttons
    Use the button style drop-down menu to select if you want an outlined or filled checkout button. Select the button fill and text colors using the color selector or HEX code:

    Figure:

    Unified Checkout
     Button Style
    Diagram that shows the Unified Checkout buttons as filled or unfilled.
    If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.
  6. Under Checkout customizations, select the options for your checkout experience. These customizations are available:
    Font
    Use the font drop-down menu to select the font you want to use. These fonts are available:
    • Inter
    • Monserrat
    • Open Sans
    • Raleway
    • Roboto Slab

    Figure:

    Unified Checkout
     Fonts
    Diagram that shows the different Unified Checkout fonts.
    Select the background color using the color selector or HEX code.
    If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.
    Header Customization
    Select the color you want to use in your header using the color selector or HEX code.
    If you uploaded a screenshot in the AI brand studio section, a color is entered in this space based on the colors present in your screenshot.
  7. Click
    Save and publish
     to save your look and feel customization. The Ready to publish popup window appears.
  8. If you are done editing, click
    Publish now
     to publish your changes. If you need to make more changes, click
    Keep editing
     to return to the Look and feel page. To review your changes, click through the example screens. For more information about the UI previews, see Look and Feel UI Examples.
RELATED TO THIS PAGE