Skip to main content

Integrate QR Code widget on primary website

Incorporate this widget into your public website on the page you want individuals to start the KYC process with Blockpass.

The widget displays a QR Code that individual Blockpass Mobile App users can scan to upload their Identity and register with your service.

tip

You can also display a test QR Code from the Service detail page on the Admin Console.

Get the QR Code Widget​

Select the service you want from the Services List to open the service details. From the menu of service options (•••) above the service details tabs, select "QR Code integration"

A popup will show the Widget code for the selected Service

Paste the code into your public website's html page

Usage​

(1) Load the script in the <header> section of your html

<script src="https://cdn.blockpass.org/widget/scripts/release/2.1.0/blockpass-kyc-connect.prod.js"></script>

(2) Add the Blockpass KYC Connect button and the javascript below in the location of your choice in the <body> of your html

<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
  const blockpass = new BlockpassKYCConnect("YOUR_CLIENT_ID");
  // `client_id` of your service
  // To get from the Blockpass Admin Console

  blockpass.startKYCConnect();
</script>

The button is not styled by default, you can apply your own branding and label.
You can also apply id="blockpass-kyc-connect" to a <div> or <a> tag

Optional parameters​

<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
  const blockpass = new BlockpassKYCConnect( 'YOUR_CLIENT_ID',
    {
      local_user_id: 'xxx-yyy-zzz' // optional but recommended
      elementId: 'dom_id_of_your_choice' //specify a different ID for the button (default: blockpass-kyc-connect)
    })

  blockpass.startKYCConnect()
</script>

local_user_id (string)​

If your users are authentified on your platform when they have to scan the QR code, you can assign their identifier to this parameter.

Example:

  • Alice login on your platform, her identifier is xxx-yyy-zzz
  • Assign xxx-yyy-zzz to the local_user_id parameter of the widget
  • xxx-yyy-zzz will be imported in the KYC Connect Dashboard and you can use this identifier to get Alice's KYC status with our APIs.

elementId (string)​

You can customize the id of the button to launch the widget by specifying the elementId parameter.
Useful if you have several Blockpass buttons on the same page.

Advanced usage​

You can automatically trigger the execution of your custom code based on event notifications that KYC Connect will send.
Example: auto-redirect to a different url when KYC data have been sent.

The widget currently supports the following events:

Event: Data sent successfully to KYC Connect​

<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
  const blockpass = new BlockpassKYCConnect("YOUR_CLIENT_ID");
  blockpass.startKYCConnect();

  blockpass.on("KYCConnectSuccess", () => {
    //add code that will trigger when data have been sent. ex:
    //alert('Success!')
  });
</script>

This event is triggered immediately after user's data have been sent successfully to KYC Connect.

Payload​

When this event occurs, the SDK returns a payload:

console.log("Success payload:", payload);

returns:

{
  "recordId": "5e5884feb785310019346655",
  "refId": "xxx-yyy-zzz",
  "status": "incomplete"
}

  • recordId
    unique ID of the profile created in the KYC dashboard

  • refId
    local_user_id that you have optionnaly added in the QR Code parameters

  • status
    status of the KYC verification of the profile.
    Possible values:

    • incomplete: Blockpass verifications pending
    • waiting: Operator's review pending
    • inreview: In review by Merchant
    • approved: Profile has been approved by Operator
    • rejected: Operator has rejected one or more attributes
    • blocked: Operator has blocked the profile

Event: KYC Connect workflow is successfully terminated​

<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
  const blockpass = new BlockpassKYCConnect("YOUR_CLIENT_ID");
  blockpass.startKYCConnect();

  blockpass.on("KYCConnectClose", () => {
    //add code that will trigger when the workflow is finished. ex:
    //alert('Finished!')
  });
</script>

This event is triggered when the KYC Connect popup is closed (manually by the user or automatically by the code).

Event: User aborted the workflow before data were sent to KYC Connect​

<button id="blockpass-kyc-connect">Connect with Blockpass</button>
<script>
  const blockpass = new BlockpassKYCConnect("YOUR_CLIENT_ID");
  blockpass.startKYCConnect();

  blockpass.on("KYCConnectCancel", () => {
    //add code that will trigger when the workflow is aborted. ex:
    //alert('Cancelled!')
  });
</script>

This event is triggered when the user clicks the Cancel button or hit the ESC key.

Integration with a React app​

Load the Javascript in your main html file.

    <...>
    <script src= 'https://cdn.blockpass.org/widget/scripts/release/2.1.0/blockpass-kyc-connect.prod.js'></script>
  </head>
  <body>
    <div id="root"></div>
  </body>

This is an example of how the widget can be called


  componentDidMount() {
    this.loadBlockpassWidget()
  }

  /**
   * Load Blockpass Widget
   */
  loadBlockpassWidget = () => {

    /* Widget Code begins */
    const blockpass = new window.BlockpassKYCConnect(
      clientId, // service client_id from the admin console
      {
        local_user_id: refId, // assign the local user_id of the connected user
      }
    )

    blockpass.startKYCConnect()

    blockpass.on('KYCConnectSuccess', () => {
      //add code that will trigger when data have been sent. ex:
      //alert('Success!')
    })
    /* Widget Code end */
  }

  render() {
    return (
      <button id="blockpass-kyc-connect">
        Verify with Blockpass
      </button>
    )
  }

Users on mobile​

Users on mobile phone cannot scan the QR code, obviously.

The widget will automatically suggest to use the app-link if the screen width is smaller than 615px (QR code option is still showing)

The app-link redirects to Blockpass Mobile App if the app is installed on the device.

See app-links and deep-links for more info about how the app-links work.