5. Securing Embedded UIs


The PayEngine Embedded UIs allow you to ease integration of our widgets to be used by your customers. Because it's provided for you via our web-components and tied directly to our server, you never have to worry about the heavy lift of UI development while maintaining full control over its theming and other customizations.

Our Embedded UIs have a simple HTML/Javascript embed so it can be embedded onto any part of your web applications that requires user interaction with payment-related parts of your system. It authorizes users with a security hash generated with the logged-in user's email. This method of authorization allows PayEngine web-components to work with any authentication provider.

PayEngine uses two methods for securing web-components. Depending on the web-component and the type of data used, the implementation will vary between one or the other.

HMAC-based client side

HMAC is a computed "signature" sent along with some data. The HMAC is used to verify (authenticate) that the data has not been altered or replaced. The process involves an exchange of a secret key, which is then used to hash a message. The secret key should never be shared or made publicly available. PayEngine uses this method to ensure that the request information in fact was originated from your servers.

Webhooks-based data pinning

In addition to the HMAC method described above, some of our web-components also require data-pinning. For some of the components you will be expected to provide a self-generated reference ID which our webhooks system will then use on the back-end to retrieve additional information. An example of this is our payment form web-component, where it's essential that the users don't temper with the pre-set amounts they need to be charged. This will allow you to pass a reference ID to our payments for web component and expect a web-hooks API to exist within your system that will provide the actual amount that should be enforced on a transaction.


Embedding the Embedded UIs is a two-step process.

  1. For the client side installation, just copy and paste the provided HTML snippet from your developer portal.

  2. The next step is to secure the setup.

Authenticating Secure Setup

The customer portal must be behind some kind of user authentication in order to safely show customers their payment information. PayEngine authenticates users with an HMAC hash generated for the logged-in user. This allows us to work with any authentication system.

Your code for generating an HMAC for your app must be placed in the back-end of your application. Grab the snippet from the developer dashboard to add to your server. You may generate the HMAC with the Merchant ID.

The HMAC generated will be passed to the client-side snippet to a property called 'hash'.

const crypto = require("crypto");
const merchant_id_hash = crypto.createHmac(
).update(<merchant_id>).digest("hex") // PASS THIS TO FRONT-END

Keep your secret key safe! Never commit it directly to a public repository, client-side code, or anywhere a third party can find it.

Last updated