PayTrace Client-Side Encryption

PayTrace JSON API:
Client-Side Encryption

The Client-Side Encryption feature of the PayTrace JSON API securely encrypts sensitive credit card data in the customer’s web-browser by using a JavaScript library provided by PayTrace. The sensitive credit card information is encrypted before the web form is submitted to your server. This allows your system to transmit the sensitive credit card data to PayTrace encrypted, which can only be decrypted by PayTrace, removing your system from having access to unecrypted credit card data and reducing your PCI Scope.

This will allow your customers to process transactions on your website and not require your customer to be redirected to another payment page to process a payment. Providing your customers with the comfort and security of processing payments on your website.

RSA Encryption

An RSA public/private key pair is used to encrypt sensitive credit card data. The public key corresponds to your PayTrace account and is used to encrypt the credit card data. PayTrace stores the private key allowing only PayTrace to decrypt the encrypted data.

How to get the Public Key

  1. Log into your PayTrace account or Sandbox Account.
  2. Go to the DOWNLOAD PUBLIC KEY page under the INTEGRATIONS menu.
  3. This will allow you to save the PEM file/Public Key for your PayTrace account, which will allow you to serve it from your server.

Incorporating PayTrace Client-Side Encryption in a Web Form

The code snippet below shows how to write a Web page containing a form that will submit encrypted-value fields. It assumes that you have downloaded your merchant public-key and are serving it from the address /e2ee-public-key.pem on the same server as the form. (Adjust the URL of 'my.pem' if it is at a different URL.)

On each field to be encrypted at the browser, add the pt-encrypt class. The encrypted value of the field will be submitted to your server using the field name specified by the name attribute of the input element.

      <!DOCTYPE html>
      <html lang="en">
      <head>
        Your page head information...

        <!-- This is the PayTrace End-to-End Encryption library: -->
        <script src="https://api.paytrace.com/assets/e2ee/paytrace-e2ee.js"

      </head>
      <body>

        Your page HTML...

        <script>
        // this hooks form submission.
        $(document).ready(function() {
        // do this first, or wrap in a try/catch to ensure the form is never un-hooked
          paytrace.hookFormSubmit('#enterPayment');
          // set the key from an AJAX call (in this case via a relative URL)
          paytrace.setKeyAjax('my.pem');
        });
    ><script>

          <input type="text" class="form-control pt-encrypt" id="ccNumber"
                 name="ccNumber" placeholder="Credit card number">

        ...

          <input type="text" class="form-control pt-encrypt" id="ccCSC"
                 name="ccCSC" placeholder="Card security code">

        Remainder of page...
      </body>
      </html>  

Submitting Encrypted Values to the API

To use encrypted values your server has received from a Web form, you must submit them as property values in an API request. Your form may collect an encrypted value for any field you wish, and your server may include the encrypted value submitted by the browser in a request to PayTrace's API as the value of the appropriate JSON property and prepending encrypted_ to the name of the property.

{"csc": "123"}
becomes
{"encrypted_csc": "Y+dWVNfkWoVDkUJudd16XzbQAS43vbyavyIfR4hvqoarrf..."}

Even though encrypted data is significantly more secure than it would be in plain text, PayTrace recommends encrypted data never be stored for longer than necessary.