The Embedded Onboarding Forms allow our partners to easily collect necessary merchant onboarding details from their users and submit them for the underwriting process.
The Embedded Onboarding UI requires only a minimal HTML/Javascript code and can be embedded onto any part of your web applications where you would like users to register for payments within your system.
Advantages of using Embedded Onboarding UI
Instantly create customized onboarding forms that adhere to security requirements. Our servers intercept the sensitive data you don't want deal with (social security numbers, EIN, other merchant related info) and replace it with aliased versions for your own data keeping while securing the original data in our vault and submitting it to the acquiring side.
The following shows rendered onboarding form examples using our Embedded Onboarding UI technology.
Before starting the following integration
You will need your public and private keys from your partner console account.
Implementing Embedded Onboarding UI
1. Create a new merchant account
In order to keep the merchant creation process at parity with the customer profiles within your platform (and before the onboarding form can be shown to a specific customer), you need to make a call from your backend environment to initialize and associate a new merchant profile within our system. This is necessary because the browser is not a secure environment and should never contain your access secret (which is required to invoke our API).
The above call will create a new merchant profile within our system and provide you with an internal ID from our system, so you can use it for presenting the onboarding form for this merchant.
Note: The merchant_id obtained from the API call above is not an active merchant id until the onboarding application is submitted and approved by the acquiring processors.
2. Authenticating Secure Setup (required for production, optional in sandbox)
Your customer portal must be behind some kind of user authentication in order to safely show customers their information. This platform 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 user's platform Merchant ID (merchant_id).
The HMAC generated will be passed to the client-side snippet to a property called 'hash'.
merchant_id_hash = OpenSSL::HMAC.hexdigest(
'sha256', # HASH FUNCTION
'YOUR_SECRET_KEY', # SECRET KEY (KEEP SAFE!)
<merchant_id> # REPLACE WITH MERCHANT ID
) # PASS THIS TO FRONT-END
import hmac
import hashlib
merchant_id_hash = hmac.new(
'YOUR_SECRET_KEY', # SECRET KEY (KEEP SAFE!)
<merchant_id>, # REPLACE WITH MERCHANT ID
digestmod=hashlib.sha256 # HASH FUNCTION
).hexdigest() # PASS THIS TO FRONT-END
merchant_id_hash = hash_hmac(
'sha256', // HASH FUNCTION
<merchant_id>, // REPLACE WITH MERCHANT ID
'YOUR_SECRET_KEY' // SECRET KEY (KEEP SAFE!)
); // PASS THIS TO FRONT-END
Generate an HMAC with SHA256 whenever a user logs into your app. Most web frameworks will have a method or library to help you do this. You'll need your app’s private key and Merchant ID.
Keep your private key safe! Never commit it directly to a public repository, client-side code, or anywhere a third party can find it.
3. Adding JS to your onboarding page
To add JS to your onboarding page, include our JavaScript library in your host page:
In the sandbox environment, you can leave the hash property empty.
To see the full list of specs, please refer to the API documentation with your developer portal account.
4. Visit the merchant onboarding form
If everything in the steps above was set up correctly, you should be able to view the implemented form from within your application. For testing convenience, while in sandbox mode, the form will include a helper button to help test the form without much effort.
5. View merchant status and update any details
Once the form has been submitted, you may review all the details from your partner details by visiting the Merchants page (pictured below).
6. Set merchant fee schedule
You can review and override any of the merchant fee schedules before submitting them for review.
To create a merchant fee schedule template, navigate to Account / Fee Schedules section from your partner admin, and click to create a new schedule.
To select specific fee schedules for incoming merchants, edit the application from the merchants list screen from within the partner portal, and click on the fee schedules.
7. Submit merchant for underwriting
As the final step to submit the merchant to our acquiring processors, you can manually submit the application for the process after your review. Upon approval from the acquiring processor, you can activate their gateway and start processing transactions.
Custom props and methods
1. Configurable props
hidden-sections
Determinate one or some sections should be hidden from the UI. Passed as a comma-separated string.
Available sections:
