---
schema_version: "1"
id: 8774e4dc4d82939757869e85d13b43c5199bc62f51055c6c11dfa3f3867bf01b
title: Digital Commerce Web Component Setup
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/industries/cme/guides/comms-t-digital-commerce-web-component-setup.md
canonical_url: https://developer.salesforce.com/docs/industries/cme/guide/comms-t-digital-commerce-web-component-setup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b0ae6a123205bc36ae48e44c993380f6d103410b96511c0054e3c540d9c5359b
products:
  - Communications, Media, Energy and Utilities APIs (Managed Package)
  - Industries Developer Documentation
---
# Digital Commerce Web Component Setup

Follow the steps in this section to configure ServerSDK to take advantage of the Digital Commerce Web Components.

1.  Add SDK and digitalcommerce-components-src in your package.json file., as shown here:

    ![Add SDK and digitalcommerce-components-src](https://developer.salesforce.com/docs/media/sdk_rename.png)

2.  Add the `.npmrc` file. The `.npmrc` file is required to authenticate with the Vlocity private npm registry. For public access, use the default access token. Contact Salesforce Customer Support to obtain the authorization token.

    ![Add the ​.npmrc​ file](https://developer.salesforce.com/docs/media/sdk_auth.png)

3.  In the `index.html` file, add and define the meta tag as shown here:

    ![Add and define the meta tag in the ​index.html​​ file](https://developer.salesforce.com/docs/media/sdk_metatag.png)

    Meta name definitions:

    | Meta tag name attribute                       | Description                                                                                                                                                                                                                                                          |
    | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | vlocity-dc-remote-site-url                    | Contains the content attribute, which may be a SalesForce instance URL for known users or an AWS URL for anonymous users.                                                                                                                                            |
    | vlocity-dc-remote-method-type                 | Contains an attribute value that specifies the logon method, which can be either "knownUser" for known users or "anonymousUser" for anonymous users.                                                                                                                 |
    | vlocity-dc-org-namespace                      | Contains value attributes that specify the org namespace.                                                                                                                                                                                                            |
    | vlocity-dc-payment-url                        | Contains value attributes that specify the checkout payment URL.                                                                                                                                                                                                     |
    | vlocity-dc-secure-server-url                  | Contains value attributes that specify the URL where ServerSDK is hosted.                                                                                                                                                                                            |
    | vlocity-dc-secure-server-request-credentials) | Contains value attributes that specify a value indicating whether the user agent should send cookies to the secure server if it is hosted on another domain in the case of cross-origin requests. Possible values are: include, omit and same-origin (default value) |
    | vlocity-dc-enable-proxy-sdk                   | Contains value attributes that specify the value “enable”. If set to enable, the Digital Commerce, Account, and Translation Proxy SDK instance will be created.                                                                                                      |

4.  In your `index.html` file, import the SDK using the script tag, as shown here:

    - If using the Client-Side SDK:

      ![Script tag, client-Side SDK index.html​​ file](https://developer.salesforce.com/docs/media/sdk_client.png)

    - If using the Proxy SDK

      ![Script tag, Proxy SDK index.html​​ file](https://developer.salesforce.com/docs/media/sdl_proxy.png)

5.  To initialize a Firebase SDK strategy in your Web Component application, you must configure Firebase authorization details. You can initialize Firebase from any component simply by importing `vlocity-dc-authentication-util` and passing Firebase authorization configuration to the initAuthConfig method.

    ![Import ​vlocity-dc-authentication-util​ and pass Firebase authorization configuration to the ​initAuthConfig​​ method](https://developer.salesforce.com/docs/media/sdk_lwc.png)

    **note:** You can configure a custom authentication by creating your own authorization strategy and then importing it and passing it as an input parameter to the configureAuthentication method of the vlocity-dc-authentication-util component. Once configured, you can initialize it and use your custom authorization strategy.

    ![Configure a custom authentication](https://developer.salesforce.com/docs/media/sdk_lwc2.png)

6.  From your JS file, import the `SDK-util` file:

    ```nolang
    import { digitalCommerceSDKInstance } from "@vlocity-cme-wc/digitalcommerce-components-src/vlocity-dc-utils/vlocity-dc-sdk-utils";
    ```

    Get the SDK instance:

    ```nolang
    this.digitalCommerceSDK = digitalCommerceSDKInstance().digitalCommerce;
    ```

    Call the SDK methods:

    ```nolang
    let input = this.digitalCommerceSDK.createGetOffersInput()
    this.digitalCommerceSDK.getOffers(input).then(response => {});
    ```