Client-side encryption

Client-side encryption refers to encrypting sensitive data (like a card number and a security code) on the client side before sending them to the merchant server.

Encrypting payment information on the client side, the merchant neither handles sensitive data, nor stores them. This makes payments more secure and also reduces the merchant's PCI DSS compliance scope to SAQ A-EP.

Сlient-side encryption workflow

Client-side encryption can be easily implemented with PayCross encryption libraries for each platform:

web (see below),
Android,
iOS.

Once the library is installed, the workflow does as described below:

The encryption library uses your RSA public key to encrypt payment data fields.
The merchant receives the encrypted data on your server and passes them on to PayCross for transaction processing.
PayCross will use its private key to decrypt the data, process the transaction, and then send you the information about the transaction status.

Implementing client-side encryption in merchant web-form

Follow these steps in order to implement client-side encryption in merchant's own web-form:

1. Add begateway-cse.js and your public encryption key

Insert the PayCross JavaScript library into your page, using this script:
```
<script src="https://js.pay-cross.com/cse/v.1.0.0/begateway-cse.min.js"></script>
```
The begateway-cse.min.js resides on the PayCross server.
In a separate script tag under the first, create a new begateway object and instantiate it with your public key:
```
<script>var begateway = new BeGatewayCSE ("YOUR_PUBLIC_KEY"); </script>
```
Replace YOUR_PUBLIC_KEY with your client-side encryption key. You can find it in your PayCross back office.

2. Set up your form to encrypt sensitive information

Add the data-encrypted-name attribute to fields you want to encrypt on your checkout form.

Info

Card input fields should not have the name= attribute, but are annotated by the data-encrypted-name=attribute, to mark them for encryption. This makes the input values never sent to your server.

<form method="POST" action="#handler" id="begateway-encrypted-form">
    <input type="text" size="20" autocomplete="off" data-encrypted-name="encrypted_number" />
    <input type="text" size="20" autocomplete="off" data-encrypted-name="encrypted_holder" />
    <input type="text" size="2" maxlength="2" autocomplete="off" data-encrypted-name="encrypted_exp_month" />
    <input type="text" size="4" maxlength="4" autocomplete="off" data-encrypted-name="encrypted_exp_year" />
    <input type="text" size="4" maxlength="4" autocomplete="off" data-encrypted-name="encrypted_verification_value" />
    <input type="submit" value="Pay" id="submit-button" />
</form>

In the same script tag where you instantiated the begateway object, add code similar to the following in order to perform encryption once the customer clicks the submit button:

<script>
  document.getElementById("submit-button").addEventListener("click", function(){ begateway.encrypt("begateway-encrypted-form"); });
</script>

where begateway-encrypted-form stands for the ID of the form.

This code indicates the places where to search for the input fields with the data-encrypted-name attribute.

Detailed description of the encryption process after a click on the Pay button

Each of the fields with the data-encrypted-name attribute is automatically encrypted on the client side.
An HTML hidden input field is created for each of the encrypted fields. The name of the hidden input field is the value in the data-encrypted-name attribute. The value of the hidden field is the encrypted string.
An additional hidden field called credit_card_last_4 is also generated. The value of this field is the last four digits of the credit card number (assuming that the credit card number field has a data-encrypted-name attribute).
The name attribute of the fields with the data-encrypted-name attribute is removed, so that they will not be sent to your server.
The hidden fields and the fields without the data-encrypted-name attribute are posted to your server.

Request with encrypted data

Once you have the encrypted card details, you can use them in your API requests.

Send the encrypted card number, holder, expiration month, expiration year and security code in the JSON message of authorization, payment and tokenization requests:

"encrypted_credit_card" : {
  "number":"<encrypted-data-here>",
  "holder": "<encrypted-data-here>",
  "exp_month" : "<encrypted-data-here>",
  "exp_year" : "<encrypted-data-here>",
  "verification_value" : "<encrypted-data-here>"
}

For recipient's card tokenization include the encrypted card number, the holder, the expiration month and year in the value of the encrypted_recipient_credit_cardparameter of the JSON message:

"encrypted_recipient_credit_card" : {
  "number":"<encrypted-data-here>",
  "holder": "<encrypted-data-here>",
  "exp_month" : "<encrypted-data-here>",
  "exp_year" : "<encrypted-data-here>"
}

Info

To reinforce security measures when using client side encryption, use POST, not GET. In addition, make sure not to store any sensitive information in cookies.

Example of the authorization request with encrypted data

