Setup the Plugin

In order to set up the plugin, you’ll need to do two simple adjustments to your checkout page. First, you will need to link a script tag to the end of the <head> tag of your HTML, and then you should bind your checkout page inputs with data-paycertify attribute indicating which inputs are meant for which values.

In order for us to detect the specified fields on the checkout page, they must be associated with a data-paycertify attribute. Each product requires a different set of attributes to be defined. The inputs are referenced in each of the specific product set up sections below.

Linking our script to your page

Grab the following snippet and paste it to the last line before closing the <head> tag on your page.

<script async src="https://js.paycertify.com/paycertify.min.js?key=YOUR_PUBLISHABLE_KEY"></script>

Avalilable options

Key Attribute	Presence	Description	Type
`key`	Mandatory	The Publishable Key you would like to use.	hex, e.g.: `AAAA1AC7B73034AFF9975B4CE89D2BF471921CRU`
`syncfp`	Optional	Run the Fraud Tools synchronously. Only run Kount if 3D-Secure gives a negative veredict.	Boolean, default: `false`
`kountdc`	Optional	Disable the Kount data collector	Boolean, default: `false`
`tdsmode`	Optional	If tdsmode is set to `load`, 3DS will run during the page’s load time	options: `load`

After referencing the script on your checkout page, the next step is creating the proper bindings to your inputs.

Field data-attribute bindings

Now, in order to us detect which fields on your checkout page represent which parts of the data, we need you to flag them with a data-paycertify attribute, and it’s value reference a properly formated piece of data. Each product demands a different set of attributes to be defined, and these are pointed out in each one of the specific product setup sections below.

A sample, very minimalistic checkout page HTML could be represented through the following HTML:

<!doctype html>
<html>
  <head>
    <title>paycertify.js</title>
    <script async src="https://js.paycertify.com/paycertify.min.js?key=YOUR_PUBLISHABLE_KEY"></script>
  </head>
  <body>
    <h1> Checkout </h1>

    <form action="https://my.website.com/process-my-transaction" method="POST">
      <input type="hidden" data-paycertify="amount" value="1"/>

      <label>First Name</label><br/>
      <input type="text" data-paycertify="first-name"/><br/><br/>

      <label>Last Name</label><br/>
      <input type="text" data-paycertify="last-name"/><br/><br/>

      <label>Address</label><br/>
      <input type="text" data-paycertify="address-l1"/>
      <input type="text" data-paycertify="address-l2"/><br/><br/>

      <label>City</label><br/>
      <input type="text" data-paycertify="city"/><br/><br/>

      <label>State</label><br/>
      <input type="text" data-paycertify="state"/><br/><br/>

      <label>Country</label><br/>
      <input type="text" data-paycertify="country"/><br/><br/>

      <label>ZIP</label><br/>
      <input type="text" data-paycertify="zip"/><br/><br/>

      <label>Card Number</label><br/>
      <input type="text" data-paycertify="card-number"/><br/><br/>

      <label>Card Expiration</label><br/>
      <input type="text" data-paycertify="card-expiry-month"/>
      <input type="text" data-paycertify="card-expiry-year"/><br/><br/>

      <label>CVV</label><br/>
      <input type="text" data-paycertify="card-cvv"/><br/><br/>

      <input type="submit"/>
    </form>
  </body>
</html>

All the fields flagged as mandatory for the product that you have enabled must be sent with every request, otherwise this can lead to product usage with invalid data, which wouldn’t allow you to get the benefits from using the plugin, or even worse: declining every single transaction you try. Make sure to test your integration throughouly before going live.

Form Submission

Whenever the checkout form is submitted we bind input[type=submit] and button click events to preventDefault, and run all fraud checks required on the client-side, the browser, and also process the transaction automaticallly so you never touch sensitive data such as credit cards. On your form action’s backend, all you get are the responses, so the backend work is only parsing the response and handling your own application’s flow.

PS: If you are using a SPA front-end, you will have to trigger the form submission yourself through something similar to the snippet below:

<form class="form-horizontal" action="https://my.website.com/process-my-transaction" method="POST">
  <a onclick="mySubmit()"> CUSTOM SUBMIT </a>
</form>

<script>
  function mySubmit() {
    window.pcjs.submit().then(function() {
      // perform success action on your application's logic
    }).catch(function (error) {
      // handle fraud check failures such as a redirect to a specific page
    })
  }
</script>

Setup PayButton