Skip to main content
Skip table of contents

PayFields - Example

Note: URL example below is enabled for Sandbox, Production in comments.

Example Payfields use case

CODE 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!-- Be sure to set the proper url-->
  <!-- Sandbox URL -->
  <script type="text/javascript" src="https://test-api.payrix.com/payFieldsScript"></script>
  <!-- Production URL -->
<!-- <script type="text/javascript" src="https://api.payrix.com/payFieldsScript"></script> -->
  <title>Payfields Testing</title>
  <style media="screen">
    #button {
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      width: 150px;
      outline: none;
      height: 30px;
      background-color: rgb(69,67,67);
      color: white;
    }
    #swipe {
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      width: 150px;
      outline: none;
      height: 30px;
      background-color: rgb(0,0,0);
      color: white;
    }
    /*
       Recommended minimum div sizes to properly display iframes. We need to
       set div height and width when passing custom styles. When no custom
       styles are passed then it is automatically set to optimal height and
       width
    */
    .form-row {
      height: 73px;
      width: 300px;
    }
    .address-row {
      height: 438px;
      width: 300px;
    }
  </style>
</head>
<body>
   <div>
    <label for="number">
      Number:
    </label>
    <!-- Div for number field iframe  -->
    <div id="number" class="form-row">
    </div>
  </div>
  <div >
    <label for="expiration">
      Expiration:
    </label>
    <!-- Div for expiration field iframe -->
    <div id="expiration" class="form-row">
    </div>
  </div>
  <div>
    <label for="cvv">
      CVV:
    </label>
    <!-- Div for cvv field iframe -->
    <div id="cvv" class="form-row">
    </div>
  </div>
  <div>
    <label for="name">
      Name:
    </label>
    <!-- Div for name field iframe  -->
    <div id="name" class="form-row">
    </div>
  </div>
  <div>
    <label for="address">
      <!-- Address: -->
    </label>
    <!-- Div for address field iframe  -->
    <div id="address" class="address-row">
    </div>
  </div>
  <div class="button-container">
    <button type="button" id="button" name="Submit">Submit</button>
    <button id="swipe" type="button" name="button">Swipe</button>
  </div>

  <script>
  // Api key
  PayFields.config.apiKey = "APIKEY";
  // Merchant id
  PayFields.config.merchant = "t1_mer_merchant_id";
  // Option to Enable swipe
  //PayFields.config.swipe = true;
  // Set the amount in cents on load. This can be set to null and modified
  // onClick or onEdit
  PayFields.config.amount = '0';
  // Option to create token while also a transaction. Remove this line to run a sale
 PayFields.config.mode = 'txnToken'; 
  // Setting Transaction type to auth. Remove this line to run a full sale
 //PayFields.config.txnType = 'auth';
 // Set this to use Payfields to ONLY generate a token.
 //PayFields.config.txnType = 'token';

 // To pass in an address for a transaction, use the below.

 // Fields address, city, state, zip, email, and phone will only be set
 // if there are no address fields setup

 // Fields address2, country, and company will always be set regardless
 // if address fields are setup since they are considered extra billing
 // address fields.

