Frontend SDK
Authenticate towards the API to obtain your Oauth2 access token
B2B SignUp uses the same authentication as the Payer B2B platform - with a OAuth2 Bearer token for all endpoints except the authentication endpoint. To obtain your Oauth2 access token, see the Payer B2B Platform API Documentation.
Make sure that you're authenticating towards the same environment to which to intend to run the onboarding SDK!
Note that the access token expires in one hour. In terms of the signup widget it means that the user will have one hour to finish going through the widget, assuming that you got a fresh token before creating the session. When the hour is up, the user will no longer be able to finish the widget flow. This also means that if you got the access token 55 minutes ago, the user will only have 5 minutes to finish going through the widget.
To avoid the user having a short time going through the widget, we suggest that you implement logic for renewing the access token before it expires.
Make a backend-call to obtain your Client Token
Before it is possible to initiate the Frontend SDK you must first initiate an signup session by making the following backend API request to the Payer server: Create Session API Documentation
Load the Javascript SDK
<script> window.payerAsyncCallback = function () { // Initialize the SDK here // PayerSignup.init({....})) }; </script> <script src="<sdkUrl from previous step>" async></script>There are some size restrictions that you should consider, in order for the widget to look great:
- It requires a height of at least
570px(the SDK will automatically create a 570px high iFrame) - It requires a minimum width of
280px - It will not expand to cover more than
600pxwidth
Add the Onboarding Widget Container to your webpage
Add a div to your webpage, that will be the container for the Onboarding widget.
<div id="payer-onboarding-container"></div>Initialize & Load the Onboarding Widget
Initialize the Onboarding SDK with the clientToken that you received in the first step and the div id from the previous step.
/*** This method is called when the onboarding was successfully completed.** @param {object} data This param will contain an object with the following structure:* {* status: {enum} can be any of the session statuses* creditDecision: {enum} can be APPROVED, CONTROL or REJECTED* customer: {* firstName: {string},* lastName: {string},* email: {string},* phoneNumber: {string},* },* deliveryAddress: {object|null}{* name: {string},* streetAddress1: {string},* streetAddress2: {string|null},*. state: {string|null},* zipCode: {string},* city: {string},* },* invoiceAddress: {object|null}{* name: {string},* streetAddress1: {string},* streetAddress2: {string|null},*. state: {string|null},* zipCode: {string},* city: {string},* },* company: {* name: {string},* regNumber: {string}, // Registration number of the company* countryCode: {enum} // ISO 3166-1 alpha-2 for example SE, NO, FR* },* },*/const onSuccess = (data) => { console.log('Onboarding was successful, the decision was:', data.creditDecision);};/*** This method is called when the onboarding was failed to complete.** @param {object} error This param will contain an object with the following structure:* {* status: {enum} can be ERROR* errorCode: {string} can be TOKEN_EXPIRED, SYSTEM_ERROR, SERVICE_UNAVAILABLE or UNKNOWN_ERROR* },*/const onFailure = (error) => { console.error('Onboarding failed', error);};const onWidgetLoad = () => { console.log('Yay! Widget has loaded');};window.payerAsyncCallback = function () { // Initialize the SDK PayerSignup.init({ clientToken: clientToken, // The token from the first step containerId: containerId, // The container you added in the previous step callbacks: { onOnboardingSucceeded: onSuccess, // This will be called when the onboarding process was completed onOnboardingFailed: onFailure, // This will be called in case of errors onWidgetLoad: onWidgetLoad, // (Optional) This will be called when the widget is loaded } });};By now, the onboarding widget should appear on your webpage and you should be able to go through the flow. At the end, you'll get a backend as well as a frontend callback with the results!