PayTrace Client-Side Encryption

PayTrace JSON API:
Client-Side Encryption

Overview

The PayTrace Encryption Library supports client-side encryption of the sensitive data, reduces merchants and integrators exposure to PCI-compliance verification. Sensitive data can be encrypted at the user's web browser using a PayTrace JavaScript Encryption Library. These encrypted data can only be decrypted by PayTrace. The merchant or integrator has no access to the original sensitive data.

Benefits of using PayTrace Client side Encryption Library

Encryption Detail

The sensitive data are encrypted before the web form is submitted until it is received at PayTrace's secure server. RSA public/private key pair is used to encrypt sensitive credit card data. The public key corresponds to your PayTrace account and it will be used to encrypt the sensitive data. Only PayTrace can decrypt the encrypted data with the private key.

Please note: This sensitive data includes credit card number, credit card csc number and credit card swipe data (when credit card is present).

How to utilize Client Side Encryption Library ?

  1. Get your public key and save it with your environment.
  2. Incorporate PayTrace Client Side Encryption Library in a web form.
  3. Submit encrypted values to the API.

How to get a public Key?

  1. Log into your PayTrace account or Sandbox Account from PayTrace virtual terminal.
  2. Go to the Integrations Menu → Download Public Key Page
  3. This Page will allow you to save the .PEM file/Public Key for your PayTrace account.

Incorporate PayTrace Client Side Encryption Library in a web form

Following steps are required to utilize PayTrace client side encryption library with a web form.

A public key, as described above, must be completed before moving forward.

1. Include PayTrace encryption library using <script> tag in a header section.
<head>
    <!-- This is the PayTrace End-to-End Encryption library: -->
    <script src="https://api.paytrace.com/assets/e2ee/paytrace-e2ee.js"></script>
</head>
2. On sensitive data fields 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 name attribute of the input element. You can access those encrypted values using name attribute on the server.

<body>
    <input type="text" class="form-control pt-encrypt" id="Number" name="Number" placeholder="Credit card number">
    <input type="text" class="form-control pt-encrypt" id="ccCSC" name="ccCSC" placeholder="Card security code">
</body>
3. Submit a form with any of the following scenario.
3.1 Bind the submit event of the form to the PayTrace Client Side Encryption Library as shown below.

(Please provide the appropriate URL of 'YourPublicKeyFile.pem' if it is on different server.)

<script>
        // This binds the form's submit event
        $(document).ready(function() {
        // do this first, or wrap in a try/catch to ensure the form is never un-hooked
        paytrace.hookFormSubmit('#myform');
        // set the key from an AJAX call (in this case via a relative URL)
        paytrace.setKeyAjax('/YourPublicKeyfile.pem');
        });
</script>
3.2 Submit a valid form to the PayTrace Client Side Encryption Library.

You will need to validate your form with your own implementation first and then submit the valid form. As long as you set the key before a valid form is submitted, it should be fine.

<script>
        // set the key from an AJAX call  
         $(document).ready(function() {
            paytrace.setKeyAjax('/YourPublicKeyfile.pem') ;// set the key from an AJAX call (in this case via a relative URL)
          });    
        $('#myform').submit(function(e) {
             e.preventDefault(); //To prevent the default action of the submit
             if ($(this).valid()) {
                //submit the valid form    
                paytrace.submitEncrypted(this);
             } else {
                console.log("INVALID FORM. your code for further action here");
             }
             return false;
         });    
</script>

Please note: PayTrace uses Jquery-1.11.1 so we recommend that if you are using any other jquery library, you would need to set no conflict to avoid any conflict issues.

How to submit encrypted values to the API?

To use encrypted values that your server has received from a Web form, you must submit them as a request parameter values to the API. You will need to prepend request parameter name with encrypted_ before sending the request to the API.

For example, credit card number will be encrypted_number , csc will be encrypted_csc and swipe will be encrypted_swipe to send the encrypted values to the API.

Here is the sample of Keyed sale request using encrypted_number and encrypted_csc.

{  
    "amount":2.00,
    "credit_card":{  
        "encrypted_number":"htpAmr1TJ2hujwO/ObS8oFG3/AhF3AU0zh4QzgynFJejRxUOoyJ1MTXW54UD6F2cvuDCgLLMjYu1K8ybAX/Ap4HvsthqdMz5lYhDj1GwcDBUnZQx+upD/8gZNUHnm5S4EZkAXMNT79iwLCd++X97yOatd3jhjxaC0zdRUABYr6PuVEYa7gXTEO3LIiOuAnoLVhrD7ZPni8dnCluyIk2z2k6OwDdCYFwvgpuuZ/luRboG07uYBm1TfHnrLkuCGOxeP7B8Aa0rY1du7GFwXxYadI21AqrgM+DCJLfX156lil0gL4D/ZMQoTIr1hqDr9WKv92V3M+H6Gsx7z0iCbn+8Ug==",
        "expiration_month":"12",
        "expiration_year":"2020"
    },
    "encrypted_csc":"Xd46EqA9ohOD+YVjfSVZAK4/EuQ3RAcqmnfv5h0Tjhew84MARl6yhNdGHW6i+fYJnOQEuDOc3O5RfQqOe6BI8ZboNsmZ82wjPYHe8EiykMdVqNdHVg4xjQBdkexbgA9WLU5Boyc1TmbtJGVpnwDnrR90n0JQpUE/72MSq7evlFXRAIGFcdMyq+QpbLaGi4mI3Fio5L+yn5O0COj8aMD2NalyGFAQmw90dw/4he475o+sGd+2ueEsBHTrDSspfGIACl79lbkSLYa3BRfTkvHAccNRkiY65WftgRW4SGVhs29AD78gNu1kEk/HcrE1PGW1RVC/e2dPT0okKFm4v+cW/w==",
    "billing_address":{  
        "name":"Steve Smith",
        "street_address":"8320 E. West St.",
        "city":"Spokane",
        "state":"WA",
        "zip":"85284"
    }
}