Adding Business Logo and Custom Images

By default, the payment page contains the Hyp logo in the header, but you can change it to show your business logo instead.

You can also provide additional images to be used on the payment page, such as a background image.

To do this, you need to contact Hyp support and send the necessary images. Once Hyp support validates the images, they'll be available in the assets folder for your merchant ID.

You can then use the images in two ways inside the uiCustomData object:

1. Set the businessLogoUrl property to your logo image file, which replaces the Hyp logo in the header:

   <paymentPageData>
       <ppsJSONConfig>
           {
               "uiCustomData": {
                   "businessLogoUrl": "merchant_logo.png"
               }
           }
       </ppsJSONConfig>
   </paymentPageData>

2. Use other images in CSS directives inside the customStyle property (for details, see Modifying the Default Styles):

   <paymentPageData>
       <ppsJSONConfig>
         {
             "uiCustomData": {
                 "customStyle": "background: url(background.png) no-repeat;"
             }
         }
        </ppsJSONConfig>
   </paymentPageData>

In both cases, you should use image filenames as relative paths (e.g., logo.png), without directory prefixes.