OPEN FIELDS

Example code – Frontend
https://github.com/CardCom/OpenFields-FrontEnd

Example code – Backend
https://github.com/CardCom/OpenFields-Backend-Node

🔐 CardCom Open Fields Module Integration Guide

🖥️ Frontend

This module allows you to securely integrate CardCom's credit card fields into your form.

What the module allows:

1. Integrate CardCom's credit card and CVV fields into your form.

2. Style the input fields according to your preferences (custom CSS).

3. Make secure payments in accordance with the PCI standard.

4. Use the 3D Secure module for additional authentication.

Workflow:

1. Creating a LowProfile transaction

   Each time you submit a payment form, you must create a new LowProfile transaction. This is a unique identifier (lowProfileCode) that accompanies the payment.

2. Listening for messages from the iFrame

   The module uses PostMessage for communication between your page and the iFrame. Each message contains an action name. Messages without an action name are part of the 3D Secure process and should be ignored.

Action types:

• From the user:

  • init – Initializes the iframe. You must send the lowProfileCode, custom CSS, and the element where the input field will appear (the HTML element on your page in which to place the field's iFrame).

  • doTransaction – Submits the payment. You must include: CVV, expiration date, installments, and user details (name, address, etc.).

• From the system:

  • HandleSubmit – Contains information about the payment execution.

  • HandleError – Returns errors.

📌 Required iframe ID names:

• CardComMasterFrame

• CardComCardNumber

• CardComCvv

• CardComCaptchaIframe

🛠️ Backend

A simple Node.js server for simulating the creation of a LowProfile transaction.

Requirements:

• NodeJS (this guide was written using v18.15.0)

Steps:

1. Install dependencies:

   npm install
   

2. Run the main file:

   node example
   

Notes:

• The config.json file is configured by default to use CardCom's test terminal (no actual charge is made).

• Before deploying to production:

  • Integrate this logic into your server.

  • Switch to your actual production terminal.

📱 Google Pay Integration (Digital Wallets)

Payment process

• Google Pay processes the purchase and automatically redirects it to CardCom.

• The response is returned in the same format as a regular credit card payment.

• There is no need to call doTransaction – after receiving the details from Google, the process continues automatically with CardCom.

• For Google Pay to work properly, you must update the cardholder details as described in the “Update cardholder details (required)” section.

Response handling

• Handle the response using the following functions:

  • handleSubmit

  • handleError

Update cardholder details (required)

• For the GOOGLE PAY & 3D Secure payment process to succeed, details that Google Pay usually does not provide are required:

  • Cardholder name

  • Phone number

  • Email address

Updating the details before payment (required):

Use the following function to update the details required for 3DS in the iframe:

iframe.contentWindow.postMessage({ action: 'setCardOwnerDetails', data }, '*')                                                     to update these details before the Google Pay payment. There is no need to call doTransaction; after receiving the details from Google, the process will continue automatically and redirect to CardCom to complete the transaction.

CSS styling in 3 ways: