Marketplace icon

Terms of Service components

Enable users to accept Adyen's Terms of Service using Onboarding components.

To integrate the terms of service components, the minimum required library version is 3.32.0.

You can integrate the terms of service components to enable your users to accept Adyen's Terms of Service documents directly within your marketplace's user interface (UI). The components present the relevant Terms of Service documents to the user and prompt them to sign the documents. After the user accepts the Terms of Service, the components notify Adyen automatically. This means you do not need to make multiple API calls to manage the service agreement process yourself.

This page provides information on:

  • The available contract components, which include the Accept Terms of Service component and the Manage Terms of Service component.
  • The steps needed to integrate these components into your marketplace's UI.

Accept Terms of Service component

The Accept Terms of Service component enables your users to view and accept the required Terms of Service documents within your marketplace's UI.

The Terms of Service documents are only available in English. As a result, these documents will not be translated into other languages, even if you choose a different locale setting for your components.

The following tabs illustrate how the component appears on various screen sizes.

Manage Terms of Service component

The Manage Terms of Service component enables your users to view the status of the Terms of Service documents when used as a standalone component. If the documents still need to be signed, the component prompts the user to do so.

You can also link the Manage Terms of Service component to the Accept Terms of Service component by using callback functions. This enables users to view and download the signed documents.

The following tabs illustrate how the component appears on various screen sizes.

Requirements

Requirement Description
Integration type You must have the Adyen for Platforms platform integration.
API credentials You must have a Legal Entity Management API key (for example, ws[_123456]@Scope.Company_[YourCompanyAccount]) to access the Session authentication API.
Setup steps Before you begin:

User flow and callback functions

You can use each component independently to serve its primary purpose, such as to enable users to view and sign the documents, and to view the status of the documents. Alternatively, you can integrate the two components into a single user flow by using the following callback functions:

  • When integrating the Accept Terms of Service component, you can include:
    • the onAccept callback function. This function is triggered when the user signs the Terms of Service document. It returns information about the signed document(s) and the signer in a payload every time the user signs a new document.
    • the onClose callback function. This function is triggered when the user closes the modal window or selects Finish after signing the Terms of Service documents, and it loads the Manage Terms of Service component. This enables the user to view the status of the documents.
  • When integrating the Manage Terms of Service component, you can include the onClick callback function. This function is triggered when the user selects Continue next to the Terms of Service documents, and it loads the Accept Terms of Service component. This enables the user to view and download the signed documents.

See the example data for the onAccept callback function below.

`onAccept` data
Expand view
Copy link to code block
Copy code
Copy code
{
  unAcceptedTermsOfServiceTypes: ["adyenIssuing"];
  acceptedTermsOfServices: [
    {
      acceptedBy: "LE00000000000000000000001";
      id: "TOS0000000001";
      language: "en";
      termsOfServiceDocumentId: "TOS1234";
      type: "adyenForPlatformsAdvanced";
    },
    {
      acceptedBy: "LE00000000000000000000001";
      id: "TOS0000000002";
      language: "en";
      termsOfServiceDocumentId: "TOS5678";
      type: "adyenAccount";
    },
  ];
}

How it works

Follow these steps to integrate the individual legal entity components:

  1. Create an authentication session from your server
  2. Install the component library on your front end
  3. Initialize the components
  4. Customize the components

1. Create an authentication session from your server

To ensure secure communication between components and Adyen server, you must configure your server for authentication and create a session token. To create the token:

  1. From your server, make a POST /sessions request using the API key that you set up for the Legal Entity Management API. In the request body, specify these parameters:

    Parameter Required
    Description
    		 Example
    allowOrigin -white_check_mark- The URL where the component will appear. Must follow the format of https://www.yourcompany.com, where yourcompany.com is the actual web address of your marketplace. Can include a subdomain.
    On live, only the HTTPS protocol is supported.
    policy -white_check_mark- An object that contains:
    • resources: An object that contains:
      • legalEntityId: The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and who will sign the Terms of Service documents.
      • type: The type of resource. Set this to legalEntity.
    • roles: The role(s) required to use the component(s). Set this to acceptTermsOfServiceComponent and/or manageTermsOfServiceComponent.
    product -white_check_mark- The type of product the component belongs to. Set this to onboarding.

    Here is an example request for creating a session token.

    Create a session token
    Expand view
    Copy link to code block
    Copy code
    Copy code
    		curl https://test.adyen.com/authe/api/v1/sessions \
    		-H 'content-type: application/json' \
    		-H 'x-api-key: ADYEN_LEGAL_ENTITY_MANAGEMENT_API_KEY' \
    		-D '{
    		   "allowOrigin":"https://yourcompany.com",
    		   "product":"onboarding",
    		   "policy": {
    		     "resources": [
    		       {
    		         "legalEntityId": "LE00000000000000000000001",
    		         "type": "legalEntity"
    		       }
    		     ],
    		     "roles": [
    		       "acceptTermsOfServiceComponent",
    		       "manageTermsOfServiceComponent"
    		     ]
    		   }
    		}'

  2. Note the API response. Later, when initializing the components, you need to create and call a function that passes the entire session object from the response to your front end. Additionally, you need to pass the token value to the sdkToken parameter.

    Session token created
    Expand view
    Copy link to code block
    Copy code
    Copy code
    		{
    		  "id": "EC1234-1234-1234-1234",
    		  "token": "xxxxx.yyyyy.zzzzzz"
    		}

2. Install the component library on your front end

Install the Adyen KYC Components library in your front-ent application as follows:

  1. Install the npm package.

    Copy code
    npm install @adyen/kyc-components --save

  2. Import the library, the components, and the style sheet.

    Copy code
    		import AdyenKyc from '@adyen/kyc-components';
    		import '@adyen/kyc-components/styles.css';

3. Initialize the components

To initialize components:

  1. Gather the following information to be passed when initializing the library and its components.

    1. Gather these parameters to initialize the library.

      Parameter Required
      Description
      		 Example
      country -white_check_mark- The two-letter ISO 3166-1 alpha-2 country code of the legal entity. Use US for the United States of America.
      environment -white_check_mark- The URL of the environment for the component integration. Use https://test.adyen.com/ for the test environment and https://onboardingcomponents-live.adyen.com/ for the live environment.
      getSdkToken -white_check_mark- The callback function that retrieves an authentication session token and refreshes the current session.
      locale -white_check_mark- The language of the component. See the list of supported languages. Use en-US for English.
      sdkToken -white_check_mark- The token received from the create session token API response.

    2. Gather these parameters to initialize each component.

      Select the tab for the component you want to use:

      Parameter Required
      Description
      		 Example
      legalEntityId -white_check_mark- The unique identifier of the legal entity associated with the user that has a contractual relationship with your marketplace and who will sign the Terms of Service documents. LE00000000000000000000001
      modalView Determines how the component is shown in the user interface.
      By default, the parameter is set to false and shows the component as an inline element on the page.
      Set to true to show the component as a modal window that overlays the main screen.
      onAccept The callback function triggered when the user signs the Terms of Service documents in the component. (submittedData) => {}
      onClose If the modalView is true, this callback function is triggered when the user closes the modal window or selects Finish after signing the Terms of Service documents. () => { console.log("I've been closed")

  2. Create a DOM element on your UI page where you want the component to be rendered.

    Assign the element a unique and descriptive ID. This unique ID is important to avoid any misconfigurations when integrating multiple components into your UI.

    Select the tab for the component you want to use:

    Create DOM element
    Expand view
    Copy link to code block
    Copy code
    Copy code
    <div id="accept-tos-container"></div>

  3. Add a function that calls your API to retrieve and refresh an authentication session token.

    Select the tab for the component you want to use:

    Add function to refresh a session token
    Expand view
    Copy link to code block
    Copy code
    Copy code
    		function getSdkToken() {
    		  return fetch('https://api.yourcompany.com/adyen-onboarding-sdk-token',
    		        { "policy": { "roles": ["acceptTermsOfServiceComponent"] } });
    		}

  4. Initialize the component and mount it to the container you created.

    Be sure to include the function for retrieving and refreshing the session token that you added in the previous step.

    In this step, you can also configure the components to use one of the supported languages by setting the locale parameter. If no localization settings are provided, the components will default to English.

    Select the tab for the component you want to use:

    Initialize library and create component
    Expand view
    Copy link to code block
    Copy code
    Copy code
    		const adyenKycHandler = new AdyenKyc({
    		     locale: 'en-US',
    		     country: 'US',
    		     environment: 'https://test.adyen.com',
    		     sdkToken: token,
    		     getSdkToken
    		});
    		 
    		const acceptTermsOfServiceComponent = adyenKycHandler
    		     .create('acceptTermsOfServiceComponent', {
    		         legalEntityId,
    		         onAccept: (data) => {}, // Triggered every time the user signes a new document
    		         modalView: true, // Show in a modal window or inline
    		         onClose: () => {} // Optional, when the user selects Close. For the modal view only
    		    })
    		.mount('#accept-tos-container'); // Mount to the container you created

    If you use callback functions to integrate the two components into a single user flow, refer to the following example implementation:

    Example callback function implementation
    Expand view
    Copy link to code block
    Copy code
    Copy code
    		const adyenKycHandler = new AdyenKyc({
    		     locale: 'en-US',
    		     country: 'US',
    		     environment: 'https://test.adyen.com',
    		     sdkToken: token,
    		     getSdkToken
    		});
    		 
    		   // (Optional) Store reference to the Accept Terms of Service component to be used in the Manage Terms of Service component
    		const openTermsOfService = () => adyenKycHandler
    		     .create('acceptTermsOfServiceComponent', {
    		        legalEntityId,
    		        onAccept: (data) => {}, // Triggered every time the user signes a new document
    		        modalView: true, // Show in a modal window or inline
    		        onClose: () => {} // Optional, when the user selects Close or Finish. For the modal view only
    		     })
    		.mount('#accept-tos-container'); // Mount to the container you created
    		 
    		const manageTermsOfServiceComponent = adyenKycHandler
    		     .create('manageTermsOfServiceComponent', {
    		        legalEntityId,
    		        onClick: () => openTermsOfService(), // Opens the Accept Terms of Service component stored above
    		     })
    		.mount('#manage-tos-container')

4. (Optional) Customize the components

The terms of service components have a default appearance with pre-defined styles, such as colors, fonts, and borders. You can customize the appearance of your components by overriding the default values of CSS variables:

  1. Inspect the components using your browser's developer tools.
  2. Modify the styles in your style sheet file.

For the best user experience when customizing components, we recommend the following:

  • Choose color combinations that complement each other well and provide enough contrast for readability, especially for text and navigation elements.
  • Follow accessibility guidelines to ensure that the color palette is inclusive and usable for individuals with visual impairments.
  • Test your customizations before implementing them live.

The following tabs show the available CSS variables and their default values.

Default font settings
Expand view
Copy link to code block
Copy code
Copy code
/** Font family */
--adyen-sdk-text-body-font-family: "Inter; Roboto; Oxygen; 'Open Sans'; 'Helvetica Neue'; Arial; sans-serif";
--adyen-sdk-text-caption-font-family: "Inter; Roboto; Oxygen; 'Open Sans'; 'Helvetica Neue'; Arial; sans-serif";
--adyen-sdk-text-title-font-family: "Inter; Roboto; Oxygen; 'Open Sans'; 'Helvetica Neue'; Arial; sans-serif";
--adyen-sdk-text-title-m-font-family: "Inter; Roboto; Oxygen; 'Open Sans'; 'Helvetica Neue'; Arial; sans-serif";
--adyen-sdk-text-title-l-font-family: "Inter; Roboto; Oxygen; 'Open Sans'; 'Helvetica Neue'; Arial; sans-serif";
 
/** Font size */
--adyen-sdk-text-caption-font-size: 12px;
--adyen-sdk-text-body-font-size: 14px;
--adyen-sdk-text-title-font-size: 16px;
--adyen-sdk-text-title-mobile-font-size: 16px;
--adyen-sdk-text-title-m-mobile-font-size: 18px;
--adyen-sdk-text-title-m-font-size: 20px;
--adyen-sdk-text-title-l-mobile-font-size: 20px;
--adyen-sdk-text-title-l-font-size: 24px;
 
/** Font weight */
--adyen-sdk-text-body-font-weight: 400;
--adyen-sdk-text-caption-font-weight: 400;
--adyen-sdk-text-body-stronger-font-weight: 500;
--adyen-sdk-text-caption-stronger-font-weight: 500;
--adyen-sdk-text-body-strongest-font-weight: 600;
--adyen-sdk-text-title-font-weight: 600;
--adyen-sdk-text-title-m-font-weight: 600;
--adyen-sdk-text-title-l-font-weight: 600;
 
/** Line height */
--adyen-sdk-text-caption-line-height: 18px;
--adyen-sdk-text-body-line-height: 20px;
--adyen-sdk-text-title-line-height: 26px;
--adyen-sdk-text-title-mobile-line-height: 26px;
--adyen-sdk-text-title-m-mobile-line-height: 28px;
--adyen-sdk-text-title-m-line-height: 30px;
--adyen-sdk-text-title-l-mobile-line-height: 30px;
--adyen-sdk-text-title-l-line-height: 34px;
 
/** Primary font color - main font color for components */
--adyen-sdk-color-label-primary: #00112c;
--adyen-sdk-color-label-primary-hover: #5c687c;
--adyen-sdk-color-label-primary-active: #8d95a3;
 
/** Secondary font color - secondary font color (ex. helper text, captions) */
--adyen-sdk-color-label-secondary: #5c687c;
 
/** Tertiary font color - tertiary font color (ex. field placeholder text) */
--adyen-sdk-color-label-tertiary: #8d95a3;
 
/** Highlight font color - pop of color (ex. current form step indicator) */
--adyen-sdk-color-label-highlight: #0070f5;
 
/** Inverse primary font color - ex. button text color */
--adyen-sdk-color-label-inverse-primary: #ffffff;
--adyen-sdk-color-label-inverse-primary-hover: #f7f7f8;
--adyen-sdk-color-label-inverse-primary-active: #eeeff1;
--adyen-sdk-color-label-inverse-secondary: #9ea6b1;
 
/** Link font color - sets color of links */
--adyen-sdk-color-link-primary: #00112c;
--adyen-sdk-color-link-primary-hover: #5c687c;
--adyen-sdk-color-link-primary-active: #8d95a3;
--adyen-sdk-color-link-primary-disabled: #8d95a3;

The following tabs show examples of how to style the components.

style.css
Expand view
Copy link to code block
Copy code
Copy code
:root {
  /** Setting the default font family to Inter */
  --adyen-sdk-text-body-font-family: Inter,sans-serif;
  --adyen-sdk-text-caption-font-family: Inter,sans-serif;
  --adyen-sdk-text-title-font-family: Inter,sans-serif;
  --adyen-sdk-text-title-m-font-family: Inter,sans-serif;
  --adyen-sdk-text-title-l-font-family: Inter,sans-serif;
 
  /** Setting the font weights to custom values */
  --adyen-sdk-text-body-font-weight: 500;
  --adyen-sdk-text-caption-font-weight: 500;
  --adyen-sdk-text-body-stronger-font-weight: 600;
  --adyen-sdk-text-caption-stronger-font-weight: 600;
  --adyen-sdk-text-body-strongest-font-weight: 700;
  --adyen-sdk-text-title-font-weight: 700;
  --adyen-sdk-text-title-m-font-weight: 700;
  --adyen-sdk-text-title-l-font-weight: 700;
}

See also