Gateway Emulator
Third Party Shopping Carts

We have designed our gateway to be able to handle transaction submissions and responses in the Authorize.Net format. We call this our Gateway Emulator.

To use the Gateway Emulator, your shopping cart or application must support the Authorize.Net AIM or SIM method of integration. If the application supports the AIM or SIM method, you simply need to change the transaction POST URL to our Gateway Emulator URL.

The Gateway does not support the emulation of XML AIM, CIM, ARB, DPM, Card Present or Transaction Details APIs.

Our Gateway Emulator URL is:

You will need to change any production and test Authorize.Net URLs to one of the above URLs. The following URLs should be replaced:

Some applications will not contain the test URL. In that case, you will only be changing one URL. Once you have updated the URLs to point to us, the application will submit transactions without needing changes to the code base.

You will then need to configure the Authorize.Net AIM or SIM payment module with the following credentials:

• API ID or Login ID is your gateway username.
• Transaction Key is your gateway password.
• The MD5 Hash is the word "gateway" without the marks.

For testing, you can use the username and password of "demo" and "password".

CIT/MIT is supported even though the official AIM API does not support it. Please use the variable names and values documented under the Payment API on all relevant transactions.

Authorize.Net Modern XML Emulator

If your application is using Authorize.Net's current XML API, then you can connect using our newest emulator. Like the above-mentioned emulators, this will accept requests in the same XML format that Auth.Net would accept, so it's just a matter of changing your POST URL to the one below and using your gateway credentials for authentication. This emulator also emulates the response so that should look the same to your software.

Our Modern XML Emulator URL is:

For authentication, this API looks for "name" and "transactionKey".

• "name" can be anything, as it is not used for authentication.
• "transactionKey" is your API Security Key.

Sparrow

If your application is using SparrowOne's Services API, you can connect your software to the gateway via this emulator. Simply replace the POST URL in your software to the following address and you can submit transactions, add update, and delete Customer Vault IDs, and create recurring subscriptions.

Authentication uses your merchant account's API Security Key in the 'mkey' variable.

Methodology
Payment API

Transactions

Steps:

1. The customer sends their payment information to the merchant's web site.
2. The merchant web site posts the payment data to the Payment Gateway.
3. The Payment Gateway responds immediately with the results of the transactions.
4. The merchant web site displays the appropriate message to the customer.

The communication method used to send messages to the Payment Gateway's server is the standard HTTP protocol over an SSL connection.

In the Payment API method, the communications with the cardholder (Steps 1 and 4) are developed completely by the merchant and therefore are not defined by the Payment Gateway. Step 1 should simply collect the payment data from the cardholder and Step 4 should display the appropriate transaction receipt or declined message.

In Step 2, transaction details should be delivered to the Payment Gateway using the POST method with the appropriate variables defined below posted along with the request.

In Step 3, the transaction responses are returned in the body of the HTTP response in a query string name/value format delimited by ampersands. For example: variable1=value1&variable2=value2&variable3=value3

Transaction Types
Payment API

Sale (sale)

Transaction sales are submitted and immediately flagged for settlement.

Authorization (auth)

Transaction authorizations are authorized immediately but are not flagged for settlement. These transactions must be flagged for settlement using the capture transaction type.

Capture (capture)

Transaction captures flag existing authorizations for settlement. Only authorizations can be captured. Captures can be submitted for an amount equal to or less than the original authorization.

Void (void)

Transaction voids will cancel an existing sale or captured authorization. In addition, non-captured authorizations can be voided to prevent any future capture. Voids can only occur if the transaction has not been settled.

Refund (refund)

Transaction refunds will reverse a previously settled or pending settlement transaction. If the transaction has not been settled, a transaction void can also reverse it.

Credit (credit)

Transaction credits apply an amount to the cardholder's card that was not originally processed through the Gateway. In most situations credits are disabled as transaction refunds should be used instead.

Validate (validate)

This action is used for doing an "Account Verification" on the cardholder's credit card without actually doing an authorization.

Update (update)

Transaction updates can be used to update previous transactions with specific order information, such as a tracking number and shipping carrier.

Transaction Variables
Payment API

Sale/Authorization/Credit/Validate/Offline

Notes:

• Level II fields are required for Level II processing.
• Level II and Level III fields are required for Level III processing.
• You can pass only credit card or e-check transaction variables in a request, not both in the same request.
• Certain banks may require some optional fields.
• Some characters output from base64 encoding can not be passed directly into the API (i.e. "+") so ensure these fields are also properly URL encoded.

Capture

Void

Refund

Update

Invoicing Variables
Payment API

Create Invoice

Update Invoice

Notes:

Send Invoice

Notes:

Close Invoice

Retail Data
Payment API

Passing Unencrypted Retail Magnetic Stripe Data

Passing MagTek Magensa Encrypted Magnetic Stripe Data

Passing IDTech M130 Encrypted Swipe Data

Passing IDTech M130 Encrypted Keyed Data

Passing Ingenico Telium 2 Chip Card Data

Passing Ingenico Telium 2 Swipe Data

Passing Ingenico Telium 2 NFC Data

Passing Ingenico Telium 2 Keyed Data

Apple Pay
Payment API

Supported Processors

Configuring Apple Pay

1. Go to Apple's Developer Portal and log in to the Member Center to create a new Merchant ID.
2. Navigate to the Certificates, Identifiers, and Profiles area of the Member Center, and then begin the Register Merchant ID process.
3. You must then set the Apple Merchant ID within your gateway Control Panel under Settings -> Apple Pay.

1. In Apple's Developer Portal, click on the Merchant ID and then click "Edit".
2. Click "Create Certificate".
3. You are obtaining a CSR file from a Payment Provider so you will not have to create one. Click "Continue" to proceed to the upload page.
4. Click "Choose File..." and select the Gateway.certSigningRequest file you downloaded from the gateway's options page.

How to Obtain Apple Pay Payment Data

Passing Apple Pay Payment Data

Notes

Variables

Troubleshooting

1. Verify that the Merchant ID that Apple has in the developer portal exactly matches the Merchant ID in the Gateway's settings.
2. Verify that your app's PKPaymentRequest's merchantIdentifier exactly matches the Merchant ID in the Gateway's settings.
3. Ensure that the correct Merchant ID is checked in the Apple Pay section of the Capabilities tab in your project's target settings.
4. Try creating a new Merchant ID. Reusing an existing Merchant ID with a new certificate may sometimes cause issues with encryption.

Google Pay

Google Pay allows your customers to submit payment data via a payment method they trust. This also enables you to collect their payment information in a tokenized form so that the plain text credit card information never touches your environment.

Set Up

Google Pay documentation can be found here. Those documents are maintained by Google and will be kept up to date with any changes and enhancements to the Google Pay SDK.

When setting up your merchant account in the Google Pay Business Console, Google will ask if you are doing a "Direct" or "Gateway" integration; you should select "Gateway." The SDK will ask you to provide "gateway" and "gatewayMerchantId" values.

Overview

While Google's documentation will have specific details for using the Google Pay SDK, this is an overview of what the integration process and user flow should look like.

1. Your application will render the Google Pay button using libraries provided by Google Mobile Services
2. If the customer taps on the Google Pay button, the Google Pay SDK will open an interface for the customer to select their payment information.
3. The user confirms their payment information, which closes the interface and returns the user to your app.
4. Your app will receive a tokenized version of the customer’s payment information from the Google Pay SDK.
5. That tokenized payload should be passed to the gateway for decryption as a part of your Payment API request.

In the event that there is data in the Payment API request and the Google Pay token, such as the customer's zip code, the gateway will prefer the value in the Google Pay token, as that is what the customer explicitly provided.

Recurring Variables
Payment API

Add a Plan

Edit a Plan

Add a Subscription to an Existing Plan

Adding a Custom Subscription

Update a Custom Subscription's Plan Details

Update Subscription

Delete a Subscription

Customer Vault Variables
Payment API

Add/Update Customer Record

Customer Vault initiated Sale/Auth/Credit/Offline

Delete Customer Record

Notes:

• If you do not pass a customer_vault_id, our system will randomly generate one. If you include a customer_id and customer_vault_id, they must match.
• You can only pass Credit Card or Electronic Check transaction variables.

Product Manager Variables
Payment API

Add a Product

Update a Product

Delete a Product

Partial Payment Information
Payment API

Request Details

Response Details

Examples

Example 1: In this request, if nothing more was done, a transaction for 30.00 would settle at the next cut-off.

Example 2: In this request, payment_in_full was required and two transaction were collected - this transaction would settle at the next cut-off.

Example 3: In this example, payment_in_full was required and two transactions were attempted, but only one collected. The merchant decided to force it out anyways - this transaction would settle at the next cut-off.

Credential on File Information
Payment API

Credential on File regulations apply any time data is stored to process future purchases for a cardholder.

When a customer is actively engaged in checkout - either physically present in a store, or checking out online in their browser, that is a Customer Initiated Transaction (CIT).

When the customer isn’t actively engaged, but has given permission for their card to be charged, that is a Merchant Initiated Transaction (MIT). In order for a merchant to submit a Merchant Initiated Transaction, a Customer Initiated transaction is required first.

A cardholder’s consent is required for the initial storage of credentials. When a card is stored, an initial transaction should be submitted (Validate, Sale, or Auth) with the correct credential-on-file type. The transaction must be approved (not declined or encounter an error.) Then, store the transaction ID of the initial customer initiated transaction. The transaction ID must then be submitted with any follow up transactions (MIT or CIT.)

Credential on File types include Recurring, Installment, and Unscheduled types.

For simplicity - we are using the Payment API variables. These match the names of the Batch Upload, Collect.js, Browser Redirect, or the Customer-Present Cloud APIs. The Three-Step API follows the same pattern, and the variables should be submitted on Step 1.

Request Details

Response Details

Please Note: For Three-Step Redirect transactions, the request details must be sent in Step 1 and the ‘cof-supported’ element will be returned in the response of Step 3.

When doing a credential-on-file type transaction, we will reject any follow up transactions that pass in a card number that does not match the card brand used in the initial transaction. For example, using a Mastercard when the original transaction uses Visa will result in the transaction getting rejected. The card brands each have independent systems for tracking card-on-file transactions, so an initial transaction ID cannot be reused between them. We reject this type of incorrect reuse at the time of the request because it can result in settlement failures, downgrades, etc. later.

If a customer changes their card on file, a good practice is to first store it as a new initial transaction, and reference that initial transaction ID for future payments on the new card.

If a customer is signing up for a recurring subscription, the merchant is expected to send "an initial recurring transaction" every time the customer signs up for a new recurring subscription.

For an initial transaction:

• For a free trial, the initial transaction will be a validate transaction type (or auth if validate is not supported.)
• If the customer is being charged immediately for a product, the initial transaction will be a sale or an authorization for the correct amount.

Either transaction MUST INCLUDE three items:

• billing_method=recurring
• initiated_by=customer
• stored_credential_indicator=stored

Examples

Example 1: In this request, an initial recurring sale is sent and an approved transaction is returned in the response. Store this transaction for the follow up request.

The transaction ID would be stored and submitted on follow up transactions. The follow up transaction(s) would include:

• billing_method=recurring
• initiated_by=merchant
• stored_credential_indicator=used
• initial_transaction_id=XXXXXXXXXX

Example 2: In this request, the subsequent merchant initiated sale is processed using the stored transaction from Example 1.

Please Note: This transaction ID cannot be used for "unscheduled" or "installment" credential-on-file transactions.

Installment transactions work just like Recurring in that you need a customer initiated transaction for a subsequent installment transaction. The difference is the billing_method will be “installment”.

The customer initiated transaction MUST INCLUDE at least three items (* recommended to send, if available):

• billing_method=installment
• initiated_by=customer
• stored_credential_indicator=stored
• * billing_total
• * billing_number (Values: 0-99)

Examples

Example 3: In this request, an initial installment sale is sent and an approved transaction is returned in the response. Store this transaction for the follow up request.

The transaction ID would be stored and submitted on follow up transactions. The follow up transaction(s) would include (* recommended to send, if available):

• billing_method=installment
• initiated_by=merchant
• stored_credential_indicator=used
• initial_transaction_id=XXXXXXXXXX
• * billing_total
• * billing_number

Example 4: In this request, the subsequent merchant initiated sale is processed using the stored transaction from Example 3.

Please Note: This transaction ID cannot be used for "unscheduled" or "recurring" card on file transactions.

The first customer initiated transaction will include these two items (no billing method):

• initiated_by=customer
• stored_credential_indicator=stored

Examples

Example 5: In this request, an initial unscheduled sale is sent and an approved transaction is returned in the response. Store this transaction for the follow up request.

The transaction ID can be used, without a billing method, for a customer initiated or merchant initiated transaction.

Please Note: The transaction ID cannot be used for a “recurring” or “installment” transaction.

Unscheduled, Customer Initiated: A card-absent transaction initiated by the cardholder where the cardholder does not need to enter their card details as the merchant uses the payment credential previously stored by the cardholder to perform the transaction. Examples include a transaction using customer’s merchant profile or digital wallet.

This is your typical shopping cart scenario where the customer checks out without having to re-enter their card details.

The follow up transaction(s) would include:

• initiated_by=customer
• stored_credential_indicator=used

Example 6: In this request, a subsequent unscheduled sale is sent and an approved transaction is returned in the response.

Unscheduled, Merchant Initiated: A transaction using a stored credential for a fixed or variable amount that does not occur on a scheduled or regularly occurring transaction date, where the cardholder has provided consent for the merchant to initiate one or more future transactions. An example of this transaction is an account auto-top up transaction.

An example of an account auto-top up would be a customer with an account with a balance. When that balance gets low, the customer's card is charged automatically, without the customer's involvement.

The follow up transaction(s) would include:

• initiated_by=merchant
• stored_credential_indicator=used
• initial_transaction_id=XXXXXXXXXX

Example 7: In this request, a subsequent unscheduled sale is sent and an approved transaction is returned in the response.

If there is any question where a transaction type falls, we recommend reviewing the official card brand documentation. Visa’s guidelines are the most stringent, and generally if you follow those guidelines, you’ll also be compliant for MasterCard, American Express and Discover.

Visa:
https://usa.visa.com/dam/VCOM/global/support-legal/documents/stored-credential-transaction-framework-vbs-10-may-17.pdf

MasterCard:
https://www.mastercard.us/content/dam/public/mastercardcom/na/us/en/banks-and-credit-unions/other/credential-on-file-the-digital-commerce-growth-engine.pdf

Transaction Response Variables
Payment API

Standard Response

Conditional Response

Testing Information
Payment API

Triggering Errors in Test Mode

• To cause a declined message, pass an amount less than 1.00.
• To trigger a fatal error message, pass an invalid card number.
• To simulate an AVS match, pass 888 in the address1 field, 77777 for zip.
• To simulate a CVV match, pass 999 in the cvv field.

AVS Response Codes
Payment API

AVS Response Codes

CVV Response Codes
Payment API

CVV Response Codes

Result Code Table
Payment API

Result Code Table

Rate Limits
Payment API

Rate Limits

In order to ensure the platform is available for everyone, in very rare cases, some users may encounter rate limits. If your request rate exceeds the limit, you may receive one of two responses: the Payment API-specific Rate Limit response, or the System-Wide Rate Limit response.

Payment API-Specific Rate Limit

If you exceed the Payment API rate limit, you will receive a response with the following fields:

Example

System-Wide Rate Limit

You may encounter the system-wide rate limit if you using other services, for example if you are making requests to both the Payment API and the Query API, or if there are too many concurrent connections from your IP. In this case, your request will receive HTTP 429: Too Many Requests

Handling Rate Limit Responses

Wait before retrying

If you receive a response_code of 301 or an HTTP 429 response, do not immediately retry the request. Immediately retrying may increase the delay before transactions are allowed again.

Use fewer simultaneous connections

Reduce the number of threads or processes sending connections if you regularly encounter rate limits.

Check your credentials

Repeated authentication failures from your IP may result in temporarily lowered rate limits.

Contact support

If you've tried the above fixes and still need additional help, contact Customer Support for other options.

Collect.js

Overview

Collect.js is a JavaScript framework that allows merchants to collect sensitive payment information from their customers without exposing their website to the sensitive information. This can be done while allowing merchants to retain full control over the look and feel of their checkout experience.

This is a data collection and tokenization system, not a full payments API, so you can use this in conjunction with an existing transaction API (Payment API) to submit transactions or use other gateway services that utilize payment information.

Usage

Collect.js is designed to be flexible, and its implementation can be as simple as pasting a single script tag to your checkout page, or it can be customized to interact with your website however you’d like.

Authentication

Authentication is done via a "tokenization key" that you can generate in your merchant control panel under the "Security Keys" settings page. Select a public key, and then "Tokenization" for the key permissions.

This tokenization key can only be used with Collect.js and will not work with any other APIs. Similarly, any API keys already created will not work with Collect.js.

This key will be visible to customers in your website’s source code, so please make sure you only use the tokenization key here.

The Payment Token

                
3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8
                
            

                
type=sale&amount=3.00&ccnumber=4111111111111111&ccexp=1020&cvv=123
                
            

                
type=sale&amount=3.00&checkname=Jane Doe&checkaba=490000018&checkaccount=24413815
                
            

                
type=sale&amount=3.00&payment_token=3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8
                
            

Integration Types

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<!-- Collect.js is loaded -->
<script src="https://secure.easypaydirectgateway.com/token/Collect.js" data-tokenization-key="5mN8N7-jhr55W-N22pxX-uAW2s9">
</script>


<body>
  <h2 class="pageTitle"><span>Lightbox Example</span></h2>

  <form class="theForm">
    <div class="formInner">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="First Name" name="fname" value="John" autofocus>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Last Name" name="lname" value="Smith">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Street Address" name="address1" value="123 Collect Js.">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="City" name="city" value="SAQ-A">
      </div>
      <div class="form-group">
        <input type="state" class="form-control" placeholder="State" name="state" value="IL">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Zip code" name="zip" value="12345">
      </div>
    </div>

    <input type="submit" id="payButton" value="Pay $5" class="btn btn-primary btn-block">

  </form>

  <div id="paymentTokenInfo"></div>

</body>
                

html {
  font-family: 'Abel';
}

.pageTitle {
  text-align: center;
  margin-top: 20px;
  font-size: 40px;
  font-family: "Domine" !important;
}

.form-group {
  width: 290px;
}

.formInner {
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px auto;
}

#payButton {
  width: 290px;
  display: block;
  margin: 20px auto;
  height: 50px !important;
  font-size: 20px;
  background-color: #1CC48B;
  border-color: #1CC48B;
  box-shadow: 0 3px 10px #bbbbbb;
}

#payButton:hover {
  background-color: #19C687;
  border-color: #19C687;
  box-shadow: 0 3px 4px #bbbbbb;
}

#payButton:active {
  opacity: 0.7;
}

.form-control {
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 2px 8px #dddddd !important;
  font-family: 'Abel';
}

.form-control:hover {
  box-shadow: 0 2px 4px #dddddd;
}

.form-control:focus {
  box-shadow: 0 2px 4px #dddddd !important;
  border: 3px solid #1CC48B !important;
}

#paymentTokenInfo {
  display: block;
  width: 600px;
  margin: 30px auto;
}

@media only screen and (max-width: 600px) {
  .pageTitle {
    font-size: 30px;
  }

  .theForm {
    width: 300px;
    max-width: 90%;
    margin: auto;
  }

  .form-group {
    width: 100%;
  }

  #paymentTokenInfo {
    width: 100%;
  }
}
                

// This prints out the contents of the payment token to the page.
document.addEventListener('DOMContentLoaded', function () {
  CollectJS.configure({
    'paymentType': 'cc',
    'callback': function (response) {
      document.getElementById("paymentTokenInfo").innerHTML =
        '<b>Payment Token:</b> ' + response.token +
        '<br><b>Card:</b> ' + response.card.number +
        '<br><b>BIN/EIN:</b> ' + response.card.bin +
        '<br><b>Expiration:</b> ' + response.card.exp +
        '<br><b>Hash:</b> ' + response.card.hash +
        '<br><b>Card Type:</b> ' + response.card.type +
        '<br><b>Check Account Name:</b> ' + response.check.name +
        '<br><b>Check Account Number:</b> ' + response.check.account +
        '<br><b>Check Account Hash:</b> ' + response.check.hash +
        '<br><b>Check Routing Number:</b> ' + response.check.aba;
    }
  });
});
                

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- COLLECT.JS INLINE -->
    <script src="https://secure.easypaydirectgateway.com/token/Collect.js"
        data-tokenization-key="5mN8N7-jhr55W-N22pxX-uAW2s9"></script>
