Enable client-side encryption

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

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

Prerequisites

To proceed with this solution, you must have an emerchantpay merchant account. Apply for a merchant account by filling out and submitting this contact form.

You will be assigned an emerchantpay Account Manager, who will provide you with credentials and assist you with any of emerchantpay’s payment solutions. Tell your Account Manager you want to enable client-side encryption.

Client-side encryption can only be used in a direct server-to-server integration with the emerchantpay Genesis gateway using the client-side-encryption (CSE) library. You should have a working knowledge of web programming languages, HTTP methods in XML and JSON formats, and UTF8 encoding. Genesis SDK libraries with code samples are available for integrating with the gateway in a range of languages.

For a solution that requires less development overhead, see emerchantpay’s Web Payment Form (WPF).

Access the CSE library and public key

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

Log in to Genesis using with your Merchant account.

If you do not have access to the emerchantpay Genesis payment gateway, contact your Account Manager.
In the navigation menu, go to Configuration > Merchants.
Select the name of your merchant account.
Expand the Client-side Encryption Key dropdown.
Locate and copy the Script Tag and Public Key fields.

If you see Public Encryption Key is not present, contact emerchantpay support to enable client-side encryption for your account.

Use the CSE library in your payment form

When you create your payment form, add the Script Tag you retrieved from your Genesis account 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 Genesis account inside a <script> element on your payment page.

You can also specify optional parameters like the onSubmit function, which can be set to perform a custom callback when the payment form is submitted.

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 gateway like in a standard server-to-server integration. The gateway will decrypt your customer’s payment information using the public encryption key provided in your payment form.

See client-side encryption in the emerchantpay API for more details and code samples.