PayFields.config.billingAddress = {
	 address: '123 Madison Street',
	 city: 'New York',
	 state: 'NY',
	 zip: '12345',
	 email: 'test@test.com',
	 phone: '2223456789',
	 address2: 'suite 555',
	 company: 'Essential Co',
	 country: 'USA'
 };

  // Fields that will be used, each field will be passed as an object
  // the type of field and element needs to be passed. Values are optional
  // and those inputs will be filled with the values, they will be
  // disabled
  PayFields.fields = [
    {
      type: "number",
      element: "#number",
      values: {number: "4242424242424242"}
    },
    {
      type: "cvv",
      element: "#cvv",
    },
    {
      type: "name",
      element: "#name",
    },

  //{
  //     type: "address",
  //      element: "#address",
  //},
    {
      type: "expiration",
      element: "#expiration",
    }
  ];
  // Passing Custom Styles. We pass a style object with the class(es) 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
  // however in case of same property on both classes are to be styled then
  // class with highest priority will overwrite the other. All classes will be
  // described further below
  PayFields.customizations = {
    style: {
      // All address fields class.
      ".address-input": {
        borderColor: "rgb(119,136,153)",
        borderStyle: "solid",
        borderBottomWidth: "1px"
      },
      // All fields
      ".input": {
        borderColor: "rgb(69,67,67)",
        borderStyle: "solid",
        borderBottomWidth: "1px"
      },
      // All error spans
      ".form-error": {
        color: "rgb(255, 0, 128)"
      },
      // Address error spans
      ".address-form-error": {
        color: "rgb(0,139,139)"
      }
    }
  };

  // This would be handled automatically if a button element is passed to
  // Payfields.button
  $("#button").on("click", function(){
    // Disable the button to avoid multiple calls
    $(this).prop("disabled", true);
    // Submit
    PayFields.submit();
  });

  // This would be handled automatically if a button element is passed to
  // Payfields.swipeButton
  $("#swipe").on("click", function(){
    // Swipe
    PayFields.swipePopup();
  });

  // On validation error(s), this would handled automatically if an button
  // element is passed to Payfields.button
  PayFields.onValidationFailure = function() {
    // Enable the button to resubmit
    $("#button").prop("disabled", false);
  }

  // On API error(s), this would handled automatically if an button element is
  // passed to Payfields.button
  PayFields.onFailure = function() {
    // We will flash error response on button
    $("#button").text("Error");
    $("#button").css(
      {"backgroundColor": "rgb(138,15,15)", "transition": "2s"}
    );
    // Fields are automatically cleared on success. However, We may
    // clear all fields, or specific field(s) manually. To clear all fields
    // we need to call clearFields without passing any parameter.
    PayFields.clearFields();
    // To clear one or more fields we need to pass an array to clearfields.
    // Possible fields to clear are: number, cvv, expiration, name, and address. 
    // Payfields.clearFields(['number', 'cvv', 'expiration']);

    setTimeout(function() {
      $("#button").text("Submit");
      $("#button").css(
        {"backgroundColor": ""}
      );
      // Enable button to resubmit
      $("#button").prop("disabled", false);
    }, 2000);
  }

  // On Success, display Success and re-enable button
  // This would handled automatically if an button element is passed to
  // Payfields.button
  PayFields.onSuccess = function(response) {
    // We will flash success response on button and clear the iframe
    // inputs
    $("#button").text("Success");
    $("#button").css(
      {"backgroundColor": "rgb(79,138,16)", "transition": "2s"}
    );
    setTimeout(function() {
      $("#button").text("Submit");
      $("#button").css(
        {"backgroundColor": ""}
      );
      $("#button").prop("disabled", false);
    }, 2000);
    console.log("it was successful");
    console.log(response)
  }
  /*
    All available Classes:
    '.input'              | All fields,
    '.number'             | Number field,
    '.expiration'         | Expiration field,
    '.cvv'                | Cvv field,
    '.name'               | Name field,
    '.address-input'      | All address fields,
    '.address1'           | Address1 field,
    '.city'               | City field,
    '.state'              | State field,
    '.zip'                | Zip field,
    '.email'              | Email field,
    '.phone'              | Phone field,
    '.form-error'         | All error spans,
    '.number-error'       | Number error span,
    '.expiration-error'   | Expiration error span,
    '.cvv-error'          | Cvv error span ,
    '.name-error'         | Name error span,
    '.address-form-error' | All Address error spans,
    '.address1-error'     | Address1 error span,
    '.city-error'         | City error span,
    '.state-error'        | State error span,
    '.zip-error'          | Zip error span,
    '.email-error'        | Email error span,
    '.phone-error'        | Phone error span
  */
  </script>
</body>
</html>

How to ONLY generate a token (no address verification)

CODE 
PayFields.config.mode = 'token';

How to generate a token WITH a transaction

  • For example: a zero dollar Auth ($0 Authorization).

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

How to pre-fill and hide Payfield Address Fields

CODE 
 // Fields address, city, state, zip, email, and phone will only be set
 // if there are no address fields setup

