Payment form

Before MYMOID can process a transaction with an acquirer, it is necessary to collect payment method information (Card, Bizum or any) from your users. To minimize your PCI scope, this sensitive cardholder data should be added without accessing your servers.

The Payment Form is a web-based form that enables users to enter payment information to make a payment. It typically includes fields for the user to input their payment details, such as card number, expiration date, cardholder and security code.

To pay a Payment Order you should make use of the Payment Form. It is available following the environment criteria and can be found at the following URLs:

• Sandbox environment: To initiate a payment order in Sandbox (Test data), use the following URL replacing the "{payment-order-shortcode}" with the corresponding payment order's shortcode.

  https://sandbox-tpv.mymoid.com/?p={payment-order-shortcode}
  

• Production environment: To initiate a payment order in Production (Real money), use the following URL replacing the "{payment-order-shortcode}" with the corresponding payment order's shortcode.

  https://tpv.mymoid.com/?p={payment-order-shortcode}
  

Redirection flow

To enable the payment redirection flow you should include the parameters successURL and errorURL in the previous URL, as explained below. You must define a successful and failed redirection URL to redirect the user once the payment is completed. You should take into account the following considerations when configuring the redirection parameters:

1. successURL and errorURL parameters are mandatory.
2. successURL and errorURL parameters must contain all the necessary parameters to continue the payment flow within your environment once the payment is completed. This means that you can make use of parameters within the URLs that are sent.

For example, the URL format with successURL and errorURL parameters in Sandbox environment looks like this:

https://sandbox-tpv.mymoid.com/?p=XYZ012&successURL=mymoid-test.com?ok=true&errorURL=mymoid-test.com?ok=false

The redirection flow experienced by a user is:

Starting point: The Payment Form is loaded with the enabled payment method options. (Depending on the configuration, it may be embedded in an iframe or a full-page.)

1. The user selects the payment method.

   • Note that depending on the payment method selected by the user, there may be an automatic redirection to the processor's website to complete the payment process.
   • For example, in the case of Bizum, the user will be redirected to the Bizum website where they will need to enter their phone number to complete the transaction.

2. Once the payment is made, there will be an automatic redirection to the Payment Form, which will notify the payment result. This screen will be displayed for 5 seconds.

3. After the 5 seconds have passed, the user will be redirected to the success or failure URLs configured by the user.

Recommended Size

The maximum height size of the form's content is currently 702px on desktop displays or approximately 450px on mobile portrait displays.
The iframe content has been designed responsively to fit the iframe's width as the webpage resizes. This allows you to set the width dynamically based on a percentage or with a CSS media query.
However, you will need to set the height manually, taking into consideration the limitations described above. It is highly recommended that you set the iframe's height with a media query.

Customization

The Payment Form can be customized with basic elements, such as the logo and Colours. If you wish to customize your Payment Form with your brand colors and logo, please email our support team. Following the following consideration:

Logo:

• PNG-24 image (transparent)
• Max. height: 40px
• Max. width: 150px
• Resolution @1x/@2x

Customizable components:

1. Background color (Required): Hex color or RGB color (Default: #c6cccd)
2. Logo visibility (Required): visible / hidden (Default: hidden)
3. Organization name visibility (Optional): visible / hidden (Default: Visible)
4. Concept visibility (Optional): visible / hidden (Default: Visible)
5. Reference (Optional): Visibility: visible / hidden (Default: Visible)
6. Button color (Required): Hex color or RGB colour (Default: #2286a4)
7. Button text color (Required): Hex color or RGB colour (Default: #000000)