Page Comparison

...

This page provides details about the following features of PayFields:

Table of Contents

minLevel	2
maxLevel	2

Feature	Use Case
Level II

...

Fields	Include additional data with transactions to qualify for better interchange rates.
Billing Address

...

	Add billing address fields and prefill them if applicable.
Customization

...

	Set the styles and contents for the payment fields.
Card

...

Swipe Popup	Add a popup to support collecting payment data using a compatible card reader.
Transaction Submit Button

...

	Add a preconfigured submission button that makes it easy to build a payment page.
Zero Dollar Auth

...

	Check the validity of a payment method or obtain authorization for a transaction without actually charging the customer's account.
Tokenization

...

	Create card tokens for automatic and recurring payments.
ACH

...

	Accept payments using a customer’s bank account information.
Invoices	Pay and invoice using PayFields.
Customer Account Creation	Save customer records with tokenized payment information.

For definitions of the PayFields actions, including the transaction result callback functions, see the Developer Guide.

Level II Fields

...

Note

Important Info for Canadian Merchants:

province fields replace the state fields (see valid values here).
postal fields replace zip fields (see valid values here).
currency will be in CAD.

Level II Fields

PayFields provides Level II fields for merchants who use additional information to qualify for reduced interchange fees. The example below shows how to add the Level II/III fields and set their values:

Code Block

PayFields.config.order = {order number};
PayFields.config.tax = {tax number};
PayFields.config.dicount = {discount number};
PayFields.config.additionalData.shipping = {shipping number};
PayFields.config.additionalData.duty = {duty number}
PayFields.config.items = {items Object}
PayFields.config.billingAddress = {
  address: '123 Madison Street',
  city: 'New York',
  state: 'NY',
  zip: '12345',
  email: '',
  phone: '',
  address2: 'suite 555',
  company: 'Essential Co',
  country: 'USA'
};
PayFields.config.additionalData = {Additional Object};
PayFields.config.invoiceResult = {Invoice Object}

...

Billing Address information can be entered by the customer or submitted by the merchant, if the merchant already knows the values. The sections below describe how to use PayFields in each of the following cases: customer entry, prefill and display, prefill and do not display.

Customer Entry

To add billing address fields to a payment page so that a customer can fill in the information use the PayFields.fields = []; function to define the elements that will display the billing address fields.

For customer entry of the billing address, do not set values for the individual address fields. If you set values for the fields in the "address" object, the customer will NOT be able to modify the values.

The code below shows how to include the "address" type in the PayFields.fields function:

Code Block

PayFields.fields = [
  {type: "number", element: "#number"},
  {type: "cvv", element: "#cvv"},
  {type: "name", element: "#name"},
  {type: "expiration", element: "#expiration"},
  {type: "address", element: "#address"}
]

Prefill and Display

To prefill the billing address and display the values use the PayFields.fields function to There are two ways to set the billing address:

PayFields.config.billingAddress = {} - This is the preferred method for setting billing address fields. The billingAddress object makes it easier to customize the way the address fields are displayed on your page and works with common JavaScript frameworks. With the billingAddress object, your customer can also edit prefilled form values.
PayFields.fields = [] - The fields array displays all of the billing address fields inline on your page and requires absolute positioning in your CSS. Customers cannot edit prefilled values.

Both methods allow you to toggle the visibility of certain fields, define optional fields, and prefill form values using defaults or information previously entered by your customer.

Payfields.config.billingAddress

Add fields to the PayFields.config.billingAddress object as shown in the sample code below to include them on your payment forms:

Code Block

language	js

PayFields.config.billingAddress = {
  address: this.address1,
  city: this.city,
  state: this.state1,
  zip: this.zip,
  phone: this.phone,
  email: this.email
}

Payfields.fields

The sections below describe how to use the fields array for the following cases: customer entry, prefill and display, prefill and do not display.

Customer Entry

To add billing address fields to a payment page so that a customer can fill in the information use the PayFields.fields = []; function to define the elements that will display the billing address fields and the values that they will contain.

The code below shows how to prefill and display the billing address fields:

...

.

For customer entry of the billing address, do not set values for the individual address fields. If you set values for the fields in the "address" object, the customer will NOT be able to modify the values.