</head>

<body>
    <h2 class="pageTitle"><span>Collect.js Inline Example</span></h2>

    <form class="theForm" action="">
        <input type="hidden" name="variant" value="inline">
        <input type="hidden" name="amount" value="5.00">
        <div class="formInner">
            <div class="payment-field">
                <input type="text" name="fname" placeholder="First Name" value="John" autofocus>
            </div>
            <div class="payment-field">
                <input type="text" name="lname" placeholder="Last Name" value="Smith">
            </div>
            <div class="separator"></div>
            <div id="payment-fields">
                <div class="payment-field" id="ccnumber"></div>
                <div class="payment-field" id="ccexp"></div>
                <div class="payment-field" id="cvv"></div>
            </div>
        </div>

        <button type="submit" id="payButton" class="btn btn-primary btn-block">
            Pay $5
        </button>
    </form>
    <div id="paymentTokenInfo"></div>
</body>

html {
    font-family: 'Abel';
}

.pageTitle {
    text-align: center;
    margin-top: 20px;
    font-size: 40px;
    font-family: "Domine" !important;
}

.form-group {
    width: 290px;
}

.formInner {
    font-family: 'Abel' !important;
    width: 500px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px auto;
}

#payButton {
    width: 290px;
    display: block;
    margin: 20px auto;
    height: 50px !important;
    font-size: 20px;
    background-color: #1CC48B;
    border-color: #1CC48B;
    box-shadow: 0 3px 10px #bbbbbb;
}

#payButton:hover {
    background-color: #19C687;
    border-color: #19C687;
    box-shadow: 0 3px 4px #bbbbbb;
}

#payButton:active {
    opacity: 0.7;
}

.checkboxLabel {
    margin: 0 0 0 7px;
}

.payment-field {
    border-radius: 2px;
    width: 48%;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px #dddddd;
    font-size: 16px;
    transition: 200ms;
}

.payment-field input:focus {
    border: 3px solid #1CC48B;
    outline: none !important;
}

.payment-field:hover {
    box-shadow: 0 2px 4px #dddddd;
}

.payment-field input {
    border: 3px solid #FFFFFF;
    width: 100%;
    border-radius: 2px;
    padding: 4px 8px;
}

#payment-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#ccnumber {
    width: 100%;
    font-size: 24px;
}

#ccexp,
#cvv {
    font-size: 20px;
}

#paymentTokenInfo {
    width: 600px;
    display: block;
    margin: 30px auto;
}

.separator {
    margin-top: 30px;
    width: 100%;
}

@media only screen and (max-width: 600px) {
    .pageTitle {
        font-size: 30px;
    }

    .theForm {
        width: 300px;
        max-width: 90%;
        margin: auto;
    }

    .form-group {
        width: 100%;
    }
}
                

document.addEventListener('DOMContentLoaded', function () {
  CollectJS.configure({
    'callback': function (response) {
      document.getElementById("paymentTokenInfo").innerHTML =
        '<b>Payment Token:</b> ' + response.token +
        '<br><b>Card:</b> ' + response.card.number +
        '<br><b>BIN/EIN:</b> ' + response.card.bin +
        '<br><b>Expiration:</b> ' + response.card.exp +
        '<br><b>Hash:</b> ' + response.card.hash +
        '<br><b>Card Type:</b> ' + response.card.type +
        '<br><b>Check Account Name:</b> ' + response.check.name +
        '<br><b>Check Account Number:</b> ' + response.check.account +
        '<br><b>Check Account Hash:</b> ' + response.check.hash +
        '<br><b>Check Routing Number:</b> ' + response.check.aba;
    },
    variant: 'inline',
    googleFont: 'Abel',
    invalidCss: {
      color: '#B40E3E'
    },
    validCss: {
      color: '#14855F'
    },
    customCss: {
      'border-color': '#FFFFFF',
      'border-style': 'solid'
    },
    focusCss: {
      'border-color': '#1CC48B',
      'border-style': 'solid',
      'border-width': '3px'
    },
    fields: {
      cvv: {
        placeholder: 'CVV'
      },
      ccnumber: {
          placeholder: 'Credit Card'
      },
      ccexp: {
          placeholder: 'MM / YY'
      }
    }
  });
});
            

Simple Lightbox Implementation

See the Simple Example for a basic web page using this implementation.

The simplest way to integrate is by pasting in the following script tag to your web page (preferably in the header) where you’ll be collecting payments:

                
<script src="https://secure.easypaydirectgateway.com/token/Collect.js" data-tokenization-key="your-token-key-here"></script>
                
            

With this script, you just need to add a button with the ID of "payButton" to your page inside a form where you ask for the customer’s information (name, address, email, etc.) You should make this button somewhere that indicates to the customer that they will be prompted to enter their card information and check out. Collect.js will find this button and display the below form in a lightbox over your website.

The customer will enter their card information and when they submit this mini-form, the lightbox will disappear, a hidden field will be inserted into your form with the "payment_token" value, and your form will be submitted.

You can then submit the transaction to the gateway with the Payment API using the "payment_token" variable.

Advanced Lightbox Implementation

See the advanced HTML example and advanced JavaScript example files for examples.

If you want to have a little more control over the default behavior, you can pass in additional data elements in the script tag. Here’s an example using all the available variables:

<script
        src="https://secure.easypaydirectgateway.com/token/Collect.js"
        data-tokenization-key="your-token-key-here"
        data-payment-selector=".customPayButton"
        data-primary-color="#ff288d"
        data-theme="bootstrap"
        data-secondary-color="#ffe200"
        data-button-text="Submit the Payment"
        data-instruction-text="Enter Card Information"
        data-payment-type="cc"
        data-field-cvv-display="hide"
        data-price="1.00"
        data-currency="USD"
        data-country="US"
        data-field-google-pay-shipping-address-required="true"
        data-field-google-pay-shipping-address-parameters-phone-number-required="true"
        data-field-google-pay-shipping-address-parameters-allowed-country-codes="US,CA"
        data-field-google-pay-billing-address-required="true"
        data-field-google-pay-billing-address-parameters-phone-number-required="true"
        data-field-google-pay-billing-address-parameters-format="MIN"
        data-field-google-pay-email-required="true"
        data-field-google-pay-button-type="buy"
        data-field-google-pay-button-locale="en"
        data-field-google-pay-button-color="default"
        data-field-apple-pay-shipping-type="delivery"
        data-field-apple-pay-shipping-methods='[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"},{"label":"Express Shipping","amount":"10.00","detail":"Arrives in 2-3 days","identifier":"expressShipping"}]'
        data-field-apple-pay-required-billing-contact-fields='["postalAddress","name"]'
        data-field-apple-pay-required-shipping-contact-fields='["postalAddress","name"]'
        data-field-apple-pay-contact-fields='["phone","email"]'
        data-field-apple-pay-contact-fields-mapped-to='shipping'
        data-field-apple-pay-line-items='[{"label":"Foobar","amount":"3.00"},{"label":"Arbitrary Line Item #2","amount":"1.00"}]'
        data-field-apple-pay-total-label='foobar'
        data-field-apple-pay-total-type='pending'
        data-field-apple-pay-type='buy'
        data-field-apple-pay-style-button-style='black'
        data-field-apple-pay-style-height='40px'
        data-field-apple-pay-style-border-radius='4px'
></script>
                

Configuration Variables

Variable	Format	Behavior
data-tokenization-key	String	Authenticates the request
data-payment-selector	String	Tells Collect.js what class or id value will trigger the lightbox Default: "#payButton"
data-primary-color	String	The HEX value for the color of the submit button in the lightbox Default: "#007BFF"
data-theme	String ("bootstrap" or "material")	The version of the payment form customers will see. All available themes will use the primary and secondary colors provided. Default: "bootstrap"
data-secondary-color	String	The HEX value for the color of the lightbox border Default: "#282828"
data-button-text	String	The text that will display on the submit button in the lightbox Default: "Submit Payment"
data-instruction-text	String	The text that will display above the payment fields. Custom text should be short so as not to overlap with other elements in the lightbox. Default: "Please enter payment info"
data-payment-type	String ("cc" or "ck")	Whether the lightbox shows credit card or check fields ("cc" for credit cards or "ck" for checks) Default: "cc"
data-field-cvv-display	String ("show", "hide", or "required")	Whether the CVV field is required ("required"), optional ("show"), or not displayed at all ("hide"). Also supported as data-field-cvv for legacy users. Default: "required"
data-field-google-pay-selector	String	A CSS selector for the Google Pay field. Default: "#googlepaybutton"
data-field-google-pay-shipping-address-required	String ("true" or "false")	Determines whether or not Google Pay should capture shipping address information. Shipping information captured this way becomes stored in the payment token. Default: "false"
data-field-google-pay-shipping-address-parameters-phone-number-required	String ("true" or "false")	Determines whether or not Google Pay should capture a phone number from the user’s shipping phone number. Phone numbers captured this way become stored in the payment token. Default: "false"
data-field-google-pay-shipping-address-parameters-allowed-country-codes	String (comma delimited list of 2 character country codes)	List of allowed countries. Credit cards from outside these countries will not be displayed as acceptable options within the Google Pay payment sheet. Omitting this value allows credit cards from any country. Default: undefined
data-field-google-pay-billing-address-required	String ("true" or "false")	Determines whether or not Google Pay should capture billing address information. Billing information captured this way becomes stored in the payment token. Default: "false"
data-field-google-pay-billing-address-parameters-phone-number-required	String ("true" or "false")	Determines whether or not Google Pay should capture a phone number from the user’s billing phone number. Phone numbers captured this way become stored in the payment token. Default: "false"
data-field-google-pay-billing-address-parameters-format	String ("MIN" or "FULL")	Determines which billing address fields to capture from the user. "MIN" provides "zip", "country", "first_name" and "last_name". "FULL" additionally provides "address1", "address2", "city", "state". Default: "MIN"
data-field-google-pay-email-required	String ("true" or "false")	Determines whether or not Google Pay should capture an email address. Email addresses captured this way becomes stored in the payment token. Default: "false"
data-field-google-pay-button-type	String ("short", "long", "book", "buy", "checkout", "donate", "order", "pay", "plain", "subscribe", "short" or "long")	Determines the text that appears on the Google Pay button. Default: "buy"
data-field-google-pay-button-locale	String ("en", "ar", "bg", "ca", "cs", "da", "de", "el", "es", "et", "fi", "fr", "hr", "id", "it", "ja", "ko", "ms", "nl", "no", "pl", "pt", "ru", "sk", "sl", "sr", "sv", "th", "tr", "uk", "zh)	The language that the button text appears in. Default: "en" (English)
data-field-google-pay-button-color	String ("default", "black", "white")	The color to display the Google Pay button. "Default" allows Google to determine the color. Default: "default"
data-field-google-pay-total-price-status	String ("FINAL" or "ESTIMATED")	The status of the total price being used. "FINAL" should be used when the amount is not expected to change. "ESTIMATED" should be used when the amount might change based on upcoming factors such as sales tax based on billing address. Default: "FINAL"
data-field-apple-pay-selector	String (CSS Selector)	A CSS selector for the Apple Pay field. Default: "#applepaybutton"
data-field-apple-pay-shipping-type	String ("shipping", "delivery", "storePickup", or "servicePickup")	The way purchases will be sent to the customer. For transactions that do not need to be sent to a customer, omit data-field-apple-pay-required-shipping-contact-fields. Default: "shipping"
data-field-apple-pay-shipping-methods	String (JSON array of objects)	The shipping information that appears on the payment sheet. Example: '[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"}]' Default: "[]"
data-field-apple-pay-required-billing-contact-fields	String (JSON array of "name" or "postalAddress")	When "name" or "postalAddress" is provided, the payment sheet will collect a customer's name or address. These values will be included with the transaction's billing information. Example:'["name","postalAddress"]' Default: "[]"
data-field-apple-pay-required-shipping-contact-fields	String (JSON array of "name" or "postalAddress")	When "name" or "postalAddress" is provided, the payment sheet will collect a customer's name or address. These values will be included with the transaction's shipping information. Example:'["name","postalAddress"]' Default: "[]"
data-field-apple-pay-contact-fields	String (JSON array of "phone" or "email")	When "phone" or "email" is provided, the payment sheet will collect a customer's phone number or email address. Usage of this data is determined by the data-field-apple-pay-contact-fields-mapped-to value. Example: '["phone","email"]' Default: "[]"
data-field-apple-pay-contact-fields-mapped-to	String ("billing" or "shipping")	"billing" causes data collected via the data-field-apple-pay-contact-fields options to be included in a transactions "phone" and "email" values. "shipping" causes them to be included as "shipping_phone", "shipping_email". Default: "billing"
data-field-apple-pay-line-items	String (JSON array of objects)	Items that will appear in the Apple Pay payment sheet. Example: [{"label":"Foobar","amount":"3.00"}] Default: "[]"
data-field-apple-pay-total-label	String	Text that appears next to the final amount in the Apple Pay payment sheet. Default: "Total"
data-field-apple-pay-total-type	String ("pending" or "final")	A value that indicates whether the total is final or pending. When set to "pending" the customer will see "Amount Pending" on the ApplePay checkout form instead of a total amount. Default: "final"
data-field-apple-pay-type	String ("buy", "donate", "plain", "set-up", "book", "check-out", "subscribe", "add-money", "contribute", "order", "reload", "rent", "support", "tip", or "top-up")	The text that appears on an Apple Pay button. Some options are only supported by newer versions of iOS and macOS. Default: "buy"
data-field-apple-pay-style-button-style	String ("black", "white", or "white-outline")	The appearance of the Apple Pay button. Default: "black"
data-field-apple-pay-style-height	String	The height of the Apple Pay button. Default: "30px"
data-field-apple-pay-style-border-radius	String	The rounding of the corners on the Apple Pay button. Default: "4px"
data-price	String	The final cost that the user will be charged. Default: undefined Required if using Apple Pay
data-country	String	The country where the transaction is processed. Required if using Google Pay or Apple Pay
data-currency	String	The currency the transaction will use to process the transaction. Required if using Google Pay or Apple Pay

Collect.js Functions

Function Name	Parameters	Description
configure	Object	Call this when you’d like to reconfigure Collect.js. Collect.js will try to run this automatically on page load, but you can run it manually to change the configuration at any time. This method optionally accepts an object with all configuration variables you’re using for Collect.js.
startPaymentRequest	Event	Call this to bring up the lightbox with the secure payment form for the customer to fill out. If you are using the "payButton" ID or custom payment selector, this will automatically be called when the customer clicks that element on the page. This method accepts an event object as an optional parameter and will call the provided callback function with a token response and the optional event.
closePaymentRequest		Call this to dismiss the lightbox. This replicates the behavior of the user clicking the "close" button inside the lightbox. No card or checking information will be saved.

You may also choose to configure Collect.js directly in your JavaScript, in which case you can do all of the above, and also implement a callback function that will execute when the customer submits the lightbox form. The payment token value will be returned in a "response" variable that you can do whatever you’d like with.

{
	tokenType:"lightbox",
	token:"3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: "411111******1111",
		bin: "411111",
        exp: "1028",
        hash: "abcdefghijklmnopqrstuv1234567890",
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: null,
		cardNetwork: null,
		email: null,
		billingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null

		},
		shippingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null
		}

	}
}
                    

This implementation method allows for additional changes to the look and feel to better match your website's UI

Expert Lightbox Implementation

                
CollectJS.startPaymentRequest(event)
                
            

{
	tokenType:"lightbox",
	token:"3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: "411111******1111",
		bin: "411111",
        exp: "1028",
        hash: "abcdefghijklmnopqrstuv1234567890",
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: null,
		cardNetwork: null,
		email: null,
		billingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null

		},
		shippingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null
		}

	}
}
                    

                
CollectJS.closePaymentRequest()
                
            

Simple Integration Implementation

                
<script src="https://secure.easypaydirectgateway.com/token/Collect.js" data-tokenization-key="your-token-key-here" data-variant="inline"></script>
                
            

                
<form>
    <input type="text" id="first_name">
    <input type="text" id="last_name">
    <input type="text" id="address">
    <div id="ccnumber"></div>
    <div id="ccexp"></div>
    <div id="cvv"></div>
    <input type="submit" id="payButton">
</form>
                
            

                
security_key: 3456h45k6b4k56h54kj6h34kj6445hj4
type: sale
amount: 4.00
payment_token: 3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8
first_name: Jane
last_name: Doe
address: 123 Main St.
                
            

Advanced Implementation Method

                
<script
        src="https://secure.easypaydirectgateway.com/token/Collect.js"
        data-tokenization-key="your-token-key-here"
        data-variant="inline"
        data-payment-selector="#demoPayButton"
        data-style-sniffer="false"
        data-google-font="Montserrat:400"
        data-validation-callback = "(function (field, valid, message) {console.log(field + ': ' + valid + ' -- ' + message)})"
        data-custom-css='{
            "background-color": "#a0a0ff",
            "color": "#0000ff"
        }'
        data-invalid-css='{
            "background-color":"red",
            "color":"white"
        }'
        data-valid-css='{
            "background-color":"#d0ffd0",
            "color":"black"
        }'
        data-placeholder-css='{
            "background-color":"#687C8D",
            "color":"green"
        }'
        data-focus-css='{
            "background-color":"#202020",
            "color":"yellow"
        }'
        data-timeout-duration = "10000"
        data-timeout-callback = "(function() {console.log('Timeout reached')})"
        data-fields-available-callback = "(function() {console.log('Collect.js has added fields to the form')})"
        data-field-ccnumber-selector = '#demoCcnumber'
        data-field-ccnumber-title = 'Card Number'
        data-field-ccnumber-placeholder = '0000 0000 0000 0000'
        data-field-ccexp-selector = '#demoCcexp'
        data-field-ccexp-title = 'Expiration Date'
        data-field-ccexp-placeholder = '00 / 00'
        data-field-cvv-display = 'required'
        data-field-cvv-selector = '#demoCvv'
        data-field-cvv-title = 'CVV Code'
        data-field-cvv-placeholder = '***'
        data-field-checkaccount-selector = '#demoCheckaccount'
        data-field-checkaccount-title = 'Account Number'
        data-field-checkaccount-placeholder = '000000000000'
        data-field-checkaba-selector = '#demoCheckaba'
        data-field-checkaba-title = 'Routing Number'
        data-field-checkaba-placeholder = '000000000'
        data-field-checkname-selector = '#demoCheckname'
        data-field-checkname-title = 'Account Name'
        data-field-checkname-placeholder = 'Customer Name'
        data-price="1.00"
        data-currency="USD"
        data-country="US"
        data-field-google-pay-shipping-address-required="true"
        data-field-google-pay-shipping-address-parameters-phone-number-required="true"
        data-field-google-pay-shipping-address-parameters-allowed-country-codes="US,CA"
        data-field-google-pay-billing-address-required="true"
        data-field-google-pay-billing-address-parameters-phone-number-required="true"
        data-field-google-pay-billing-address-parameters-format="MIN"
        data-field-google-pay-email-required="true"
        data-field-google-pay-button-type="buy"
        data-field-google-pay-button-locale="en"
        data-field-google-pay-button-color="default"
        data-field-apple-pay-shipping-type="delivery"
        data-field-apple-pay-shipping-methods='[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"},{"label":"Express Shipping","amount":"10.00","detail":"Arrives in 2-3 days","identifier":"expressShipping"}]'
        data-field-apple-pay-required-billing-contact-fields='["postalAddress","name"]'
        data-field-apple-pay-required-shipping-contact-fields='["postalAddress","name"]'
        data-field-apple-pay-contact-fields='["phone","email"]'
        data-field-apple-pay-contact-fields-mapped-to='shipping'
        data-field-apple-pay-line-items='[{"label":"Foobar","amount":"3.00"},{"label":"Arbitrary Line Item #2","amount":"1.00"}]'
        data-field-apple-pay-total-label='foobar'
        data-field-apple-pay-total-type='pending'
        data-field-apple-pay-type='buy'
        data-field-apple-pay-style-button-style='black'
        data-field-apple-pay-style-height='40px'
        data-field-apple-pay-style-border-radius='4px'
></script>
                
            

{
	tokenType: "inline",
	token:"3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: "411111******1111",
		bin: "411111",
        exp: "1028",
        hash: "abcdefghijklmnopqrstuv1234567890",
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: null,
		cardNetwork: null,
		email: null,
		billingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null

		},
		shippingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null
		}

	}
}
                    

Expert Inline Implementation

                
CollectJS.startPaymentRequest(event)
                
            

{
	tokenType: "inline",
	token:"3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: "411111******1111",
		bin: "411111",
        exp: "1028",
        hash: "abcdefghijklmnopqrstuv1234567890",
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: null,
		cardNetwork: null,
		email: null,
		billingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null

		},
		shippingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null
		}

	}
}
                    

                

<script
        src="https://secure.easypaydirectgateway.com/token/Collect.js"
        data-tokenization-key="your-token-key-here"
        data-validation-callback="(
            function(fieldName, valid, message) {
                if (valid) {
                     ... store the fact that fieldName is valid ...
                } else {
                     ... remove fieldName from the valid list, maybe display message to the user ...
                }
            }
        )">
                
            

                
validCardNumber = document.querySelector("#ccnumber .CollectJSValid") !== null;
validExpiration = document.querySelector("#ccexp .CollectJSValid") !== null;
validCvv = document.querySelector("#cvv .CollectJSValid") !== null;
invalidCvv = document.querySelector("#cvv .CollectJSInvalid") !== null;
blankOrUnsavedCvv = !validCvv && !invalidCvv;
                
            

                
<script
        src="https://secure.easypaydirectgateway.com/token/Collect.js"
        data-tokenization-key="your-token-key-here"
        data-variant="inline"
        data-fields-available-callback='
                (function() {
                    var frames = document.querySelectorAll(".input-field iframe.CollectJSInlineIframe")
                    for (var i = 0; i < frames.length; i++) {
                        frames[i].addEventListener("focus", function (event) {
                            var panel = event.target.parentNode.parentNode;
                            panel.querySelector("label").classList.add("active");
                        });
                        frames[i].addEventListener("blur", function (event) {
                            var panel = event.target.parentNode.parentNode;
                            if(event.detail && event.detail.empty) {
                                panel.querySelector("label").classList.remove("active");
                            }
                        });
                    }
                });'
></script>

<style>
    label {
        color: gray;
    }
    label.active {
        color: blue;
        font-weight: bold;
    }
</style>

<div class="input-field">
    <label for="ccnumber">Card Number</label>
    <div id="ccnumber"></div>
</div>
<div class="input-field">
    <label for="ccexp">Expiration Date</label>
    <div id="ccexp"></div>
</div>
<div class="input-field">
    <label for="cvv">CVV</label>
    <div id="cvv"></div>
</div>
                
            

Google Pay

Google Pay allows customers to provide credit card data saved in their Google accounts to be used in online payments. Collect.js supports Google Pay in both lightbox and inline integrations allowing you to capture these credit card details in either flow. And to make the integration as seamless as possible, the Google Pay data will be returned to you in the "payment_token" variable, so no matter what payment method your customers make, your transaction request can be exactly the same.

To use Google Pay, you must provide Collect.js country and currency values. These values are used to ensure the user can only select a valid card. You must also provide an HTML element on your page that Collect.js can use to draw the Google Pay button.

Google Pay is currently supported on TSYS - EMV and Elavon viaConex.

                <html>
    <head>
        <script
            src="https://secure.easypaydirectgateway.com/token/Collect.js"
            data-tokenization-key="000000-000000-000000-000000"
            data-variant="inline"
            data-country="US"
            data-price="1.00"
            data-currency="USD"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div id="googlepaybutton"></div>
        </form>
    </body>
</html>
        

This will create a Google Pay button that will be inserted in the div as an iframe. The Google Pay button will be 240x70px, so make sure to leave room in this div for the button to display in full. When a user clicks the button, they are presented with a payment sheet requesting the user’s payment details. After the user submits the payment sheet, Collect.js executes the callback function if one were provided, or submits your form with the payment token attached.

Capture Billing and Shipping Data

Collect.js also allows you to capture the user’s shipping and billing details with Google Pay, just like the credit card data. This eliminates the need for you to capture this manually in your own web form. When these options are enabled, Google Pay will also request the user’s information and Collect.js will store all that data in the payment token.

In addition to the payment data that gets stored for all Google Pay transactions, the payment token will include the following shipping fields when shipping address required is enabled:

• shipping_address_1
• shipping_address_2
• shipping_zip
• shipping_city
• shipping_state
• shipping_country
• shipping_firstname
• shipping_lastname
• phone (also requires phone_number_required to be enabled)

When billing_address_required is enabled, Collect.js will also capture these fields:

• address1 (also requires format to be "FULL")
• address2 (also requires format to be "FULL")
• zip
• city (also requires format to be "FULL")
• state (also requires format to be "FULL")
• country
• firstname
• lastname
• phone (also requires phone_number_required to be enabled)

                <html>
    <head>
        <script
            src="https://secure.easypaydirectgateway.com/token/Collect.js"
            data-tokenization-key="000000-000000-000000-000000"
            data-variant="inline"
            data-field-google-pay-selector=".google-pay-button"
            data-field-google-pay-shipping-address-required="true"
            data-field-google-pay-shipping-address-parameters-phone-number-required="true"
            data-field-google-pay-shipping-address-parameters-allowed-country-codes="US,CA"
            data-field-google-pay-billing-address-required="true"
            data-field-google-pay-billing-address-parameters-phone-number-required="true"
            data-field-google-pay-billing-address-parameters-format="MIN"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div class="google-pay-button"></div>
        </form>
    </body>
</html>
        

            
{
	tokenType: "googlePay",
	token: "3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: null,
		bin: null,
        exp: null,
        hash: null,
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: "1234",
		cardNetwork: "visa",
		email: "email@example.com",
		billingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"

		},
		shippingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"
		}

	}
}
            
        

Apple Pay

Apple Pay allows merchants to accept payments from their customers with little friction and high conversion rates. For most customers using Apple devices, it’s the preferred payment method when shopping online.

Using Collect.js, merchants can add Apple Pay into their websites with ease. Whether using the Lightbox or Inline integration methods, Apple Pay can be added in no time at all. And to make the integration as seamless as possible, the Apple Pay data will be returned to you in the "payment_token" variable, so no matter what payment method your customers make, your transaction request can be exactly the same.

Apple Pay supports Global Payments East - EMV, First Data Nashville, Chase Paymentech Salem, Chase Paymentech Tampa, EPX, Vantiv Now Worldpay eCommerce - Host Capture (Litle & Co), Global Payments Canada, First Data Nashville North, Vantiv Now Worldpay Core - Terminal Capture, Paymentech Salem Dev, Vantiv Now Worldpay eCommerce - Terminal Capture (Litle & Co.), First Data Nashville North V2, FACe - Vantiv Pre-Live, FACe - Vantiv, First Data Compass, TSYS - EMV, FACe - Vantiv (Next Day Funding), Elavon viaConex, Elavon EISOP UK/EU - EMV, American Express Direct UK/EU - EMV, Credorax ePower EU - EMV, Worldpay APACS UK/EU - EMV, First Data APACS UK/EU - EMV, Lloyds Cardnet APACS UK/EU - EMV, Barclaycard HISO UK/EU - EMV, AIBMS APACS UK/EU - EMV, Global Payments APACS UK/EU - EMV, Checkout.com Unified Payments, eMerchantPay Genesis and NMI Payments processors configured for e-commerce.

To use Apple Pay, you must provide Collect.js price, country, and currency values. These values are used to ensure the user can only select a valid card. You must also provide an HTML element on your page that Collect.js can use to draw the Apple Pay button.

                <html>
    <head>
        <script
            src="https://secure.easypaydirectgateway.com/token/Collect.js"
            data-tokenization-key="000000-000000-000000-000000"
            data-variant="inline"
            data-country="US"
            data-price="1.00"
            data-currency="USD"
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div id="applepaybutton"></div>
        </form>
    </body>
</html>
        

This will create an Apple Pay button that will be inserted in the div. When a user clicks the button, they are presented with a payment sheet requesting the user’s payment details. After the user submits the payment sheet, Collect.js executes the callback function if one were provided, or submits your form with the payment token attached.

Uploading the Domain Verification File

Apple requires merchants to upload the gateway’s Domain Verification File to your server to use Apple Pay. You can download the file and add your website to the “Allowed Domains” on your account from the merchant control panel’s Apple Pay settings page. In short, you need to:

1. Download the verification file
2. Upload the verification file to the .well-known directory on your web server
3. Add your domain to the list of domains allowed to use Apple Pay

Once these steps are complete, Apple Pay will be able to work with Collect.js.

Capture Billing and Shipping Data

Collect.js also allows you to capture the user’s shipping and billing details with Apple Pay, just like the credit card data. This eliminates the need for you to capture this manually in your own web form. When these options are enabled, Apple Pay will also request the user’s information and Collect.js will store all that data in the payment token.

Please note that Apple Pay tokens are one-time use tokens and should not be saved to the Customer Vault. They will not be able to be charged again. We currently suggest not using Apple Pay in checkout flows where you are also saving customers to the Vault.

When data-field-apple-pay-required-billing-contact-fields includes "postalAddress", the following data is included in the payment token:

• address1
• address2
• state
• country
• city
• zip

When data-field-apple-pay-required-billing-contact-fields includes "name", the following data is included in the payment token:

• first_name
• last_name

When data-field-apple-pay-required-shipping-contact-fields includes "postalAddress", the following data is included in the payment token:

• shipping_address_1
• shipping_address_2
• shipping_state
• shipping_country
• shipping_city
• shipping_zip

