search icon

Enable client-side encryption

Encrypt your customer’s sensitive payment information using client-side encryption.

Encrypt your customer’s payment information in their browser before you process it on your server.

Prerequisites

Access the CSE library and public key

After client-side encryption is enabled for your account, log in to the Gateway Console to access the CSE library and your public key.

  1. Log in to the Gateway Console.
  2. In the navigation menu, go to Configuration > Merchants.
  3. Select the merchant name associated with your account.
  4. Expand the Client-side Encryption Key dropdown.
  5. Locate and copy the Script Tag and Public Key fields.

Use the CSE library in your payment form

When you create your payment form, add the Script Tag you retrieved from your Gateway Console inside the <head> element of your payment page.

Example of a CSE library script added to the HTML header of a payment page: 
<head>
  <script src=”https://{unique-address}/encrypto-{VERSION}.js”
          integrity=”sha512-lJxHl93A/b8peqxz/mdLj7jD58N2zvHiiYhw8…==”
          crossorigin=”anonymous”></script>
</head>

Flag all eligible fields for encryption using the data-encrypted-name attribute. The fields that can be encrypted are:

  • card_holder
  • card_number
  • expiration_month
  • expiration_year
  • cvv
Example of a payment form with eligible attributes flagged for encryption: 
<body>
  <form method=”POST” action=”/request-payment” id=”encrypto-form”>
    <div>
      <input type=”text” data-encrypted-name=”card_number”/>
      <input type=”text” data-encrypted-name=”card_holder”/>
      …
      <input type=”text” data-encrypted-name=”cvv”/>
      …
      <input type=”text” name=”country”/>
      <input type=”text” name=”city”/>
    </div>
    …
    <input type=”submit” value=”Pay”/>
  </form>

Add the Public Key you retrieved from your Gateway Console inside a <script> element on your payment page.

Example of adding your public client-side encryption key to your payment form: 
  <script>
    var publicKey = ‘LS0tLS1CRUdJTiBQVUJMSUMgS0VZLS0tLS0KTUlJQklqQU5CZ2txaGtpRzl…’;

    Encrypto.createEncryptedForm(publicKey, {
      // formId: ‘encrypto-form’,               // Optional: Set a custom form identifier
      // onSubmit: function(form) {             // Optional: Perform a custom callback on form submit
      //   console.log(form.fields);              
      // }
    })
  </script>

With client-side encryption enabled, continue to make transaction requests to the emerchantpay payment gateway like in a standard server-to-server integration. The payment gateway will decrypt your customer’s payment information using the public encryption key provided in your payment form.