The code below shows how to include the "address" type in the PayFields.fields function:

Code Block

PayFields.fields = [
  {type: "number", element: "#number"},
  {type: "cvv", element: "#cvv"},
  {type: "name", element: "#name"},
  {type: "expiration", element: "#expiration"},
  {
    type: "address",     element: "#address",
    values: {
      address: "123 Madison Street",
      city: 'New York',
      state: 'NY',
      zip: '12345'}
]

Prefill and Display

To prefill the billing address and display the values use the PayFields.fields function to define the elements that will display the billing address fields and the values that they will contain.

The code below shows how to prefill and display the billing address fields:

Code Block

PayFields.fields = [
  {type: "number", element: "#number"},
  {type: "cvv", element: "#cvv"},
  {type: "name", element: "#name"},
  {type: "expiration", element: "#expiration"},
  {
    type: "address",
      emailelement: 'test@test.com'"#address",
    values:  phone{
      address: "123 Madison Street",
      city: 'New York',
      state: '2223456789NY',
    }  zip: '12345',
      }
]

Prefill and Do Not Display

...

email: 'test@test.com',
      phone: '2223456789'
    }
  }
]

Prefill and Do Not Display

Use the PayFields.config.billingAddress function to set values for all of the billing address elements. These values will be sent directly to Payrix when the transaction is submitted, and they will not be displayed to the customer.

...

If you use both the PayFields.fields and PayFields.config.billingAddress options, the expiration, email, and phone fields are required by default. To make them optional, add the following code to the PayFields <script> block:

PayFields.customizations.optionalFields = ["#email", "#phone", "#expiration"];

...

Optional Fields

PayFields provides the following features that can be used to customize your user experience:

Placeholder Text - Add placeholder text to the form fields to provide examples or explanations of the required data.
CSS - Use CSS to define the look and feel of the payment fields.

Placeholder Text

To change the placeholder for any of the fields, create a PayFields.customizations.style = {}; object and set the key to the field and the value to the desired placeholder text. The example below shows how to set the placeholder text:

Code Block
PayFields.customizations.placeholders = { '#name': 'Card Holder', '#expiration': 'Expiration (MM/YY)', '#payment_cvv': 'CVV', "#payment_number": '0000 0000 0000 0000' }

Use the following keys to the set placeholder text for the associated field: '#payment_number', '#expiration', '#payment_cvv', '#name', '#address1', '#city', '#state', '#zip', '#email', and '#phone'.

CSS

Payrix passes a style object with the class(es) or ids to be styled. Specific classes such as .number have priority over more generic classes such as .input. In other words, classes will stack on each other.

Info

In the case of the same property on both classes being styled, the class with the highest priority will overwrite the other. All CSS keys should be converted to camelCase as shown below:

PayFields.customizations.style = { ".input": { borderStyle: "solid" } }

The code below shows an example of setting styles for the .input class:

...

title	Click to expand the customizations example.

...

language	html

...

Use the sample code below to define optional fields for your billing address form when using the PayFields.fields array:

Code Block

language	js

PayFields.customizations.optionalFields = ['#address1', '#city', '#state', '#zip', '#email', '#phone' ]

The values in the optionalFields array should be the selector for the field. The following values are available as optional fields:

#phone
#email
#expiration
#payment_cvv
#address1
#city
#state
#zip
#customer_id
#routing
#account_type
#account_number

Customization

PayFields provides the following features that can be used to customize your user experience:

Placeholder Text - Add placeholder text to the form fields to provide examples or explanations of the required data.
CSS - Use CSS to define the look and feel of the payment fields.

Placeholder Text

To change the placeholder for any of the fields, create a PayFields.customizations.style = {}; object and set the key to the field and the value to the desired placeholder text. The example below shows how to set the placeholder text:

Code Block

Card Swipe Popup

The card swipe popup opens a separate modal that supports collecting payment information from an unencrypted card reader. The image below shows the card swipe popup:

...

PayFields supports two ways to launch the card swipe popup: the PayFields.swipePopup(); function and the card swipe popup button. The sections below provide examples of each:

Card Swipe Popup Function

Add the code below in a <script> tag to enable the card swipe popup:

Code Block
Payfields.config.swipe = true;

Call the PayFields.swipePopup(); function to display the popup:

Code Block
PayFields.swipePopup();

A standard implementation calls the swipePopup() function using an event listener attached to a button, as shown in the code below:

Code Block
PayFields.config.swipe = true; swipeBtn.addEventListener('click', function() { PayFields.swipePopup(); }) let swipeBtn = document.querySelector('#swipeBtn');

Card Swipe Button

The card swipe button opens the card swipe modal when clicked. The code below shows how to add the card swipe button:

Code Block
PayFields.swipeButton = { element: "#swipe", value: "Click to Swipe"};

Assign the value set in the element field to a <div> on the payment page. Payfields will display a button in the <div> with the text assigned with the value field as the label.

...

The example below shows how to add a preconfigured button to submit transaction information to Payrix for processing:

Code Block
PayFields.button = { element: "#submit", value: "Click to Submit" };

The text set for the value element will appear as the label on the button.

Creating a custom HTML button with an attached event listener that calls the PayFields.submit(); function provides additional customization capabilities.

Zero Dollar Auth

Use zero dollar auth transactions to obtain approval for a payment method without actually charging the cardholder’s account. Zero dollar auth transactions are a component of setting up automatic and recurring payments. Follow the steps below to perform zero dollar auth transaction:

Set the PayFields transaction mode to 'txn' as shown below:
Code Block
PayFields.config.mode = 'txn';
Set the transaction amount to `0` as shown below. Use a string for the amount:
Code Block
PayFields.config.amount = '0';
Set the transaction type to 'auth':
Code Block
PayFields.config.txnType = 'auth';

Tokenization

The PayFields tokenization feature makes it possible to store a reference to payment information that can be used to process automatic or recurring payments. PayFields supports token only and transaction+token functions.

Do not use the tokenization feature in combination with Customer, since Customer is a unique token/card holder. Creating a tokenized card creates a unique Customer.

The sections below provide examples of how to generate tokens using PayFields.

Token Only

To tokenize a card payment, set the Payfields.config.mode value to 'token', as shown below, to submit a token-only request (specific to card payments only, see eCheck instructions below.)

Code Block
PayFields.config.mode = 'token';

To tokenize an eCheck payment, set the Payfields.config.mode value to 'txnToken' must be used:

Code Block
PayFields.config.mode = 'txnToken'

Token with Transaction

Set a transaction amount and set the PayFields.config.mode value to 'txnToken', as shown below, to submit a payment transaction and generate a token at the same time:

Code Block
PayFields.config.amount = '0'; PayFields.config.mode = 'txnToken';

ACH

Set the PayFields.config.txnType to ecsale. Failure to update this value will result in an error during the eCheck transaction request.

Code Block
PayFields.config.txnType = 'ecsale';

Add routing number, account number, and account type fields on the payment page as shown in the code below:

Code Block

language	js

PayFields.customizations.placeholders = {

".input"

'#name':

{

'Card Holder',

border

'#expiration':

"1px solid #ced4da"

'Expiration (MM/YY)',
    '#payment_cvv': 'CVV',

display:

block

#payment_number"

,

: '0000 0000 0000

width: "12rem", height: "34px", padding: "0.375rem-0.75rem", font: "12px Arial, Helvetica, sans-serif", fontSize: ".75rem", lineHeight: "1.5", borderRadius: "2px", backgroundColor: "#fff", boxShadow: "inset 0 1px 1px rgba(0, 0, 0, .075)", backgroundClip: "padding-box", }, }

The table below defines the classes and IDs available for styling PayFields elements:

...

Code Snippet

...

Field Description

...

Type

...

".input"

...

All Fields

...

Class

...

".number"

...

Number Field

...

Class

...

".expiration"

...

Expiration Field

...

Class

...

".cvv"

...

CVV Code Field

...

Class

...

".name"

...

Cardholder Name Field

...

Class

...

".address-input"

...

All Cardholder Address Fields

...

Class

...

".address1"

...

Address 1

...

Class

...

".city"

...

City

...

Class