PayFields.config.billingAddress = {
 address: '123 Madison Street',
 city: 'New York',
 state: 'NY',
 zip: '12345',
 email: 'test@test.com',
 phone: '2223456789',
 address2: 'suite 555',
 company: 'Essential Co',
 country: 'USA'
 };
 
// Fields address2, country, and company will always be set regardless
// if address fields are setup since they are considered extra billing
// address fields.

Payfields Sample Response

This is returned from a successful transaction as seen above

CODE 
address1: "123 Madison Street"
address2: "suite 555"
allowPartial: 0
approved: "0"
authCode: null
authDate: null
authTokenCustomer: null
authentication: null
authenticationId: null
authorization: "87957"
batch: null
captured: null
cashback: null
channel: null
city: "New York"
clientIp: null
cofType: "single"
company: "Essential Co"
convenienceFee: 0
copyReason: null
country: "USA"
created: "2020-12-30 20:10:42.9558"
creator: "t1_log_5f875c53ed397f57c0afc90"
currency: "USD"
currencyConversion: null
cvv: 1
cvvStatus: null
debtRepayment: "0"
description: null
descriptor: "Katie Bani"
discount: null
duty: null
email: "test@test.com"
emv: 0
entryMode: null
expiration: "1221"
fee: null
first: "John"
fortxn: null
fromtxn: null
frozen: 0
funded: null
fundingCurrency: "USD"
fundingEnabled: "1"
id: "t1_txn_5fed2512e93f43d6aec6244"
imported: 0
inactive: 0
ipCreated: "172.68.132.154"
ipModified: "172.68.132.154"
last: "Smith"
merchant: "t1_mer_5f875e548f62ed646775219"
middle: null
misused: null
modified: "2020-12-30 20:10:43.0659"
modifier: "t1_log_5f875c53ed397f57c0afc90"
order: ""
origin: "8"
originalApproved: "0"
payment: "g157968b6df1534"
phone: "2223456789"
pin: 0
processedSequence: 0
refunded: 0
requestSequence: 0
reserved: 0
serviceCode: null
settled: null
settledCurrency: null
settledTotal: null
shipping: null
signature: 0
state: "NY"
statement: null
status: "1"
subscription: null
surcharge: null
swiped: 0
tax: null
terminal: null
terminalCapability: null

token:
	authTokenCustomer: null
	created: "2020-12-30 20:10:42.9542"
	creator: "t1_log_5f875c53ed397f57c0afc90"
	custom: null

	customer:
		address1: "123 Madison Street"
		address2: "suite 555"
		authTokenCustomer: null
		city: "New York"
		company: "Essential Co"
		country: "USA"
		created: "2020-12-30 20:10:42.9514"
		creator: "t1_log_5f875c53ed397f57c0afc90"
		custom: null
		email: "test@test.com"
		fax: null
		first: "John"
		frozen: 0
		id: "t1_cus_5fed2512e837be4143d650e"
		inactive: 0
		last: "Smith"
		login: "t1_log_5f875c53ed397f57c0afc90"
		merchant: "t1_mer_5f875e548f62ed646775219"
		middle: null
		modified: "2020-12-30 20:10:42.9514"
		modifier: "t1_log_5f875c53ed397f57c0afc90"
		phone: "2223456789"
		shippingAddress1: null
		shippingAddress2: null
		shippingCity: null
		shippingCompany: null
		shippingCountry: null
		shippingFax: null
		shippingFirst: null
		shippingLast: null
		shippingMiddle: null
		shippingPhone: null
		shippingState: null
		shippingZip: null
		state: "NY"
		zip: "12345"

	description: null
	expiration: "1221"
	frozen: 0
	id: "t1_tok_5fed2512e89ecae85f82094"
	inactive: 0
	modified: "2020-12-30 20:10:42.9542"
	modifier: "t1_log_5f875c53ed397f57c0afc90"
	name: null

	payment:
		bin: "424242"
		lastChecked: null
		method: 2
		number: "4242"
		payment: null
		routing: "0"

	status: "ready"
	token: "01c07ce7338b189433edc62d79f216d0"

total: 0
traceNumber: null
type: "2"
unattended: null
unauthReason: null
zip: "12345"
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close