When data-field-apple-pay-required-shipping-contact-fields includes "postalAddress", the following data is included in the payment token:

• shipping_firstname
• shipping_lastname

When data-field-apple-pay-contact-fields includes "phone" and data-field-apple-pay-contact-fields-mapped-to is "billing", the following data is included in the payment token:

• phone

When data-field-apple-pay-contact-fields includes "phone" and data-field-apple-pay-contact-fields-mapped-to is "shipping", the following data is included in the payment token:

• shipping_phone

When data-field-apple-pay-contact-fields includes "email" and data-field-apple-pay-contact-fields-mapped-to is "billing", the following data is included in the payment token:

• email

When data-field-apple-pay-contact-fields includes "email" and data-field-apple-pay-contact-fields-mapped-to is "shipping", the following data is included in the payment token:

• shipping_email

Below is an example of an Apple Pay integration in Collect.js with all available configuration options:

                <html>
    <head>
        <script
            src="https://secure.easypaydirectgateway.com/token/Collect.js"
            data-tokenization-key='000000-000000-000000-000000'
            data-variant='inline'
            data-field-apple-pay-selector='.apple-pay-button'
            data-field-apple-pay-shipping-type='delivery'
            data-field-apple-pay-shipping-methods='[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"},{"label":"Express Shipping","amount":"10.00","detail":"Arrives in 2-3 days","identifier":"expressShipping"}]'
            data-field-apple-pay-required-billing-contact-fields='["postalAddress","name"]'
            data-field-apple-pay-required-shipping-contact-fields='["postalAddress","name"]'
            data-field-apple-pay-contact-fields='["phone","email"]'
            data-field-apple-pay-contact-fields-mapped-to='shipping'
            data-field-apple-pay-line-items='[{"label":"Foobar","amount":"3.00"},{"label":"Arbitrary Line Item #2","amount":"1.00"}]'
            data-field-apple-pay-total-label='Total'
            data-field-apple-pay-type='buy'
            data-field-apple-pay-style-button-style='white-outline'
            data-field-apple-pay-style-height='30px'
            data-field-apple-pay-style-border-radius='4px'
        ></script>
    </head>
    <body>
        <form action="submit_to_direct_post_api.php" method="post">
            <div class="apple-pay-button"></div>
        </form>
    </body>
</html>
        

            
{
	tokenType: "applePay",
	token: "3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: null,
		bin: null,
        exp: null,
        hash: null,
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null
	},
	wallet: {
		cardDetails: "1234",
		cardNetwork: "visa",
		email: "email@example.com",
		billingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"

		},
		shippingInfo: {
			address1: "123 Happy Ln",
			address2: "APT 1",
			firstName: "Jane",
			lastName: "Doe",
			postalCode: "12345",
			city: "Cooltown",
			state: "AZ",
			country: "US",
			phone: "1234567890"
		}

	}
}
            
        

Getting Started

Gateway.js is a JavaScript library that allows merchants to highly customize their integration with the gateway's services. To start using Gateway.js, you need to load the library with a <script> tag.

Including this script will expose the Gateway class that can be used to initialize access to other services.

Next, you will need to create a public key from the merchant portal. On the Security Keys page you will need to click “Add a New Public Key”. The new key should have the Checkout permission attached to it.

Provide the created key to Gateway.create to initialize the library.

Services

• 3-D Secure
• Kount

3-D Secure

3-D Secure can help you avoid fraudulent transactions by authenticating transactions before submitting them to the gateway for processing. When a credit card enrolled in 3-D Secure is submitted it will ensure that the customer is the owner of the credit card. Their bank will first collect a fingerprint of their device. On some occasions, this fingerprint is sufficient and the customer is immediately authenticated. This flow is often called "frictionless" because it does not require additional inputs from the user and does not interrupt the customer's checkout flow. On other occasions, the bank will issue a challenge to the customer requiring them to submit a password or other information to validate themselves. This flow is often called "step up authentication".

3-D Secure Variables

When a customer successfully authenticates a transaction, the library may provide you the following, which you should submit to the payment API:

* cardholder_info should not be passed into the API and should be displayed to the customer if a value is present.

Handling in Gateway.js

<html>
    <body>
    <script src="https://secure.easypaydirectgateway.com/js/v1/Gateway.js"></script>
    <script>
        // Initialize Gateway.js
        const gateway = Gateway.create('collect_checkout_0000000000000000000000');

        // Initialize the ThreeDSService
        const threeDS = gateway.get3DSecure();

        // Create a 3DS Frame
        // This will start out 0px x 0px during fingerprinting.
        // If the customer is prompted to complete a challenge, it will resize automatically.
        const options = {
            cardNumber: "4111111111111111",
            cardExpMonth: "01",
            cardExpYear: "2024",
            currency: 'USD',
            amount: '10.00',
            email: 'none@example.com',
            phone: '8008675309',
            city: 'New York',
            state: 'NY',
            address1: '123 First St.',
            country: 'US',
            firstName: 'Jane',
            lastName: 'Doe',
            postalCode: '60001'
        };

        const threeDSecureInterface  = threeDS.createUI(options);

        // Mount the threeDSecureInterface to the DOM
        // This begins the collection of 3DS data.
        threeDSecureInterface.start('body');

        // Listen for the threeDSecureInterface to ask the user for a password
        threeDSecureInterface.on('challenge', function(e) {
            console.log('Challenged');
        });

        // Listen for the threeDSecureInterface to provide all the needed 3DS data
        threeDSecureInterface.on('complete', function(e) {
            fetch('direct-post-back-end.php', {
                method: 'POST',
                body: JSON.stringify({
                    ...options,
                    cavv: e.cavv,
                    xid: e.xid,
                    eci: e.eci,
                    cardHolderAuth: e.cardHolderAuth,
                    threeDsVersion: e.threeDsVersion,
                    directoryServerId: e.directoryServerId,
                    cardHolderInfo: e.cardHolderInfo,
                })
            })
        });

        // Listen for the threeDSecureInterface to indicate that the customer
        // has failed to authenticate
        threeDSecureInterface.on('failure', function(e) {
            console.log('failure');
            console.log(e);
        });

        // Listen for any errors that might occur.
        gateway.on('error', function (e) {
            console.error(e);
        })
    </script>
    </body>
</html>

<?php
$jsonContent = json_decode(file_get_contents('php://input'));

$fields = array(
    'security_key' => '01234567890123456789012345678901',
    'ccnumber' => $jsonContent->cardNumber,
    'ccexp' => $jsonContent->cardExpMonth . substr($jsonContent->cardExpYear, -2),
    'amount' => '10.00',
    'email' => $jsonContent->email,
    'phone' => $jsonContent->phone,
    'city' => $jsonContent->city,
    'address1' => $jsonContent->address1,
    'country' => $jsonContent->country,
    'first_name' => $jsonContent->firstName,
    'last_name' => $jsonContent->lastName,
    'zip' => $jsonContent->postalCode,
    'cavv' => $jsonContent->cavv,
    'xid' => $jsonContent->xid,
    'eci' => $jsonContent->eci,
    'cardholder_auth' => $jsonContent->cardHolderAuth,
    'three_ds_version' => $jsonContent->threeDsVersion,
    'directory_server_id' => $jsonContent->directoryServerId,
    'cardholder_info' => $jsonContent->cardHolderInfo
);

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => 'https://secure.easypaydirectgateway.com/api/transact.php',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => '',
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS => $fields
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

1. You will start by initializing Gateway.js with your public key. You can view your existing public keys or create a new one in the merchant portal's Security Keys.
2. Initialize the ThreeDSService by calling gateway.getThreeDSService().
3. Next you will create an interface object with the details of the transaction. The details should include cardNumber, cardExpMonth, cardExpYear, currency, amount, email, city, address1, country, firstName, lastName, and postalCode. The created interface will emit events that your application can subscribe to in order to respond to various results from processing.
4. Mount the interface to the DOM by providing a selector. The frame will be mounted inside the provided element. This starts the authentication process.
JavaScript frameworks such as React, Vue, or Angular may control the DOM in such a way that would cause the frame to become detached from the DOM. You may need to prevent them from managing the mount point in order to ensure that a mounted interface remains on the page.
5. Attach callbacks to listen for when the customer finishes authenticating themselves.
6. Implement a callback for the complete event that sends the 3DS data to your backend.
7. Submit the 3DS data via the payment API with your private key.

<html>
<body>
    <label>Credit Card Number</label>
    <div id="ccnumber"></div>
    <label>CC EXP</label>
    <div id="ccexp"></div>
    <label>CVV</label>
    <div id="cvv"></div>
    <button id="payButton">Pay Now</button>

    <div id="threeDSMountPoint"></div>
    <script src="https://secure.easypaydirectgateway.com/js/v1/Gateway.js"></script>
    <script
       src="https://secure.easypaydirectgateway.com/token/Collect.js"
       data-tokenization-key="000000-111111-222222-333333"
    ></script>
    <script>
        const gateway = Gateway.create('checkout_public_00000000000000000000000000000000');
        const threeDS = gateway.get3DSecure();

        window.addEventListener('DOMContentLoaded', () => {
           CollectJS.configure({
               variant: 'inline',
               callback: (e) => {
                   const options = {
                       paymentToken: e.token,
                       currency: 'USD',
                       amount: '1000',
                       email: 'none@example.com',
                       phone: '8008675309',
                       city: 'New York',
                       state: 'NY',
                       address1: '123 Fist St.',
                       country: 'US',
                       firstName: 'John',
                       lastName: 'Doe',
                       postalCode: '60001'
                   };

                   const threeDSecureInterface = threeDS.createUI(options);
                   threeDSecureInterface.start('#threeDSMountPoint');

                   threeDSecureInterface.on('challenge', function(e) {
                       console.log('Challenged');
                   });

                   threeDSecureInterface.on('complete', function(e) {
                       console.log(e);
                       fetch('direct-post-back-end.php', {
                           method: 'POST',
                           body: JSON.stringify({
                               ...options,
                               cavv: e.cavv,
                               xid: e.xid,
                               eci: e.eci,
                               cardHolderAuth: e.cardHolderAuth,
                               threeDsVersion: e.threeDsVersion,
                               directoryServerId: e.directoryServerId,
                               cardHolderInfo: e.cardHolderInfo,
                           })
                       })
                   });

                   threeDSecureInterface.on('failure', function(e) {
                       console.log('failure');
                       console.log(e);
                   });
               }
           })

           gateway.on('error', function (e) {
               console.error(e);
           })
        })
    </script>
