Versions Compared

Old Version 40

changes.mady.by.user Miles Graves

Saved on

compared with

New Version 41

changes.mady.by.user James Lewis III

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents
minLevel2
maxLevel2

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.

...

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:

...

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
languagejs
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:

...