{
  "request":{
      "amount":100,
      "currency":"USD",
      "description":"Test transaction",
      "tracking_id":"your_uniq_number",
      "encrypted_credit_card":{
        "number": "$begatewaycsejs_1_0_0$uiutvhc05b8e1f6KX95OloXGJvFHn4KHicAHTVWW5jiUcq8DvPeKPd6rTLuX8XL2FXivnz246f8aD7tBvO7ewn5GrHDmCvqPczbYI/b/gzBBTHJQp5hEDB3Xzjr4wXviMXCi8zD2IR10u5LHPFtgvRneJ1NUJxveKoSxy0iH2frja+MEHHK8KOAHM6vQNvqttsBWZH8bx1jZTV/2lJ1uVfSBXcfBDAqoVNqllq5PKI5rE0p/drkpPKleLgkU987QEYDGIozBIMgQWtz0knZjSms2J0yootnJGEAqXAFlaOnS3ITyCULZFOrdUOvH3kuA5OF+IEoelQDBhsiVosCpQw==",
        "holder" : "$begatewaycsejs_1_0_0$p7Dny0JykJHExz8C1Z4kWLtFTC9/GBX66kK2cvh1a3yV6eSkYxnvkCKtmTRfL2CV0bcQC8EFrV6//B9DEk6TVmUl+CFt/b7kPReneonA2LFqLNG1kOBJqRQ+HW40jZqNemeyWP7Y8pRGMgh93FYwxZ/5vHEyVC2G6tXMNDSAEyJGs5ZPcPKQFNYr5WR1F/rEQwP8ZH3YOHoxFKOCSRsgevxfKncBSWHbyPZ9zHUlgi11fhebOx08/l1DmzF16eMWEm8kKQFCWkoFBrhcTdup7AIlkq4gihyGJEMBqRREhxQ27ZaArJkbKdl1d1NZdF/8t201vzy9aMMs0y/OpZ1iOA==",
        "exp_month" : "$begatewaycsejs_1_0_0$k62AQJrpirKtcHIruIcsYJf77WXXrnS08e6R76Yh5N3B+7cVQMy7Uoh1CjfjYFEuGOcDOzWt/TA3TyrdQ5Ni60tfc06LY//gtqwCy06YY0WXKv7s8wUAZOEurpUk+uRfIyMqJnViOBcoctULqZAzKh+bBhq8OcpgbFqxnXs+X554oHXcGTdso62jzUICHPvrmzoom/Fw/sodyUufbLORnH5NfpQC6O+yeIWxBcDDY03+psCJEa0Kf7l8IIAaN/34YcXRw8vuTtd6P+fNGroU/Nk/KQSxbikdkGQ2Ov29QfsHN7/UF1H0dMpW37Aqums7F0x64m+oHsHEBWH5rzYa6Q==",
        "exp_year" : "$begatewaycsejs_1_0_0$DHQBwgbYBR7R68erc+ZPuqk1eIOFUJvPCzAAdto9nxnLkTU6RaZCiRA+RyUJQIpnL1LuobABF1sccCS3ykOMkhqHLPAG6vkiewenP03krVI30Zw1SbGxL1xD99z5PAWtDjsKQjWvF/srppFd77T9zwbcrbbREwa0MIp2miCDy9Lx46m3M3d89A1NQAqWRxGTVNq3Lk2nhFHqXuLzIwkCxiCmmFUbtvR50Q/RjA/+KnFlzR8/HbAVQZQz34DHfL4Z5A9pO8zmjXwZDgPFc0XCEW25b0eogdXF95YfLAJuyrzSNLmbDkbyK5cZoOHXR92rdw9g1aILfv27rowNXp2nCQ==",
        "verification_value":"$begatewaycsejs_1_0_0$Ws52vhIxC3Cxhtb/OiMmoF0yxHbomKo2SmuPUcKGKO0xKjQs3+d80MV8tAoPiMW8gfta3YshKuJuFmLc3pww4yA7I3kR1HoeUX5JiD602cGtff9H7jthSgMHYBIIKxsmDs5NXGvZ857Z62q3U0CY4+QcToVbXcKg741vk7pkIpW/litaQC+yFVCq12FSCJudpphG45RaJNl7vBt6YJzkUKKOyLyD7iZXRNa6AAxiY/bqA0le+70e3J119jB5X0r2G0EPfBUXcDApzHffEY2F4cvE9moZP61vFlYt2EoZoBHicY5v7HW1YyBZlCf9DZa+mxl+lQ05ODFf1LaaWvFBfw=="
      }
  }
}