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 Demo PSP encryption libraries for each platform:
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 Demo PSP for transaction processing.
-
Demo PSP 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 Demo PSP JavaScript library into your page, using this script:
<script src="https://js.begateway.com/cse/v.1.0.0/begateway-cse.min.js"></script>
Thebegateway-cse.min.js
resides on the Demo PSP 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 Demo PSP 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 thedata-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_card
parameter 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=="
}
}
}