</body>
</html>

<?php
$jsonContent = json_decode(file_get_contents('php://input'));

$fields = array(
    'security_key' => '01234567890123456789012345678901',
    'payment_token' => $jsonContent->paymentToken,
    'amount' => '10.00',
    'email' => $jsonContent->email,
    'phone' => $jsonContent->phone,
    'city' => $jsonContent->city,
    'address1' => $jsonContent->address1,
    'country' => $jsonContent->country,
    'first_name' => $jsonContent->firstName,
    'last_name' => $jsonContent->lastName,
    'zip' => $jsonContent->postalCode,
    'cavv' => $jsonContent->cavv,
    'xid' => $jsonContent->xid,
    'eci' => $jsonContent->eci,
    'cardholder_auth' => $jsonContent->cardHolderAuth,
    'three_ds_version' => $jsonContent->threeDsVersion,
    'directory_server_id' => $jsonContent->directoryServerId
    'cardholder_info' => $jsonContent->cardHolderInfo,
);

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => 'https://secure.easypaydirectgateway.com/api/transact.php',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => '',
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS => $fields
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

1. You will start by initializing Gateway.js with your public key. You can view your existing public keys or create a new one in the merchant portal's Security Keys page.
2. Initialize the ThreeDSService by calling gateway.getThreeDSService().
3. Render a Collect.js form to collect the credit card information. You should Collect.js's configure() method to supply a callback. The callback will create the 3DS interface and provide the Collect.js payment token in place of the credit card details.
4. Next you will create an interface object with the details of the transaction. The details should include paymentToken, currency, amount, email, city, address1, country, firstName, lastName, and postalCode. The created interface will emit events that your application can subscribe to in order to respond to various results from processing.
5. Mount the interface to the DOM by providing a selector. The frame will be mounted inside the provided element. This starts the authentication process.
JavaScript frameworks such as React, Vue, or Angular may control the DOM in such a way that would cause the frame to become detached from the DOM. You may need to prevent them from managing the mount point in order to ensure that a mounted interface remains on the page.
6. Attach callbacks to listen for when the customer finishes authenticating themselves.
7. Implement a callback for the complete event that sends the 3DS data to your backend.
8. Submit the 3DS data via the payment API with your private key.

<html>
<body>
<script src="https://secure.easypaydirectgateway.com/js/v1/Gateway.js"></script>
<script>
   const gateway = Gateway.create('collect_checkout_0000000000000000000');
   const threeDS = gateway.get3DSecure();

   const options = {
       customerVaultId: "myCustomerVaultToken",
       currency: 'USD',
       amount: '1000'
   };

   const threeDSsecureInterface = threeDS.createUI(options);
   threeDSsecureInterface.start('body');

   threeDSsecureInterface.on('challenge', function(e) {
       console.log('Challenged');
   });

   threeDSsecureInterface.on('complete', function(e) {
       fetch('direct-post-back-end.php', {
           method: 'POST',
           body: JSON.stringify({
               ...options,
               cavv: e.cavv,
               xid: e.xid,
               eci: e.eci,
               cardHolderAuth: e.cardHolderAuth,
               threeDsVersion: e.threeDsVersion,
               directoryServerId: e.directoryServerId,
               cardHolderInfo: e.cardHolderInfo,
           })
       })
           .then(e => {

           })
   });

   threeDSsecureInterface.on('failure', function(e) {
       console.log('failure');
       console.log(e);
   });

   gateway.on('error', function (e) {
       console.error(e);
   })
</script>
</body>
</html>

<?php

$jsonContent = json_decode(file_get_contents('php://input'));

$fields = array(
   'security_key' => '01234567890123456789012345678901',
   'customer_vault_id' => $jsonContent->customerVaultId,
   'amount' => '10.00',
   'cavv' => $jsonContent->cavv,
   'xid' => $jsonContent->xid,
   'eci' => $jsonContent->eci,
   'cardholder_auth' => $jsonContent->cardHolderAuth,
   'three_ds_version' => $jsonContent->threeDsVersion,
   'directory_server_id' => $jsonContent->directoryServerId
   'cardholder_info' => $jsonContent->cardHolderInfo,
);

$curl = curl_init();