...

".state"

...

State

...

Class

...

".zip"

...

Zip

...

Class

...

".email"

...

Email

...

Class

...

".phone"

...

Phone

...

Class

...

".form-error"

...

All Error Spans

...

Class

...

".number-error"

...

Card Number Error Span

...

Class

...

".expiration-error"

...

Card Expiration Error Span

...

Class

...

".cvv-error"

...

Card CVV Error Span

...

Class

...

".name-error"

...

Cardholder Name Error Span

...

Class

...

".address-form-error"

...

All Address Error Span

...

Class

...

".address1-error"

...

Address 1 Error Span

...

Class

...

".city-error"

...

City Error Span

...

Class

...

".state-error"

...

State Error Span

...

Class

...

".zip-error"

...

Zip Code Error Span

...

Class

...

".email-error"

...

Cardholder Email Error Span

...

Class

...

".phone-error"

...

Phone Number Error Span

...

Class

...

".card-icon"

...

Credit Card Icon

...

Class

...

"#payFields-iframe-swiper"

...

Swiper iFrame

...

ID

PayFields.fields = [
    {
        type: "routing",
        element: "#routing",
    },
    {
        type: "account_type",
        element: "#account_type",
    },
    {
        type: "account_number",
        element: "#account_number",
    },
    {
        type: 'name',
        element: '#name',
        values: { name: 'John Wayne' }
    },
    {
        type: 'address',
        element: '#address',
        values: {
            email: 'one@two.com',
            city: 'New York'
        }
    }
];0000'
}

Use the following keys to the set placeholder text for the associated field: '#payment_number', '#expiration', '#payment_cvv', '#name', '#address1', '#city', '#state', '#zip', '#email', and '#phone'.

CSS

Payrix passes a style object with the class(es) or ids to be styled. Specific classes such as .number have priority over more generic classes such as .input. In other words, classes will stack on each other.

Info

In the case of the same property on both classes being styled, the class with the highest priority will overwrite the other. All CSS keys should be converted to camelCase as shown below:

PayFields.customizations.style = { ".input": { borderStyle: "solid" } }

The code below shows an example of setting styles for the .input class:

Expand

title	Click to expand the customizations example.

Code Block

language	css

body {
    background-color: #ffffff
}

.form {
    background: #fff;
    padding-left: 3rem;
    width: 100%;
    height: 30rem;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.075);
}

.form2 {
    background: #fff;
    padding: 10px;
    width: 65%;
    height: 30rem;
    margin: 0 auto;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.075);
}

.v2 {
    background: #fff;
    border-radius: 3px;
    padding: 10px;
    width: 58%;
    height: 40rem !important;
    margin: 0 auto;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
}

.code {
    width: 58% !important;
    height: 25rem;
    margin: 0 auto;   
}
p {
    font-size: 20px;
    font: Arial, Helvetica, sans-serif;
    padding: 0.8rem 1rem 0.6rem;
    font-size: 1rem;
    font-weight: 400;
    height: 1.5rem;
    color: #555;
}

.fa-user, .fa-calendar, .fa-key, .fa-credit-card {
    color: white;
}

.input-group-text {
    margin-right: -1px; 
}

.input-group-text {
    background-color: #1e2761
}
  
.navbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px;
}

/*
headeer top
*/
.topbar{
  background-color: #212529;
  padding: 0;
}

.topbar .container .row {
  margin:-7px;
  padding:2px 0 0 0;
}

.topbar .container .row .col-md-12 { 
  padding:0;
}

.topbar p{
  margin:0;
  display:inline-block;
  font-size: 13px;
  color: #f1f6ff;
}

.topbar p > i{
  margin-right:5px;
}
.topbar p:last-child{
  text-align:right;
} 

header .navbar {
    margin-bottom: 0;
}

.topbar li.topbar {
    display: inline;
    padding-right: 18px;
    line-height: 52px;
    transition: all .3s linear;
}

.topbar li.topbar:hover {
    color: #1bbde8;
}

.topbar ul.info i {
    color: #131313;
    font-style: normal;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: 4px;
}

.topbar ul.info li {
    float: right;
    padding-left: 30px;
    color: #ffffff;
    font-size: 13px;
    line-height: 44px;
}

