...
| Table of Contents | ||||
|---|---|---|---|---|
|
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 |
|---|---|---|
| All Fields | Class |
| Number Field | Class |
| Expiration Field | Class |
| CVV Code Field | Class |
| Cardholder Name Field | Class |
| All Cardholder Address Fields | Class |
| Address 1 | Class |
| City | Class |
| State | Class |
| Zip | Class |
| Class | |
| Phone | Class |
| All Error Spans | Class |
| Card Number Error Span | Class |
| Card Expiration Error Span | Class |
| Card CVV Error Span | Class |
| Cardholder Name Error Span | Class |
| All Address Error Span | Class |
| Address 1 Error Span | Class |
| City Error Span | Class |
| State Error Span | Class |
| Zip Code Error Span | Class |
| Cardholder Email Error Span | Class |
| Phone Number Error Span | Class |
| Credit Card Icon | Class |
| 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.
...
...
To use swiper with Payfields, the card swiper must be configured for KBE (Keyboard Emulation).
The sections below provide examples of each:
...
| 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 | ||
|---|---|---|
| ||
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:
...