curl_setopt_array($curl, array(
   CURLOPT_URL => 'https://secure.easypaydirectgateway.com/api/transact.php',
   CURLOPT_RETURNTRANSFER => true,
   CURLOPT_ENCODING => '',
   CURLOPT_MAXREDIRS => 10,
   CURLOPT_TIMEOUT => 0,
   CURLOPT_FOLLOWLOCATION => true,
   CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
   CURLOPT_CUSTOMREQUEST => 'POST',
   CURLOPT_POSTFIELDS => $fields
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

1. You will start by initializing Gateway.js with your public key. You can view your existing public keys or create a new one in the merchant portal's Security Keys page.
2. Initialize the ThreeDSService by calling gateway.getThreeDSService().
3. Next you will create a interface object with the details of the transaction. The details should customerVaultToken, currency, amount. The created interface will emit events that your application can subscribe to in order to respond to various results from processing.
4. Mount the interface to the DOM by providing a selector. The frame will be mounted inside the provided element. This starts the authentication process.
JavaScript frameworks such as React, Vue, or Angular may control the DOM in such a way that would cause the frame to become detached from the DOM. You may need to prevent them from managing the mount point in order to ensure that a mounted interface remains on the page.
5. Attach callbacks to listen for when the customer finishes authenticating themselves.
6. Implement a callback for the complete event that sends the 3DS data to your backend.
7. Submit the 3DS data via the payment API with your private key.

Kount

Kount can identify and block fraudulent transactions by analyzing many different data points before the transaction is submitted for processing. The Kount Data Collector is a critical part of the analysis and we've made it simple to implement in your own checkout pages when using our Payment API, or Collect.js. The Kount Device Data Collector is designed to run in the background while a webpage loads in a client browser and gather data on the consumer as they check out through your ecommerce website.

Kount variables

When a customer is on a payment page, the Kount library will provide the following, which you must submit to the payment API in order for Kount to function properly:

1. You will start by initializing Gateway.js with your public key. You can view your existing public keys or create a new one in the merchant portal's Security Keys page.
2. Initialize the Kount service by calling gateway.getKount().
3. Run the Kount data collector by calling Kount's createSession() and retrieve the session ID using .then() .
4. Render a Collect.js form to collect the credit card information. You should call Collect.js's configure() method to supply a callback. The callback will provide the Collect.js payment token in place of the credit card details.
5. In the callback, create a Javascript object with the details of the transaction. The details should include payment_token, currency, amount, email, city, address1, country, zip, first_name, last_name, and transaction_session_id.
6. Submit the transaction data via the payment API with your private key.

<html>
<body>
    <label>Credit Card Number</label>
    <div id="ccnumber"></div>
    <label>CC EXP</label>
    <div id="ccexp"></div>
    <label>CVV</label>
    <div id="cvv"></div>
    <button id="payButton">Pay Now</button>
    <script src="https://secure.easypaydirectgateway.com/js/v1/Gateway.js"></script>
    <script
       src="https://secure.easypaydirectgateway.com/token/Collect.js"
       data-tokenization-key="000000-111111-222222-333333"
    ></script>
    <script>
        // Initialize Gateway.js, use own Public Key
        const gateway = Gateway.create('collect_checkout_0000000000000000000000000');

        // Initialize the Kount service
        const kount = gateway.getKount();

        // Run Kount
        kount.createSession().then((res) => {

            //Store session id
            const sessionId = res;

            //Run CollectJS Configure
            CollectJS.configure({
                variant: 'inline',
                callback: (e) => {
                    const options = {
                        paymentToken: e.token,
                        currency: 'USD',
                        amount: '1000',
                        email: 'none@example.com',
                        phone: '8008675309',
                        city: 'New York',
                        state: 'NY',
                        address1: '123 First St.',
                        country: 'US',
                        firstName: 'John',
                        lastName: 'Doe',
                        postalCode: '60001',
                        transactionSessionId: sessionId
                    };

                    fetch('direct-post-back-end.php', {
                        method: 'POST',
                        body: JSON.stringify({
                            ...options,
                        })
                    });
                }
            });

            gateway.on('error', function (e) {
                console.error(e);
            });
        });
    </script>
</body>
</html>

<?php
$jsonContent = json_decode(file_get_contents('php://input'));

$fields = array(
    'security_key' => '01234567890123456789012345678901',
    'payment_token' => $jsonContent->paymentToken,
    'amount' => '10.00',
    'email' => $jsonContent->email,
    'phone' => $jsonContent->phone,
    'city' => $jsonContent->city,
    'address1' => $jsonContent->address1,
    'country' => $jsonContent->country,
    'first_name' => $jsonContent->firstName,
    'last_name' => $jsonContent->lastName,
    'zip' => $jsonContent->postalCode,
    'transaction_session_id' => $jsonContent->transactionSessionId
);

$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => 'https://secure.easypaydirectgateway.com/api/transact.php',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => '',
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS => $fields
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

1. You will start by initializing Gateway.js with your public key. You can view your existing public keys or create a new one in the merchant portal's Security Keys page.
2. Initialize the Kount service by calling gateway.getKount().
3. Run the Kount data collector by calling Kount's createSession() and retrieve the session ID using .then() .
4. Next, you will create a Javascript object with the details of the transaction. The details should include the credit card information, currency, amount, email, city, address1, country, zip, first_name, last_name, and transaction_session_id.
5. Submit the transaction data via the payment API with your private key.

<html>
    <body>
    <script src="https://secure.easypaydirectgateway.com/js/v1/Gateway.js"></script>
    <script>
        // Initialize Gateway.js, use own Public Key
        const gateway = Gateway.create('collect_checkout_0000000000000000000000000');

        // Initialize the Kount service
        const kount = gateway.getKount();

        // Run Kount
        kount.createSession().then((res) => {
            //Store session id
            const transactionSessionId = res;

            //Code goes here...
            console.log(transactionSessionId);

        });

        // Listen for any errors that might occur
        gateway.on('error', function (e) {
            console.error(e);
        });
    </script>
    </body>
</html>

Gateway#create(string publicKey): Gateway

Description

Initializes a Gateway object that can be used to initialize other services.

Parameters

publicKey A string generated from the merchant portal's Security Keys page. The publicKey should have the Checkout permission.

Side Effects

Example

const gateway = Gateway.create('collect_checkout_0000000000000000000000000')

Gateway.get3DSecure(): ThreeDSecure

Description

Initializes 3DSecure.

Parameters

None

Side Effects

Example

const gateway = Gateway.create('collect_checkout_0000000000000000000000000')
const threeDSecure = gateway.get3DSecure();

Gateway.getKount(): Kount

Description

Initializes Kount.

Parameters

None

Side Effects

Example

const gateway = Gateway.create('collect_checkout_0000000000000000000000000')
const kount = gateway.getKount();

Gateway.on(string eventName, func callback): undefined

Description

Attaches an event listener that is invoked when the given event occurs.

Parameters

event One of the following:

• error

Events:

Error

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
gateway.on('error', (e) => { console.error (e) })

/*
 *  {
 *     refId: '1234',
 *     message: '3DSecure is inactive on your account. Contact support
 *       to activate the payment gateway's 3DSecure service.',
 *     type: 'integrationError',
 *     error: new Error('3DSecure is inactive on your account. Contact
 *       support to activate the payment gateway's 3DSecure service.')
 *  }
 * /

ThreeDSecure.createUI(object options): ThreeDSecureUI

Description

Create a ThreeDSecureUI from the provided options.

Parameters

options object containing the following values:

Side Effects:

Raises an error if options are invalid.

Example:

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();

const threeDSecureUI = threeDsService.createUI({
    customerVaultToken: "myCustomerVaultToken",
    currency: 'USD',
    amount: '1000'
})

ThreeDSecure.on(string eventName, func callback): undefined

Description

Attaches an event listener that is invoked when the given event occurs.

Parameters

event One of the following:

• error

Events:

Error

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();

threeDsService.on('error', (e) => { console.error (e) })

/*
 *  {
 *     refId: '1234',
 *     message: 'Unknown options: invalidField',
 *     type: 'integrationError',
 *     error: new Error('Unknown options: invalidField')
 *  }
 * /

ThreeDSecureUI.start(string mountPointSelector): undefined

Description

Creates an HTML element that will fingerprint the cardholder's browser and - if required by the issuing bank - expand to display a challenge for the cardholder to complete. The HTML element will become a child of the element provided in the mount point.

Parameters

mountPointSelector A selector string that will identify a single element on the page.

Examples: "body", "#mountPoint", ".threeDSDiv"

Side Effects

Raises an error if more than one element matches the mountPointSelector or no elements match.

Raises an error if a ThreeDSecureUI has already started. The started ThreeDSecureUI must be unmounted before a new ThreeDSecureUI can be started or restarted.

Example:

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();
const threeDSecureUI = threeDsService.createUI({ ... })
threeDSecureUI.start('body');

ThreeDSecureUI.on(string eventName, func callback): undefined

Description

Attaches an event listener that is invoked when the given event occurs.

Parameters

event One of the following:

• failure
• challenge
• complete
• error

Events:

Failure

This event indicates that the cardholder could not be authenticated.

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();
const threeDSecureUI = threeDsService.createUI({ ... })
threeDSecureUI.on('failure', (e) => { console.log(e) })

/*
 *  {
 *     code: 'TRANSACTION_STATUS_N',
 *     message: 'Not Authenticated/Account Not Verified; Transaction denied',
 *  }
 * /

Challenge

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();
const threeDSecureUI = threeDsService.createUI({ ... })
threeDSecureUI.on('challenge', (e) => { console.log(e) })

/*
 *  {}
 * /

Complete

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();
const threeDSecureUI = threeDsService.createUI({ ... })
threeDSecureUI.on('complete', (e) => { console.error(e) })

/*
 * {
 *  xid: null,
 *  cavv: "Y2FyZGluYWxjb21tZXJjZWF1dGg=",
 *  eci: "05",
 *  cardHolderAuth: "verified",
 *  threeDsVersion: "2.2.0",
 *  directoryServerId: "3f6fb1f8-f719-46c9-905b-bab446f4de30"
  *  cardHolderInfo: null,
 * }
 * /

Error

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const threeDsService = gateway.get3DSecure();
const threeDSecureUI = threeDsService.createUI({ ... })
threeDSecureUI.on('error', (e) => { console.error(e) })

/*
 *  {
 *     refId: '1234',
 *     message: 'Invalid Formatted Message Invalid Formatted Message',
 *     type: 'gatewayError',
 *     error: new Error('Invalid Formatted Message Invalid Formatted Message')
 *  }
 * /

Kount.start(): string

Description

Creates a session ID and runs the Kount data collector.

Parameters

None

Side Effects

Raises an error if the session ID cannot be generated.

Example:

const gateway = Gateway.create('collect_checkout_0000000000000000000000000');
const kount = gateway.getKount();
const sessionId = await kount.createSession();

Testing

It is recommended to test your integration before going live. This can be accomplished by putting your account in Test Mode and providing these test cards to ThreeDSecure#createUI(). These test cases will not function when your account has test mode disabled.

Test Card 1: Successful Frictionless Flow

This test demonstrates that the issuing bank has authenticated the cardholder without needing to challenge them.

{
    xid: null,
    cavv: "Y2FyZGluYWxjb21tZXJjZWF1dGg=",
    eci: "05",
    cardHolderAuth: "verified",
    threeDsVersion: "2.2.0",
    directoryServerId: "3f6fb1f8-f719-46c9-905b-bab446f4de30"
    cardHolderInfo: null,
}

Test Card 2: Failed Frictionless

This test demonstrates that the issuing bank has failed to authenticate the cardholder without needing to challenge them. This does not indicate a technical problem.

{
    code: "TRANSACTION_STATUS_N",
    message: "Not Authenticated/Account Not Verified; Transaction denied"
}

Test Card 3: Attempted Frictionless Flow

This test demonstrates a cardholder that is enrolled in 3DSecure but the issuing bank does not support it.

{
    xid: null,
    cavv: "Y2FyZGluYWxjb21tZXJjZWF1dGg=",
    eci: "06",
    cardHolderAuth: "attempted",
    threeDsVersion: "2.2.0",
    directoryServerId: "3f6fb1f8-f719-46c9-905b-bab446f4de30"
    cardHolderInfo: null,
}

Test Card 4: Unavailable Authentication

This test demonstrates that authentication is unavailable for some technical reasons.

{
    code: "TRANSACTION_STATUS_U",
    message: "Authentication/Account Verification Could Not Be Performed; Technical or other problem"
}

Test Card 5: Rejected Authentication

This test demonstrates that the issuing bank has rejected authentication for the cardholder without needing to challenge them. This does not indicate a technical problem.

{
    code: "TRANSACTION_STATUS_R",
    message: "Authentication/ Account Verification Rejected; Issuer is rejecting authentication/verification"
}

Test Card 6: Unknown Error

This test demonstrates that an unknown error has occurred due to a technical error.

{
    refId: '1234',
    message: "Invalid Formatted Message Invalid Formatted Message",
    type: 'gatewayError',
    error: new Error("...")
}

Test Card 7: Timeout Error

This test demonstrates that an error has occurred due to a technical error.

{
    refId: '1234',
    message: "Transaction Timed Out",
    type: 'gatewayError',
    error: new Error("...")
}

Test Card 8: Successful Step Up

This test demonstrates that the issuing bank has decided to challenge the user and successfully authenticates the result.

{
    xid: null,
    cavv: "MTIzNDU2Nzg5MDEyMzQ1Njc4OTA=",
    eci: "05",
    cardHolderAuth: "verified",
    threeDsVersion: "2.2.0",
    directoryServerId: "19304dc2-58e0-497f-8508-f434c45a7a05"
    cardHolderInfo: null,
}

Test Card 9: Failed Step Up

This test demonstrates that the issuing bank has decided to challenge the user and fails to authenticate the cardholder.

{
    code: "TRANSACTION_STATUS_N",
    message: "Not Authenticated/Account Not Verified; Transaction denied"
}

Test Card 10: Unavailable Step Up

This test demonstrates that the issuing bank has decided to challenge the user and authentication is unavailable.

{
    code: "TRANSACTION_STATUS_U",
    message: "Authentication/Account Verification Could Not Be Performed; Technical or other problem"
}

Test Card 11: Error on Authentication

This test demonstrates that an unknown error occurred during authentication.

{
    refId: null,
    message: "A 3DS error occurred: Error Processing PARes",
    type: "gatewayError",
    error: Error("A 3DS error occurred: Error Processing PARes)"
}

Methodology
Three-Step

Detailed Explanation

To start step one, your payment application will submit a behind-the-scenes HTTPS direct POST that includes transaction variables, including an additional variable redirect-url, which is a URL that must exist on your web server that handles a future browser redirect. Sensitive payment information such as cc-number, cc-exp, and cvv cannot be submitted during step one. The Payment Gateway will generate and return the form-url variable containing a unique URL to be used in Step 2.

Next, during step two, you must develop an HTML form that collects at least the customer's sensitive payment information such as cc-number, cc-exp, and cvv. You must use the form-url obtained in step one as the action in the HTML of your payment form. When the customer submits the form, the customer's browser will transparently POST the contents of the payment form directly to the Payment Gateway. This methodology keeps your web server and payment application from seeing or transmitting any credit card data or other sensitive data. Once the Payment Gateway has collected the customer's sensitive payment details, the customer's browser will be instructed to return to the redirect-url on your web server. Furthermore, the Payment Gateway will generate and append a unique variable named token-id to the redirect-url in the GET query string. This token-id is an abstraction of the customer's sensitive payment information that the Payment Gateway collected. Your redirect-url script must parse the token-id for use in step three.

To complete the transaction, you will submit another behind-the-scenes HTTPS direct POST including only the token-id and api-key. This token-id is used to "tie" together the initial customer information with the sensitive payment information that the payment gateway collected directly.