Guides
Start typing to search…

Front-End SDK usage

To simplify the integration of Fiant elements and enable the tracking of UI interactions,
Fiant provides a Web SDK that comes as a Javascript library.

Initialize the SDK

You should include and initialize the library from our CDN on your front end page.
Normally there should only be one call to the PTI.init function.

  <script async defer src="https://sdk.{env}.fiant.io/latest/index.js"></script>
  <script>
    window.ptiAsyncInit = function() {
      PTI.init({
        clientId: "CLIENT_ID",
        generateTokenPath: "GENERATE_TOKEN_ENDPOINT",
        ptiDomain: "PTI_DOMAIN",
        sessionId: "SESSION_ID"
      })
    }
  </script>

{env}: Set to dev, staging, or platform for development, staging, or production environments, respectively.

The CLIENT_ID must be set to the UUID provided by Fiant(PTI) when you signed up.

The GENERATE_TOKEN_ENDPOINT should be set to the url of your backend that will proxy the generation of single use tokens

The PTI_DOMAIN is the domain hosting Fiant(PTI) elements, corresponding to {env}. Use the field ptiDomain to specify one of the following:

  • staging.fiant.io (staging)
  • platform.fiant.io (production)

Alternatively, if you need a custom URL, use the optional ptiFormsUrl field to provide the full URL pointing directly to a specific forms instance.

The SESSION_ID represents the user session with the web application and will be used to group all the UI interactions which are monitored by the PTI SDK.

The SESSION_ID parameter can be omitted (a random UUID will be generated by the SDK in that case), but ideally,
you would provide a value that allows you to do an association to all the session information you keep on your end.

Updating the context

It is possible to leverage Fiant UI interaction monitoring even on forms on your site that are not the Fiant elements.
Here is an example call to the updateContext function:

PTI.updateContext({
  scenarioId: "SCENARIO_ID",
  userId: "USER_ID",
  sessionId: PTI.config.sessionId,
});

The SCENARIO_ID value can be one of the scenarios you configured for your KYC flows or any value that makes sense in your situation.
This value is used to track the steps of the user journey withing your site.

The USER_ID value should be set to the user ID you use with all the API endpoints

The sessionId can be the same as the one you provided in the init call ( as shown here ). Conceptually, the sessionId corrsponds to
the user session with your site or application.

Updating the context is not mandatory and it is done for you under the hood when you display the Hosted Forms.

Displaying elements

The hosted forms are displayed within an iframe on the html element of your choosing. Here are code examples showing how to
render the forms on your web application.

Display the User Assessment element

<div id="kyc_form"></div>
<script>
  PTI.form({
    type: "KYC",
    requestId: "REQUEST_ID",
    userId: "USER_ID",
    scenarioId: "SCENARIO_ID",
    usdValue:1000,
    parentElement: document.getElementById("kyc_form"),
    lang: "en",
  });
</script>

Display the Onboarding element

<div id="onboarding_form"></div>
<script>
  PTI.form({
    type: "ONBOARDING",
    requestId: "REQUEST_ID",
    userId: "USER_ID",
    scenarioId: "SCENARIO_ID",
    parentElement: document.getElementById("onboarding_form"),
    lang: "en",
  });
</script>

Display the "Add payment informations" element

<div id="add_cc_form"></div>
<script>
  PTI.form({
    type: "ADD_CC",
    requestId: "REQUEST_ID",
    userId: "USER_ID",
    parentElement: document.getElementById("add_cc_form"),
    lang: "en",
  });
</script>
<div id="add_crypto_form"></div>
<script>
  PTI.form({
    type: "ADD_CRYPTO_WALLET",
    requestId: "REQUEST_ID",
    userId: "USER_ID",
    parentElement: document.getElementById("add_crypto_form"),
    lang: "en",
  });
</script>
<div id="add_bank_account_form"></div>
<script>
  PTI.form({
    type: "ADD_BANK_ACCOUNT",
    requestId: "REQUEST_ID",
    userId: "USER_ID",
    parentElement: document.getElementById("add_bank_account_form"),
    lang: "en",
  });
</script>

The value of the type parameter will determine which form will be displayed.
There are various forms available:

  • KYC will display the KYC form
  • ADD_BANK_ACCOUNT will display the add bank account fork
  • ADD_CRYPTO_WALLET will display the add crypto wallet form
  • ONBOARDING will display the Onboarding form
  • ADD_CC will display the "Add a credit card" form

The value of REQUEST_ID is under your control. You should provide a UUID that you will store on your side to be able to correlate to a specific
transaction or KYC check. If you ever have to report a problem to Fiant(PTI), you must provide the REQUEST_ID associated to it to allow Fiant to investigate.
The REQUEST_ID UUID should be unique. Trying to complete 2 transactions or KYCs with the same REQUEST_ID will generate an error.

The value of USER_ID is also under your control. It corresponds to the value you passed in the id field in the body of the create user API call.
You must store the this value at user creation time to make sure you can associate your users with users in the platform.

The value of SCENARIO_ID will select the scenario under which the transaction or User assessment will be made.
The scenario must have been configured previously as explained here.
Passing an unconfigured SCENARIO_ID value will result in an error.

The value of lang is to specify which language strings should be used in the form. Default is en (English)

Updated 4 months ago