Customizing the payment experience

In this guide we will explain how to customize the payment process to suit your business. We will look at the various ways the process can be customized, with their advantages and disadvantages, as well as the customization options by type of integration. 

Hosted integration

The payment form that customers are redirected to when you have a Hosted integration is hosted by Addon Payments. You can change the functions and appearance of this form either in your merchant settings or by sending certain parameters in the payment request.

Customize the cashier function

You can customize the cashier the customers see when redirected. These cashiers have different functions: some are more complete and others show only one (1) payment solution. Below we’ll look at the different types of forms available:

Full cashier

To call this cashier, do NOT send the parameter “paymentSolution” in the request. In this mode, the cashier shows all the sections:

  1. Order details: Shows the customer the details of their order, including total, description, etc.
  2. Payment solution selector:: The customer can choose the payment solution they want to use for their payment. The payment solution must be activated in the merchant product for customers to be able to choose it. 
  3. Payment solution form: Shows required fields for the payment solution. The customer must fill in these forms to complete payment. When required by the payment solution, there is a redirect button (Bizum, Paypal, etc.).

In this case, the cashier doesn’t show the payment solution selector. It only shows one of the payment solutions activated in the product, so customers have to choose that solution.

This mode is activated by sending the optional parameter “paymentSolution” with the value of the payment solution you want to limit the operation to: creditcards, bizum, paypal, quix, etc. So it can vary for each request, including the parameter or not and/or changing the value sent. 

For example, if you add the parameter: “paymentSolution”: “bizum”, the customers will only see the bizum option at checkout.

In this mode, the cashier only shows the form for the payment solution sent in the request parameter “paymentSolution”.

  • Customers don’t see order details.
  • Customers don’t see the payment solution selector, so the “paymentSolution” parameter is required. This is because the cashier needs to know which payment solution to show, as the customer can’t choose. 

To use this mode, you have to ask Support to activate it, so the change will apply to all payment requests.

Gateway customization

AP allows you to customize the appearance of the gateway in two (2) ways. Below is a table comparing the advantages and disadvantages of the two methods.

MethodDescriptionAdvantagesDisadvantages
Parameters in the requestIt consists in sending specific parameters in the requests that change the look of the payment gateway.It is immediateFewer customization options.
Each request can be customized differently.
Less technical. No knowledge of CSS required.
Customized CSS style sheetsIt consists in creating a customized CSS style sheet to change the look of the payment gateway. You will have to host that stylesheet in your web page and add the parameter “cssURL” with the URL where it is hosted in the requests to use those styles.More customization optionsMore technical. Requires knowledge of CSS.

Customization using parameters

This info is sent when you generate a request in order to customize the payment gateway. You can customize the following elements:

  1. Top logo of the payment gateway.
  2. Lower logo of the payment gateway.
  3. Payment gateway title.
  4. Subtitle of the payment gateway.
  5. Font, size and colour of the text in the payment gateway.
  6. Background colour of the payment gateway.

The parameters to customize the gateway, and its functions, are:

ParameterDescriptionSize, format and values accepted
topLogoURL with your merchant’s logo to show on the top of the payment gateway.Recommended size: 500px wide, 100px tall.
Alphanumeric, max. 250 characters.
bottomLogoURL with your merchant’s logo to replace the one shown on the bottom of the payment gateway.Recommended size: 400px wide, 80px tall.
checkoutTitleTitle for the payment gateway. The default is blank. We recommend making it as short as possible, to make it easier for mobile users.Alphanumeric
subTitleSubtitle for the payment gateway. The default is blank. We recommend making it as short as possible, to make it easier for mobile users.Alphanumeric
fontFamilyFont used for the text on the payment gateway. It also changes the title and subtitle.Any font family, although the default font will be used if the customer doesn’t have the one specified installed on their device.
fontSizeSize of the text on the payment gateway.
Default size: 12		Numerical
fontColourColour of the text on the payment gateway.RGB hexadecimal code (#RRGGBB).
backgroundColorCustomizes the background colour on the payment gateway.RGB hexadecimal code (#RRGGBB).

CSS customization

With AP, you can customize it even more by using Cascading Style Sheets (CSS).

With a customized CSS file, you can change appearance parameters for the payment gateway:

  1. Colour of top and bottom logos.
  2. Font, colour and font size of the title and subtitle. It is recommended to customise only the colour.
  3. Colour of the top edge of the cashier.
  4. Colour of the background (light blue) and buttons (dark blue circles) of the payment solutions selector.
  5. Colour of the payment button.

For CSS customization, follow these steps:

  1. Send a request from your ecommerce platform to go to the payment gateway cashier.
  2. Open the tool to edit styles on your browser and find the classes that affect the elements you want to customize.
  3. Run tests on the browser you are using by changing the values of the classes until you get the results you want and make a note of the class with the value:
    • Below you have a sample file. You can use it to check that the classes are correct and note the desired value.
    • You don’t have to change or note all the classes in the sample file. You can just leave the ones you want to customize and delete the rest.
  4. Save the keys and values in a CSS file.
  5. Host the CSS file on your web page.
  6. Send a request and indicate the URL where you have it hosted in the “cssURL” field. 

      This is a sample CSS that changes some of the elements before the red:

      				
					#checkoutTitle {
color: red;
}
#checkoutSubtitle {
color: orange;
}
.sectionSeparator {
border-top: 2px solid red;
}
.paysol-item-image {
background-color: red;
}
.paysolScrollBGColours {
background-color: lightgrey;
}
.payButton {
background-color: red;
}
.payButton:hover {
background-color: darkred;
}
#regLink {
background-color: lightgrey;
color: black;
}
#regLink:hover {
background-color:grey;
}

      Integration using JavaScript

      See the JavaScript Customization section for more information.

      Comparte este documento
      Tabla de Contenidos

      Consulta la documentación de las distintas secciones de integraciones:

      Comienza a integrar

      undraw_add_to_cart_re_wrdo 1 (1) (1)

      Plugins para CMS

      Complementa la integración

      SDKs

      Métodos de pago

      Herramientas

      Addon Payments

      Consulta la documentación de Addon Payments. Aquí tienes las distintas secciones:

      Integraciones

      Consultas frecuentes

      Portal Backoffice

      Cyberpac

      We are currently working on the English version of the Cyberpac documentation. You can view the Spanish version using the buttons below:

      Canales BackOffice Portal

      Plugins integration

      Custom integrations

      POS integrated Payments

      Create a solution that will help you automate processes. You can even add payment processes on physical terminals.

      Payment Integrated with Android POS

      Payment Integrated with Smartphone POS

      POS Data sheets

      Addon Payments

      Comercia Global Payments has several integration options so you can choose the most efficient one for you.

      Integrations

      Frequently Asked Questions

      BackOffice Portal

      Consult the documentation of the different integrations sections:​

      Start integration

      undraw_add_to_cart_re_wrdo 1 (1) (1)

      CMS Plugins

      Complement your integration

      SDKs

      Payment Methods

      Tools