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

  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

  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

    Meta name definitions:

    Meta tag name attributeDescription
    vlocity-dc-remote-site-urlContains the content attribute, which may be a SalesForce instance URL for known users or an AWS URL for anonymous users.
    vlocity-dc-remote-method-typeContains an attribute value that specifies the logon method, which can be either "knownUser" for known users or "anonymousUser" for anonymous users.
    vlocity-dc-org-namespaceContains value attributes that specify the org namespace.
    vlocity-dc-payment-urlContains value attributes that specify the checkout payment URL.
    vlocity-dc-secure-server-urlContains 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-sdkContains 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

    • If using the Proxy SDK

      Script tag, Proxy SDK index.html​​ file

  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

    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

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

    Get the SDK instance:

    Call the SDK methods: