By integrating Salesforce Commerce Cloud (SFCC) with OwnID, you can implement the full set of OwnID features to simplify and streamline your user login experience.
How it Works
OwnID integrates with the SFCC built-in API client, using our native SFCC Connector and an SFCC cartridge .
Integrate OwnID with SFCC by completing these four basic steps:
Step 1 - Get SFCC Credentials.
Step 2 - Create an OwnID application in the OwnID Console.
Step 3 - Install the SFCC Cartridge.
Step 4 - Add OwnID SDK script to your template.
Prerequisites
Download the Salesforce Commerce Cloud cartridge here .
Have permissions to access and modify SFCC Account Manager and SFCC instance’s Administration.
Step 1 - Add SFCC Client
Integration requires you to create a new API Client in your SFCC instance.
Create Credentials
See: Add an API Client in B2C Commerce
Log into the SFCC Account Manager.
Select API Client from the left side menu.
Click Add API Client .
Enter “OwnID Integration” in Display Name .
Enter a password.
Assign your organization.
Assign the following roles:
Sandbox API User
Salesforce Commerce Cloud
In the Token Endpoint Auth Method , select private_key_jwt
.
Click Save Changes .
Figure 1. Salesforce API Client Creation
Salesforce displays your Client Id
and Secret
. Save these values for later use.
Assign Permissions
Go to Administration > Site Development > Open Commerce API Settings .
Add the following JSON object to the shop tab:
{
"_v" : "23.1" ,
"clients" : [
{
"allowed_origins" : [],
"client_id" : "Client ID" ,
"resources" : [
{
"resource_id" : "/customers/auth/trustedsystem" ,
"methods" : [
"post"
],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
},
{
"resource_id" : "/sessions" ,
"methods" : [
"post"
],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
}
]
}
]
}
Change client_id
value in the shop JSON to match the Client Id
created in the previous step.
If the OCAPI configuration is already in place, simply include the following resource into the resources section.
{
"resource_id" : "/customers/auth/trustedsystem" ,
"methods" : [
"post"
],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
},
{
"resource_id" : "/sessions" ,
"methods" : [
"post"
],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
}
Otherwise, add the following full JSON object to the data tab:
{
"_v" : "23.1" ,
"clients" : [
{
"allowed_origins" : [],
"client_id" : "Your Client ID" ,
"resources" : [
{
"resource_id" : "/sites/*" ,
"methods" : [ "get" ],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
},
{
"resource_id" : "/customer_lists/*/customers/*" ,
"methods" : [ "get" , "patch" ],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
},
{
"resource_id" : "/customer_lists/*/customer_search" ,
"methods" : [ "post" ],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
},
{
"resource_id" : "/ocapi_configs/*" ,
"methods" : [ "get" ],
"read_attributes" : "(**)" ,
"write_attributes" : "(**)"
}
]
}
]
}
Modify the client_id
value in the JSON object to match the Client Id created in the previous step.
Securing User’s Personal Data
OwnID does not store or process any user data. Users’ public keys and device information are stored on your platform.
Private keys are kept exclusively on the user’s device and are never transmitted elsewhere.
Step 2 - Create OwnID Application
An OwnID App is what connects the existing identity provider used by your website with the OwnID widget you insert on the front end.
OwnID widget
Each of your OwnID Apps acts as the central point of configuration for each of your integrations. These no-code Apps are created, hosted, and maintained entirely within the OwnID Console environment.
When you create an App, it’s assigned a unique appId
automatically. Use that appId
in OwnID SDK interaction from your website’s front end.
To Create an OwnID App
Login to the OwnID Console (or create your account).
Click +Create Application from the Apps screen.
Enter a name for your application in the App name field.
From the Choose your integration panel, select the tile.
Click Next .
Enter the website URL to your application instance and click Continue .
Click Explore my App on the “Congratulations” popup.
From the OwnID Settings panel, copy the App ID and the Shared Secret for use in configuration on the side.
Your OwnID application and secret key are created and you’re ready for next steps!
Salesforce Commerce Integration Configuration
Open the Salesforce integration page in the OwnID Console.
Enter the Instance Hostname - e.g: xyzb-001.dx.commercecloud.salesforce.com (only the domain, without protocol).
Enter a Site ID - e.g: RefArch (case sensitive).
Enter the API Client ID (generated in the previous step).
Enter the API Client Secret (generated in the previous step).
Enter the SFCC Username (get it from the Account Manager).
Enter the SFCC Password.
Click Save Changes .
Figure 4. OwnID Console
Copy the appId
so you can use it in the next step.
Security Configuration
Go to Integration > Security
On the Signing Key panel, click Generate a new key
Save this key so you can use it in the next step.
Figure 5. Signing Key
Step 3 - Install the SFCC Cartridge
Upload and add the cartridge to the target site.
Navigate to Merchant Tools > Site Preferences > Custom Preferences > OwnID and set the following preferences:
Set EnableOwnId
to true
to display the OwnID widget.
Env
Select the OwnID production environment.
Enter the AppId
previously copied from the OwnID Console.
Enter the Signing Key
previously copied from the OwnID Console.
Figure 6. OwnID Cartridge Configuration
Step 4 - Add OwnID SDK script to your template
After the cartridge is installed, you need to add this script to a template that is rendered in all pages, such as templates/default/common/htmlHead.isml
Make sure the script is added to all the pages of your website
< iscomment > Include the OwnId SDK </ iscomment >
< isif condition = "${require('*/cartridge/scripts/ownid').isEnabled()}" >
< script >
$ { require ( '*/cartridge/scripts/ownid' ). ownidSdkSnippet ( pdict . action ) }
</ script >
</ isif >
Advanced Configuration
Styling Options
Default button variant (Example for michaelkors.com)
The default implementation places the OwnID button side by side with the password field and requires no additional configuration in the cartridge.
If you would like to style this button, you can utilize the following CSS variables:
ownid-fingerprint-button-widget {
--ownid-button-widget-border-radius ;
--ownid-button-widget-font-size ;
--ownid-button-widget-color ;
--ownid-button-widget-border-color ;
--ownid-button-widget-check-size ;
--ownid-button-widget-check-position-top ;
--ownid-button-widget-check-position-right ;
z-index ;
}
The OwnID SFCC cartridge doesn’t render automatically this variant.
If you want to use it make sure you enable the configuration option skipDefaultWidgets
, so there’s no overlap with the default (side-by-side) variant.
Standalone button (Example for nfl.com)
If you want to position the OwnID button independently from the password field, you can use the standalone-button
variant.
Use the examples below to render the button in your login , register or account recovery pages:
Login
Login w/ redirection
Register
Account Recovery
ownid ( 'login' , {
variant: 'standalone-button' ,
infoTooltip: false ,
loginIdField: document . querySelector ( '#email' ),
element: document . querySelector ( '.wrapper-div' ),
onLogin : ( data ) => window . ownidOnLogin ( data )
});
Note: in the code sample above, wrapper-div
represents the div where the button will be shown. Configure your own.
If you would like to style this button, you can utilize the following CSS variables:
Cartridge Settings
This section outlines the preferences that can be configured for the OwnID SFCC cartridge.
enableOwnId
Type : Multi-value
Description : Enables OwnID functionality on specified sites.
Values :
"true"
or "all"
: Enables OwnID on all sites.
List of locales (e.g., "en-US", "en-GB"
): Enables OwnID only on specified sites.
env
Type : String
Description : Sets the environment for OwnID usage (e.g., UAT
, Production
).
appId
Type : String
Description : Specifies the OwnID App ID used for integration.
signingKey
Type : String
Description : Private key retrieved from the OwnID console for secure communication.
skipDefaultWidgets
Type : Boolean
Description : Should the cartridge skip rendering default OwnID widgets automatically.
returningUserPromptActions
Type : List
Description : Specifies the action pages on which to prompt the Returning User Prompt (RUP), if applicable.
Example: Login-Show
, Account-Register
, Checkout-Begin
returningUserPromptActionsOnSecondVisit
Type : List
Description : Specifies the action pages on which to prompt the Returning User Prompt (RUP), but only on a second visit to any page on the list.
showAuthNotificationActions
Type : List
Description : Specifies the action pages on which to show an authentication notification.
accountRecoveryActions
Type : List
Description : Specifies the action pages on which to prompt for account recovery actions.
Example: Account-PasswordReset
enableProfileUpdateWidgets
Type : Boolean
Description : Displays a passwordless widget on account update forms (e.g., email or password update).
All prompts will only be shown if they are applicable based on conditions such as user context (e.g., mobile usage, returning user status).
Next Steps
Ready to deploy?
YES! Take me to the Deployment Checklist
Responses are generated using AI and may contain mistakes.