AUGUST 3, 2019

SECURE FORM V1.0

PROGRAMMING SPECIFICATION

2C PROCESSOR USA
INFORMATION TECHNOLOGY
122 Arena Street El Segundo, CA
Utilizing the ‘Secure Form’ allows a merchant to reduce the PCI requirements of their webserver to SAQ-
A by completely hosting the payment card information collection process on 2CP’s secure servers. The
secure form returns a single use token. Once obtained, the token may be used in lieu of payment
information for a single transaction.

SecureForm.js
The SecureForm.js file is used to create a payment form within an Iframe that resides in target DIV. The
secure form supports monitoring submission of a parent form or can be submitted using an embedded
button. When both a ccApiKey and achApiKey are present, a drop down will be added to the form to
allow the user to switch between credit and echeck payment methods.

SECCInitializeSecureForm(ccApiKey, achApiKey, targetDivId, parentFormId, frameWidth,

cssOptions, textOptions, callback)
Summary: This function initializes the secure form and loads the Iframe to the target div. When
monitoring the parent form submission, the id of the parent form must be provided. When utilizing
the embedded submit button or the callback, the parentFormId can be null.
Parameter Description
ccApiKey This is the public api key for the associated credit card account.
Optional. Atleast 1 API key must be provided
achApiKey This is the public api key for the associated credit card account.
Optional. Atleast 1 API key must be provided
targetDivId This is the ID of the div that the parent form will be rendered to. This
field is required.
parentFormId This is the ID of the parent form. If this ID is provided, the submission
of the parent form will be monitored. Submission of the parent form
will then cause the Secure Form to be submitted.
frameWidth The desired width of the Iframe. Suggest between 200 and 600px.
Use string value for width in percentage.
cssOptions An object containing the desired CSS Options. Set to null if you just
want to use defaults.
textOptions An object containing the desired text Options. Set to null if you just
want to use defaults.
callback(token, type) An optional call back function that will fire when a token is generated.
When present this callback will prevent the IFrame from submitting
the parent form and the token inputs from being rendered to the
targetDivId. token: the token id; type: is either ‘credit’ or ‘ach’
Accepted CSS and text options
cssOptions: these fields accept the same values that their corresponding css elements would
accept. IE for color a value of #222222 would be accepted. All fields are optional.
Field Description
FontFamily The font-family of entire form
FontSize The font-size of entire form
Color color of entire form
BackgroundColor background-color of entire form
ButtonColor The text color of the submit button
ButtonBackgroundColor The background-color of the submit button
ButtonFontSize The font-size of the submit button text
ButtonFontFamily The font-family of the submit button text
ButtonHoverColor The color of the submit button text on hover
ButtonHoverBackgroundColor The background-color of the submit button on
hover
ButtonBorderColor The border-color of the submit button
InvalidColor The color used for highlighting invalid fields, and
the color of the validation summary text.

textOptions: these fields allow you to manipulate the text displayed on the form.
Field Description
ButtonHidden Setting this field to true hides the embedded
button.
ButtonText The text of the embedded submit button.
Manual Iframe Submission
The function SECCSubmitIFrame() may be called to submit the form within the Iframe from the parent
page. It does not require any parameters. This can be used as an alternative to monitoring the parent
form submission.

Secure Form Submission

When submitted the secure form will set two inputs in the targetDivId upon success if the callback
function is not set. If the callback function is set, it will fire when the form validation passes.

Input Name Possible values

token2cp This is the token id
token2cptype Value can be either ‘credit’ or ‘ach’
Basic Workflow
Script location
<script src="https://secureencryptionservice.com/Scripts/token/SecureForm.js"></script>

Example Secure Form usage

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample Form</title>
<script src="https:// secureencryptionservice.com/Scripts/token/SecureForm.js"></script>
<script src="FormClient.js"></script>
</head>
<body style="background-color: aquamarine">
<form id="masterform">
<div id="maindiv">

</div>
<button type="submit" id="TestButton">Test Submit</button>
</form>
</body>
</html>

FormClient.js demonstrates setting up the secure form in javascript. Note that since the parent form ID
is provided, SecureForm.js will watch for parent form submission attempts.

FormClient.js Definition:
document.addEventListener("DOMContentLoaded", function () {
// Handler when the DOM is fully loaded

var css =
{
'FontFamily': "Verdana",
'FontSize': ".9em",
'Color': "#222222",
'BackgroundColor': "#DDDDDD",
'ButtonColor': "#DDDDDD",
'ButtonBackgroundColor': "#00DD00",
'ButtonHoverColor': "#FFFFFF",
'ButtonHoverBackgroundColor': "#008800",
'ButtonBorderColor': "#00DD00",
'InvalidColor': "#AA0000"
};
var text =
{
'ButtonText': "Pay Now",
'ButtonHidden': true
};
SECCInitializeSecureForm("asohasdj2", "iksjhdfkjhs", "maindiv", "masterform", 400,
css, text);
});