.topbar ul.info i span {
    color: #aaa;
    font-size: 13px;
    font-weight: 400;
    line-height: 50px;
    padding-left: 18px;
}

ul.social-network {
  border:none;
  margin:0;
  padding:0;
}

ul.social-network li {
  border:none;  
  margin:0;
}

ul.social-network li i {
  margin:0;
}

ul.social-network li {
    display:inline;
    margin: 0 5px;
    border: 0px solid #2D2D2D;
    padding: 5px 0 0;
    width: 32px;
    display: inline-block;
    text-align: center;
    height: 32px;
    vertical-align: baseline;
    color: #000;
}

ul.social-network {
  list-style: none;
  margin: 5px 0 10px -25px;
  float: right;
}

.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    transition: .3s ease-out;
    color: #fff;
}
a {
  color: #0a0a0a;
  text-decoration: none;
}

li {
    list-style-type: none;
}
.bg-image-full {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.bg-dark {
    background-color: #222!important;
}

.mx-background-top-linear {
    background: -webkit-linear-gradient(45deg, #b031da 48%, #1b1e21 48%);
    background: -webkit-linear-gradient(left, #b031da 48%, #1b1e21 48%);
    background: linear-gradient(45deg, #b031da 48%, #1b1e21 48%);
}

#clear {
    background-color: #1e2761;
    color: white;
}

#submit {
    background-color: #7a2048;
    color: white;
    border-radius: 2px !important;
    margin-right: 2.5rem;
}

#submit2 {
    background-color: hsl(180, 100%, 30%);
    color: white;
    border-radius: none;
    width: 100%;
    margin: 0 auto;
}

#submit3 {
    margin: 0 auto;
    width: 60%;
}

.min {
    height: 5rem;
}

.v2 {
    width: 46%;
    margin: 0 auto;
    height: 20rem;
}

.el {
    margin-bottom: -111px;
    margin-right: -109px;
}

.el2 {
    height: 30rem;
}

/* Font awesome styles */
.fa-info-circle {
    color: #222;
}

/* Form Validation */

/* Hide all steps by default: */
.tab {
    display: none;
  }

.additionalInputs {
    border: 1px solid #ced4da;
    display: block;
    width: 12rem;
    height: 34px;
    padding: 0.375rem-0.75rem;
    font: 12px Arial, Helvetica, sans-serif;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    background-clip: padding-box;
}

/* Style the tab */
.tab2 {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  .tab2 button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab2 button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab2 button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    height:100rem;
  }

#number:hover {
  background-color: #eee;
  display: block;
  width: 12rem;
  height: 34px;
  padding: 0.375rem-0.75rem;
  font: 12px Arial, Helvetica, sans-serif;
  font-size: .75rem;
  line-height: 1.5;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  background-clip: padding-box;
}
/*
#customer_id {
  display: none;
}
*/
.img-box {
  width: 30px;
  height: 15px;
}

.card img {
  width: 100%;
  object-fit: fill;
}

.fab.fa-cc-amex {
  color: #1c6acf;
  font-size: 32px;
}

.fab.fa-cc-mastercard {
  font-size: 32px;
  color: red;
}

.fab.fa-cc-discover {
  font-size: 32px;
  color: orange;
}

The table below defines the classes and IDs available for styling PayFields elements:

Code Snippet	Field Description	Type
`".input"`	All Fields	Class
`".number"`	Number Field	Class
`".expiration"`	Expiration Field	Class
`".cvv"`	CVV Code Field	Class
`".name"`	Cardholder Name Field	Class
`".address-input"`	All Cardholder Address Fields	Class
`".address1"`	Address 1	Class
`".city"`	City	Class
`".state"`	State	Class
`".zip"`	Zip	Class
`".email"`	Email	Class
`".phone"`	Phone	Class
`".form-error"`	All Error Spans	Class
`".number-error"`	Card Number Error Span	Class
`".expiration-error"`	Card Expiration Error Span	Class
`".cvv-error"`	Card CVV Error Span	Class
`".name-error"`	Cardholder Name Error Span	Class
`".address-form-error"`	All Address Error Span	Class
`".address1-error"`	Address 1 Error Span	Class
`".city-error"`	City Error Span	Class
`".state-error"`	State Error Span	Class
`".zip-error"`	Zip Code Error Span	Class
`".email-error"`	Cardholder Email Error Span	Class
`".phone-error"`	Phone Number Error Span	Class
`".card-icon"`	Credit Card Icon	Class
`"#payFields-iframe-swiper"`	Swiper iFrame	ID

