SFCC/SFRA V2 Checkout Installation Guide
Learn how to integrate Version 2 of Bolt for Salesforce Commerce Cloud's SFRA.
INFO
Review [Data Flows][3] to understand how data passes between the Shopper, Bolt’s API, Bolt’s backend and OCAPI.
Before You Start
- You must have a storefront with a base cartridge up and running.
- The Bolt integration requires OCAPI access to all of the following data elements:
- • Baskets: GET, POST, PUT, PATCH, DELETE
- • Orders: GET, POST, PUT, PATCH
- • Customers: GET, POST
- • Products: GET
- • Stores: GET
- • Promotions: GET
- • Sites: GET, PUT
- • CustomerLists: GET, POST, PUT, PATCH
- Ensure your CDN allows the above request methods, otherwise these requests may break communication between Bolt and your storefront.
- This integration requires System Object Extension to store payment-related information and Custom Object Extension to store basket related information.
Upload Cartridge to SFCC DigitalServer
- Clone the Bolt cartridge from this GitHub Repository
- Create a config file called
dw.json
in the root of the directory that contains the Bolt cartridges with the following information. ReplaceYOUR_HOST
with your host name,USERNAME
with your user name,PASSWORD
with your password, andYOUR_CODE_VERSION
with your site’s code version.{ "hostname": "YOUR_HOST.demandware.net", //without http// or https:// "username": "USERNAME", "password": "PASSWORD", "cartridge": ["cartridge A", "cartridge B"], //optional "code-version": "YOUR_CODE_VERSION" }
Upload
Via Visual Studio Code
- Ensure
dw.json
from the step above is configured correctly. - Open Visual Studio Code.
- Navigate to Extensions and search for Prophet Debugger by SqrTT and click Install.
- In VSCode, open the folder containing your cartridges.
- Navigate to File > Preferences > Settings
- Search the settings for
extension.prophet.upload.enabled
. - Set this setting to
true
. - Restart VSCode.
- Select the cloud icon then the ellipses next to CARTRIDGES.
- In the drop-down list, select Prophet: Enable Upload.
- In Business Manager navigate to Administration > Site Development > Code Deployment.
- Choose the version of the code you specified in the
dw.json
file.
Configure Business Manager
You must make the following changes in Business Manager to complete the installation.
Activate the Bolt Cartridge
- Navigate to Administration > Sites > Manage Sites.
- Select the site name and navigate to the Settings tab.
- Select the correct Instance Type from the dropdown.
- In the Cartridges input field, add
int_bolt_sfra:int_bolt_core
in front of the base cartridge path. - Select Apply.
- If you have additional storefronts, repeat steps 2-5 for each.
Authorize Bolt
Bolt will use Account Manager credentials and client API credentials for JWT tokens and OAuth authentication.
- Contact your CSM and grant
dev@bolt.com
access to your environments (sandboxes, development, staging, production) in SFRA Account Manager. - Share the credentials of
client_id
used below with Bolt. Learn more about Site Specific vs. Global Settings.
Configure Open Commerce API Settings
- Navigate to Administration > Site Development > Open Commerce API Settings.
- Navigate to
metadata/ocapi
folder. - Copy the contents of
OCAPIshop.json
within Shop Type > Open Commerce API Settings. - Replace «client_id» with your client_id.
- Click Save.
- Copy the content of
OCAPIdata.json
within Data Type > Open Commerce API Settings. - Replace «client_id» with your client_id.
- Click Save.
Disable OCAPI 404 Response
- Navigate to Administration > Global Preferences > Feature Switches.
- Disable Enable OCAPI 404 Response Caching of Dynamic Content.
Import Metadata
You need to import the following metadata for the Bolt integration to work.
- Open the cartridge bundle.
- Navigate to the
metadata/Bolt-meta-import/Sites/RefArch
folder. - Rename the
RefArch
folder to be the same as the ID of your site. If you need to import metadata for multiple sites, take the following steps:- a. Copy and paste the
RefArch
folder to each site. - b. Rename those folders to be the same as the ID of corresponding sites.
- a. Copy and paste the
- Open the specific site folder and find the
library
folder. - Edit the
library/library.xml
file to change thelibrary-id
. If your site uses a private library, then remove thelibrary-id
attribute and its value. If your site uses a shared library, then replace the existinglibrary-id ‘RefArchSharedLibrary’
in the XML with your shared library id. - Save the
library.xml
file. - In the cartridge bundle, navigate to the
metadata
folder and compress theBolt-meta-import
folder to generate theBolt-meta-import.zip
file. - Navigate to Business Manager > Administration > Site Development > Site Import & Export.
- Under Import > Upload Archive, ensure that local is enabled.
- Select Choose File and select the
Bolt-meta-import.zip
file. - Select Upload.
- Once complete navigate to the Archives list and select the radio button corresponding to
Bolt-meta-import.zip
. - Select Import.
- Select OK from the confirmation box.
Custom Site Preferences
- Log into Business Manager.
- Navigate to Merchant Tools > Site Preferences > Custom Preferences.
- Ensure the preference group with the ID Bolt Payment Setting is available.
- Select Bolt Payment Setting and edit the attributes according to your Bolt account data. For each site, set the values for your site preferences as follows below:
Attribute | Datatype | Description |
---|---|---|
Enable Bolt Checkout | Boolean | Used to enable and disable Bolt payment in the site. |
API Key | String | The merchant account identifier you want to process the (transaction) request with. Get this from the Developers tab in Bolt’s Merchant Dashboard |
Signing Secret | String | This is used to verify the authenticity of requests coming from Bolt. Get this from the Developers tab in Bolt’s Merchant Dashboard. |
Publishable Key - Multi-step | String | Opens the Bolt Payment Popup typically on Shopping cart and product pages. The publishable key is a long string of lower and upper case letters and numbers that consists of three sections. Get this from the Administration > API or the Developers tab in the merchant dashboard. Be sure to use the Dashboard Division configured for Multi-step checkout. |
Display Bolt Checkout on the Cart Page | Boolean | Used to enable or disable the bolt checkout button on the cart page. |
Bolt Partner Merchant | String Enum | Used internally for Bolt to decide the merchant. Comes preset with default. Make sure it is not set to None. |
Bolt Environment | String Enum | You can set it to either Sandbox or Production. Default value set to Production . Make sure it is not set to None . |
Customizing Code
You do not need to modify the base SFRA cartridge for the Bolt integration to work. The file int_bolt_v2_sfra /int_bolt_v2
follows best practices recommended by Salesforce Commerce Cloud.
Checkout Buttons
To replace checkout buttons with Bolt buttons:
- Locate the Bolt checkout within
int_bolt_sfra/cartridge/templates/default/cart/boltButton.isml
. - Replace the
isinclude
of the checkout button template with Bolt template. - Add the contents of
/js/boltModalConfigure.js
to thecart.isml
template.
Example
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addCss('/css/cart.css');
assets.addJs('/js/boltModalConfigure.js');
</isscript>