Skip to main content

V2 Payment Form: Adding Your Logo In Advanced Editor

Updated

You can add your company logo to a Console 2 payment form using the Advanced Editor. This allows you to insert custom HTML directly into the form layout for branding purposes.

 

Before You Begin

  • Have your logo hosted at a publicly accessible URL (for example: https://yourwebsite.com/logo.png). 

    If you do not have a website, or a cloud storage option you can use a free image hosting platform that allows images to be uploaded that do not expire such as:
     
    • Imgur 
    • ImgBB 
    • Postimages

      Steps:
      1. Go to the image hosting website
      2. Upload your image
      3. Copy the Direct Image Link (make sure it ends in .jpg, .png, etc.)
      4. Use that link in your HTML
  • Ensure the image is optimized for web (recommended width: 200–400px). 
  • Confirm you have access to edit payment forms in Console 2.

Guide

Step 1: Open the Payment Form

 

  1. Log in to your USAePay Console 2 account. 
  2. Navigate to Settings. 
  3. Select Payment Forms. 
  4. Click the name of the payment form you wish to edit. 
  5. Select Advanced Editor in the Template tab. 

 

Step 2: Find the Logo Code

In the Advanced Editor, locate the area near the top of the form (typically above the form title or first input field). Find the following HTML:

<div id="paymentform_page" class="container">
      <div class="row header-section">
        <div class="col-xs-12 col-sm-4 col-md-4">
          <img src="[UMlogo]" alt="logo">
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 mobile-center">

 

Step 3: Adjust the Logo Code

Replace the [UMlogo] source and adjust the alternate text attribute in the following HTML


Replace:

<img src="[UMlogo]" alt="logo">

With:

<img src="https://yourwebsite.com/logo.png" alt="Example Logo">

 

  • https://yourwebsite.com/logo.png would be your Direct Image Link
  • Example Logo is a descriptive name of the image for accessibility

 

Step 4: Apply and Test

  1. Click Apply
  2. Preview the payment form
  3. Confirm: 
    • The logo displays properly
    • The image scales correctly
    • The link works (if applicable)

Additional Resources

For comprehensive documentation, sample code, and detailed guides on payment form adjustments, please visit the USAePay Help Page for Payment Forms. This resource provides in-depth information to help understand the functionality of the payment forms and more advanced adjustments using javascript. 

Need Help?

If you encounter any issues or have questions while adjusting the payment form, our friendly support team is here to help. Contact us through your Merchant Console or visit our support page for assistance.