XP Cloud:Customizing the Payment Form Appearance

X-Payments Cloud User Manual

1. X-Payments Cloud: General information
2. Get Started with X-Payments Cloud
3. Two-factor User Authentication
   • with the Google Authenticator App
   • with SMS/Text Messages
   • with Backup Codes
   • Add an Alternative Method
   • Change the Preferred Method
4. General Settings
5. Payment Configurations
   • Add a Payment Configuration
   • Payment Configurations List
     
   • View the Details of a Payment Configuration
     
   • Enable/Disable a Payment Configuration
     
   • Edit the Details of a Payment Configuration
     
   • Delete a Payment Configuration
     
   • Choice of Payment Configuration for a Payment
6. Services
   • 3D-Secure
   • KOUNT Antifraud Screening
   • NoFraud Fraud Prevention
   • Signifyd Fraud Protection
   • Apple Pay
   • Google Pay
7. Users
   • Add a New User Account
     
   • Users List
     
   • View a User's Account Details
     
   • Edit a User's Account Details
     
   • Change a User's Account Status
     
   • Manage User Permissions
     
   • Request Password Change for a User
     
   • Delete a User Account
     
8. User Interface
   • Customize the Payment Form Appearance
   • Translate or Edit the User Interface Text
9. Payments
   • Payments List
   • Payment Statuses
   • Search for Payments
   • View the Details of a Payment
   • Delete a Payment
   • Auth and Capture (Capturing Funds)
   • Void an Authorization
   • Issue a Refund
     
   • Manage High Risk Transactions
     
   • Emulate Transactions
     
   • Clear Cardholder Data
   • Tokenization and Re-Use of Saved Cards
     
   • Delayed Payment Feature
     
10. Supported Payment Gateways
11. What's New in X-Payments Cloud

X-Payments Cloud provides an interface for the customization of its payment form. The appearance of the payment form can be changed via the Appearance page of your X-Payments Cloud admin panel (Settings -> Appearance).

Note that this page is available only from the X-Payments Cloud standalone admin panel (not if accessed from within the admin panel of your online store.

Here is what the Appearance page looks like:

First, you need to select the template that will determine the appearance of your payment form. At the top of the page, there is a template selector. The selector provides access to a few pre-configured templates based on different color schemes.

After selecting the template you require from the drop-down list, below the template selector, you will be able to preview the way your payment form will look based on this template. Simply choose the template that best suits your preference, but do not worry if the fonts or the color combination used by the template are not ideal - you will be able to tweak the template at a later time.

For the sake of example, let us create a custom template based on the template "Orange":

1. In the Payment templates section of your X-Payments back end (Settings -> Templates), select the template on which you would like to base your work (in our case - "Orange"):
   
   
   (Note how the payment form preview on the left-hand side of the page changes after a new template has been selected).
2. Create a copy of the template "Orange". To do so, click the button Save copy as... below the payment form preview area:
   
   
   A popup form appears on the screen allowing you to enter a name for your template copy:
   
   
   Simply replace the name of the original template with a new one (Below you can see how we changed the name "Orange" to "test") and click Save:
   
   
   The template copy will be created:
   
   
   Now you can safely play with the settings on the template copy without running the risk of spoiling the original template (in our case, "Orange"). If you do not like the result, you will be able to discard the template copy and start anew at any time.
3. The settings below the template selector allow you to adjust the various aspects of the payment form appearance. Click the tabs (General styles, Logo and header, Payment info, Card details and Buttons) to access the settings you require.
   
   
   To change the template, try changing the original styles to the ones you require. Your changes will be shown on the preview in real time:
   
   
   
4. Click Save to save the changes:
   
   
   Now you have a new template which you can select when configuring your online stores.
5. If necessary, you can delete the template or save its copy under a new name:
   
   
   

See also:

• Translating or Editing the User Interface Text