Card Swipe Popup

The card swipe popup opens a separate modal that supports collecting payment information from an unencrypted card reader. The image below shows the card swipe popup:

...

Note

Keyboard Emulation Required

To use the Card swipe feature with PayFields, the swiper needs to be configured for KBE (Keyboard Emulation).

PayFields supports two ways to launch the card swipe popup: the PayFields.swipePopup(); function and the card swipe popup button.

The sections below provide examples of each:

Card Swipe Popup Function

Add the code below in a <script> tag to enable the card swipe popup:

Code Block
Payfields.config.swipe = true;

Call the PayFields.swipePopup(); function to display the popup:

Code Block
PayFields.swipePopup();

A standard implementation calls the swipePopup() function using an event listener attached to a button, as shown in the code below:

Code Block
PayFields.config.swipe = true; swipeBtn.addEventListener('click', function() { PayFields.swipePopup(); }) let swipeBtn = document.querySelector('#swipeBtn');

Card Swipe Button

The card swipe button opens the card swipe modal when clicked. The code below shows how to add the card swipe button:

Code Block
PayFields.swipeButton = { element: "#swipe", value: "Click to Swipe"};

Assign the value set in the element field to a <div> on the payment page. Payfields will display a button in the <div> with the text assigned with the value field as the label.

Anchor
submit-button
submit-button
Submit Transaction Button

The example below shows how to add a preconfigured button to submit transaction information to Payrix for processing:

Code Block
PayFields.button = { element: "#submit", value: "Click to Submit" };

The text set for the value element will appear as the label on the button.

Creating a custom HTML button with an attached event listener that calls the PayFields.submit(); function provides additional customization capabilities.

Zero Dollar Auth

Use zero dollar auth transactions to obtain approval for a payment method without actually charging the cardholder’s account. Zero dollar auth transactions are a component of setting up automatic and recurring payments. Follow the steps below to perform zero dollar auth transaction:

Set the PayFields transaction mode to 'txn' as shown below:
Code Block
PayFields.config.mode = 'txn';
Set the transaction amount to `0` as shown below. Use a string for the amount:
Code Block
PayFields.config.amount = '0';
Set the transaction type to 'auth':
Code Block
PayFields.config.txnType = 'auth';

Tokenization

The PayFields tokenization feature makes it possible to store a reference to payment information that can be used to process automatic or recurring payments. PayFields supports token only and transaction+token functions.

The sections below provide examples of how to generate tokens using PayFields.

Token Only

To tokenize a card payment, set the Payfields.config.mode value to 'token', as shown below, to submit a token-only request (specific to card payments only, see eCheck instructions below.)

Code Block
PayFields.config.mode = 'token';

To tokenize an eCheck payment, set the Payfields.config.mode value to 'txnToken' must be used:

Code Block
PayFields.config.mode = 'txnToken'

Token with Transaction

Set a transaction amount and set the PayFields.config.mode value to 'txnToken', as shown below, to submit a payment transaction and generate a token at the same time:

Code Block
PayFields.config.amount = '0'; PayFields.config.mode = 'txnToken';

Transaction with Token Hash Only

Info

It is also possible to use PayFields with an existing customer token hash. There are no PayFields.fields set up, rather the PayFields.config.token logic is listed directly under the APIKEY and merchant ID. If fields such as “number” are listed in the fields array and the HTML is set up correctly to correspond to the number field, Payrix will query a masked number to display in the number input field.

Code Block
PayFields.config.token = ''

Code Block

language	js

PayFields.config.apiKey = ''
PayFields.config.merchant = ''
// Token hash to run the transaction against a specific customers method of payment
PayFields.config.token = "Token Hash Here"
// Query Selector to grab submit button element
let submit = document.querySelector('#submit');
// Use event listener to call PayFields.submit()
submit.addEventListener('click', function() {
    // Set an amount to config.mode is either txn || txnToken
    PayFields.config.amount = 415
    // Select transaction type (auth / sale)
    PayFields.config.txnType = 'auth'
    // Set the mode (txn, txnToken, token)
    PayFields.config.mode = 'txn'
    // Call submit
    PayFields.submit();
})
PayFields.onSuccess = (response) => {
    console.log(response)
}

Invoicing

Use the PayFields.config.invoiceResult object to apply a full or partial payment to an invoice:

Code Block

PayFields.config.invoiceResult = {
  invoice: '{{InvoiceID}}'
  shippingAddress1: '123 Main Street',
  shippingAddress2: 'Suite 400',
  shippingCity: "Los Angeles",
  shippingState: "CA",
  shippingFirst: "Kevin",
  shippingLast: "Henry",
  message: "Checking",
  shippingCompany: "Drone Inc",
  shippingPhone: "1113334444",
  shippingFax: "2223334445",
  shippingZip: "90023",
  shippingCountry: "USA"
}

The object must include a value for the invoice ID and associated shipping data. If the amount of the payment being submitted is less than the total amount of the invoice, a partial payment will be applied. If the invoice has already been fully paid, PayFields will return an error.

You can only associated a payment with one invoice. You cannot use the invoiceResult object to apply a single payment to multiple invoices.

The values for shippingState and shippingCountry are always abbreviations.

Customer Account Creation

Create a stored customer record when you create a payment token using the PayFields.config.customer object, as shown in the example below:

Code Block

language	js

PayFields.config.customer = {
  first: "Henry",
  middle: "Middle",
  last: "Kevin",
  company: "Another Company, Inc.",
  custom: "Checking",
  email: "testing@gmail.com",
  phone: "1112223334",
  fax: "1234567890"
}

If customerID is not passed with the transaction, in either mode, a new customer account will be created.

DOM Styling

Certain fields can be hidden by setting display: "none" in the PayFields.customizations.style object when you are prepopulating fields using the PayFields.array. The sample code below shows all of the fields that can be hidden:

Code Block

PayFields.customizations.style = {
  ".input": {
    border: "1px solid #ced4da",
    display: "block",
    width: "12rem",
    height: "34px",
    padding: "0.375rem-0.75rem",
    font: "12px Arial, Helvetica, sans-serif",
    fontsize: ".75rem",
    lineHeight: "1.5",
    borderRadius: "2px",
    backgroundColor: "#fff",
    boxShadow: "inset 0 1px 1px rgba(0,0,0,.075)",
    backgroundClip: "padding-box"
  },
  ".address1": {
    display: "none"
  },
  ".city": {
    display: "none"
  },
  ".state": {
    display: "none"
  },
  ".zip": {
    display: "none"
  },
  ".email": {
    display: "none"
  },
  ".phone": {
    display: "none"
  },
  ".form-error": {
    color: "red",
    paddingTop: "5px"
  },
  ".card-icon": {
    marginRight: "6rem",
    marginTop: ".25rem"
  }
}

Page Comparison

Versions Compared

Old Version 27

New Version Current

Key

Level II Fields

Important Info for Canadian Merchants:

Level II Fields

Customer Entry

Prefill and Display

Payfields.config.billingAddress

Payfields.fields

Customer Entry

Prefill and Display

Prefill and Do Not Display

Prefill and Do Not Display

Optional Fields

Placeholder Text

CSS

Customization

Placeholder Text

Card Swipe Popup

Card Swipe Popup Function

Card Swipe Button

Zero Dollar Auth

Tokenization

Token Only

Token with Transaction

ACH

CSS

Card Swipe Popup

Card Swipe Popup Function

Card Swipe Button

Anchorsubmit-buttonsubmit-buttonSubmit Transaction Button

Zero Dollar Auth

Tokenization

Token Only

Token with Transaction

Transaction with Token Hash Only

Invoicing

Customer Account Creation

DOM Styling

Anchor
submit-button
submit-button
Submit Transaction Button