Page Comparison

...

...

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

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:

...

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:

1. Set the PayFields transaction mode to 'txn' as shown below:
   

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

2. Set the transaction amount to `0` as shown below. Use a string for the amount:
   

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

3. 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.

...

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

ACH

The information below provides an overview of the PayFields ACH feature. See the Accept ACH Payments With PayFields page for details about building a payment page that accepts ACH payments.

...

Transaction with Token Hash Only

PayFields.config.txnTypetoken = 'ecsale';

...

PayFields.config.fieldsapiKey = [
    {
        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'
        }
    }
];''
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:

...

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

The value for PayFields.config.mode must be set to token to create a customer account. Customer accounts cannot be created if mode is set to txnTokenIf 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:

...