Use The KYC iFrame
Collect PII data with the KYC iFrame
You can opt to use the pre-built KYC iFrame for merchants who were onboarded with custom components.
The KYC iFrame will collect KYC in compliance with the CIP & KYC Certification and saves you the development work of building out onboarding UIs. It's also important to remember that the KYC iFrame does not offer the progressive merchant onboarding option and that any updates to information must be done through the API. You can either create your own UI form to collect KYC information changes or work with our support team. See the KYC and CIP certification and the Enable Merchants articles for more information.First, identify whether the merchant is based in the US or Canada (e.g. fetch the Legal Entity and examine the
country
parameter). Use this information to dynamically set the var country
value in the JS and to have the Legal Entity ID handy for the API request you will eventually make. Next, insert the WePay Helper JavaScript library into your own hosted page from the CodePen displayed below.
htmljs
<body>
<div id="kyc-iframe"></div>
<button id="submit-kyc-button"><span>Submit</span></button>
<script src="https://cdn.wepay.com/wepay.min.js"></script>
</body>
var myAppId = "{your-app-id}";
var environment = "stage"
var apiVersion = "3.0";
var error = WePay.configure(environment, myAppId, apiVersion);
if (error) {
console.log(error);
}
var iframe_container_id = "kyc-iframe";
var options = "";
var country = 'US'; // ['US', 'CA'] --> This is the country the merchant is based in, which your platform previously collected.
var ssn4_enabled = true; // ['false'] --> Note that some situations may still require SSN9 from the merchant.
var kycIframe = WePay.createKycIframe(iframe_container_id, { country_code: country.toUpperCase(), ssn4_enabled: ssn4_enabled });
if (kycIframe.error_code){
console.log('The kyc iframe has not been created, due to container id or country_code error.');
console.log('error', kycIframe);
}
document.getElementById('submit-kyc-button').addEventListener('click', function (event) {
var ein = document.getElementById('text-input-business_ein')
console.log(ein);
kycIframe.tokenize()
.then(function (response) {
console.log('response', JSON.stringify(response));
var node = document.createElement('div');
node.innerHTML = JSON.stringify(response);
})
.catch(function (error) {
console.log('error', error);
var node = document.createElement('div');
node.innerHTML = JSON.stringify(error);
});
});
When users submit their instance of the KYC iFrame and you tokenize it, a Legal Entities token will return looking something like this:
legal_entities-eebf32b3-461f-4193-a760-ee4221a918d7
Append the Legal Entity with the token by making a
POST /legal_entities/id
request:curl -X POST \
https://stage-api.wepay.com/legal_entities/id \
-H 'Api-Version: 3.0' \
-H 'App-Id: {YOUR-APP-ID}' \
-H 'App-Token: {YOUR-APP-TOKEN}' \
-d '{
"country": "US",
"token": {
"id": "legal_entities-eebf32b3-461f-4193-a760-ee4221a918d7"
}
}'
If we are able to automatically verify the submitted information, then the merchant's last step will be to submit Payout details.
Be sure to read up on the following use cases, and build out flows to handle them: