This guide describes how to integrate Bolt into the Salesforce Composable Storefront for headless commerce.
Before You Start
- You must already use V2 of the SFCC/SFRA plugin with OCAPI.
- You have configured SFCC within Business Manager and the Bolt Admin Dashboard.
Step 1: Install Cartridge
- Download the Bolt PWA backend cartridge from Bolt’s GitHub Repository.
- Log into Salesforce Business Manager.
- Navigate to Administration > Sites > Manage Sites and select the Settings tab.
- Add
int_bolt_pwa
to the cartridge path. - Unzip the Bolt cartridge and upload it. For detailed instructions, see Upload Code for SFRA.
Step 2: Configure backend site setting in Business Manager
The next steps will help you configure metadata, site preferences, payment methods, and OCAPI .
Import Metadata
- In Salesforce Business Manager, navigate to Administration > Site Development > Import & Export and import the
metadata/bolt-meta-import/meta/system-objecttype-extensions.xml
from the Bolt Github Repository. - Then, navigate to Merchant Tools > Ordering > Payment Processors, create a new processor with ID
BOLT_PAY
. - Finally, go to Merchant Tools > Ordering > Import & Export, and import the
metadata/bolt-meta-import/sites/RefArch/payment-methods.xml
file from the Bolt Github Repository.
Configure Site Preferences
- In Business Manager, navigate to Merchant Tools > Site Preferences > Custom Preferences.
- Set the following values in the preference group: Bolt Payment Setting - Managed Checkout:
Setting Value Enable Bolt Checkout Yes. API Key Your Bolt API key. Signing Secret Your Bolt signing secret. Publishable Key - Multistep Your Bolt merchant division specific value. The publishable key is a long string of lower and upper case letters and numbers that consists of three sections. Publishable Key - Back Office Leave empty. Bolt Environment String Enum used to switch between different Bolt environment endpoint hostnames. Select either Sandbox, Staging or Production. Display Bolt Checkout on the Cart Page Yes. Display Bolt Checkout for Back Office payments No. Enable Bolt SSO No. Enable Product Page Checkout No. Bolt Partner Merchant None. Bolt Merchant Division ID The unique ID associated with the merchant Bolt Account division. SFCC Base Version 6.0.0
Configure Open Commerce API Settings
- In Business Manager, 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 yourclient_id
. - Click Save.
- Copy the content of
OCAPIdata.json
within Data Type > Open Commerce API Settings. - Select “Global (organization-wide)” from the Context Selection dropdown.
- Replace
<<client_id>>
with yourclient_id
. - Click Save.
Payment Method
Ensure Bolt Payments is enabled by navigating to Merchant Tools > Ordering > Payment Methods.
BOLT_PAY
should be enabled and the payment processor should appear configured.
Step 3: Install Bolt PWA component
Install the proper PWA component for you shop, based on which PWA kit your shop uses:
- Jump to instructions for shops built with PWA kit 3.x
- Jump to instructions for shops built with PWA kit 2.x
For Shops Built with PWA Kit 3.x
-
Clone the Bolt PWA component to locally, then copy the folder
for-pwa-kit-3.x/bolt to your_pwa_kit_storefront_project_path/app/components
. -
Update API access by adding these values to the Scopes field of your SLAS Client:
sfcc.custom_objects sfcc.session_bridge sfcc.shopper-custom_objects
-
Complete the configuration files:
- To update the SSR config, locate the file
your_pwa_kit_storefront_project_path/app/ssr.js
and set the HTTP security headers with the Bolt domains (*.bolt.com
and*.bugsnag.com
):
app.use( helmet({ contentSecurityPolicy: { useDefaults: true, directives: { "img-src": [ "'self'", "*.commercecloud.salesforce.com", "*.bolt.com", "data:", ], "script-src": [ "'self'", "'unsafe-eval'", "storage.googleapis.com", "*.bolt.com", "*.bugsnag.com", ], "connect-src": [ "'self'", "api.cquotient.com", "*.bolt.com", "*.bugsnag.com", ], "frame-src": [ "'self'", "*.bolt.com", "*.bugsnag.com", ], "object-src": [ "'self'", "*.bolt.com", "*.bugsnag.com", ], // Do not upgrade insecure requests for local development "upgrade-insecure-requests": isRemote() ? [] : null, }, }, hsts: isRemote(), }) );
- To update the SSR config, locate the file
-
Enable the Bolt checkout button on the cart page:
-
For the desktop mode, locate the file
your_pwa_kit_storefront_project_path/app/pages/cart/index.jsx
.- Import Bolt component:
import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
-
Replace original checkout button with the Bolt checkout button:
<GridItem> <Stack spacing={4}> <OrderSummary htmlowPromoCodeForm={true} isEstimate={true} basket={basket} /> <Box display={{base: 'none', lg: 'block'}}> <CartCta /> </Box> </Stack> </GridItem>
<GridItem> <Stack spacing={4}> <OrderSummary showPromoCodeForm={true} isEstimate={true} basket={basket} /> <Box display={{base: 'none', lg: 'block'}}> <BoltCheckout basket={basket} navigate={navigate} /> </Box> </Stack> </GridItem>
-
For the mobile mode, locate the file
your_pwa_kit_storefront_project_path/app/pages/cart/partials/cart-cta.jsx
- Import Bolt component and necessary modules:
import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
-
Replace original checkout button with the Bolt checkout button:
<Fragment> <Button as={Link} to="/checkout" width={['95%', '95%', '95%', '100%']} marginTop={[6, 6, 2, 2]} mb={4} rightIcon={<LockIcon />} variant="solid" > <FormattedMessage defaultMessage="Proceed to Checkout" id="cart_cta.link.checkout" /> </Button> <Flex justify={'center'}> <VisaIcon height={8} width={10} mr={2} /> <MastercardIcon height={8} width={10} mr={2} /> <AmexIcon height={8} width={10} mr={2} /> <DiscoverIcon height={8} width={10} mr={2} /> </Flex> </Fragment>
<Fragment> <BoltCheckout /> <Flex justify={'center'}> <VisaIcon height={8} width={10} mr={2} /> <MastercardIcon height={8} width={10} mr={2} /> <AmexIcon height={8} width={10} mr={2} /> <DiscoverIcon height={8} width={10} mr={2} /> </Flex> </Fragment>
-
-
Enable the Bolt checkout button on the add-to-cart model of product page:
-
Locate the file
your_pwa_kit_storefront_project_path/app/hooks/use-add-to-cart-modal.js
- Import Bolt component
import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
-
For the desktop mode, find the element ModalBody and replace original checkout button with the Bolt checkout button within its content:
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: 'View Cart', id: 'add_to_cart_modal.link.view_cart' })} </Button> <Button as={Link} to="/checkout" width="100%" variant="outline" rightIcon={<LockIcon />} > {intl.formatMessage({ defaultMessage: 'Proceed to Checkout', id: 'add_to_cart_modal.link.checkout' })} </Button> </Stack>
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: 'View Cart', id: 'add_to_cart_modal.link.view_cart' })} </Button> <BoltCheckout boltType="pdp" /> </Stack>
-
For the mobile mode, find the element ModalFooter and replace original checkout button with the Bolt checkout button within its content:
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: 'View Cart', id: 'add_to_cart_modal.link.view_cart' })} </Button> <Button as={Link} to="/checkout" width="100%" variant="outline" rightIcon={<LockIcon />} > {intl.formatMessage({ defaultMessage: 'Proceed to Checkout', id: 'add_to_cart_modal.link.checkout' })} </Button> </Stack>
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: 'View Cart', id: 'add_to_cart_modal.link.view_cart' })} </Button> <BoltCheckout boltType="pdp" pos="mobile" /> </Stack>
-
For Shops Built with PWA Kit 2.x
-
Clone the Bolt PWA component to your local.
-
Copy the folder
for-pwa-kit-2.x/bolt
toyour_pwa_kit_storefront_project_path/app/components
. -
Update API access by adding these values to the Scopes field of your SLAS Client:
sfcc.custom_objects sfcc.session_bridge sfcc.shopper-custom_objects
-
Update the SSR config by locating the file
your_pwa_kit_storefront_project_path/app/ssr.js
. Then, set the HTTP security headers with Bolt domains (*.bolt.com
and*.bugsnag.com
).app.use( helmet({ contentSecurityPolicy: { useDefaults: true, directives: { "img-src": [ "'self'", "*.commercecloud.salesforce.com", "*.bolt.com", "data:", ], "script-src": [ "'self'", "'unsafe-eval'", "storage.googleapis.com", "*.bolt.com", "*.bugsnag.com", ], "connect-src": [ "'self'", "api.cquotient.com", "*.bolt.com", "*.bugsnag.com", ], "frame-src": [ "'self'", "*.bolt.com", "*.bugsnag.com", ], "object-src": [ "'self'", "*.bolt.com", "*.bugsnag.com", ], // Do not upgrade insecure requests for local development "upgrade-insecure-requests": isRemote() ? [] : null, }, }, hsts: isRemote(), }) );
-
Enable the Bolt checkout button on the cart page.
-
For the desktop mode, locate the file
your_pwa_kit_storefront_project_path/app/pages/cart/index.jsx
.- Import Bolt component:
import {BoltCheckout} from '../../components/bolt'
-
Replace original checkout button with the Bolt checkout button:
<Stack spacing={4}> <OrderSummary showPromoCodeForm={true} isEstimate={true} /> <Box display={{base: 'none', lg: 'block'}}> <CartCta /> </Box> </Stack>
<Stack spacing={4}> <OrderSummary showPromoCodeForm={true} isEstimate={true} /> <Box display={{base: 'none', lg: 'block'}}> <BoltCheckout /> </Box> </Stack>
-
For the mobile mode, locate the file
your_pwa_kit_storefront_project_path/app/pages/cart/partials/cart-cta.jsx
- Import Bolt component and necessary modules
import {BoltCheckout} from '../../../components/bolt'
-
Replace original checkout button with the Bolt checkout button from
<Fragment> <Button as={Link} to="/checkout" width={['95%', '95%', '95%', '100%']} marginTop={[6, 6, 2, 2]} mb={4} rightIcon={<LockIcon />} variant="solid" > <FormattedMessage defaultMessage="Proceed to Checkout" id="cart_cta.link.checkout" /> </Button> <Flex justify={'center'}> <VisaIcon height={8} width={10} mr={2} /> <MastercardIcon height={8} width={10} mr={2} /> <AmexIcon height={8} width={10} mr={2} /> <DiscoverIcon height={8} width={10} mr={2} /> </Flex> </Fragment>
<Fragment> <BoltCheckout /> <Flex justify={'center'}> <VisaIcon height={8} width={10} mr={2} /> <MastercardIcon height={8} width={10} mr={2} /> <AmexIcon height={8} width={10} mr={2} /> <DiscoverIcon height={8} width={10} mr={2} /> </Flex> </Fragment>
-
-
Enable the Bolt checkout button on the add-to-cart model of product page.
-
Locate the file
your_pwa_kit_storefront_project_path/app/hooks/use-add-to-cart-modal.js
- Import Bolt component
import { BoltCheckoutPDP } from "../components/bolt";
-
For the desktop mode, find the element
ModalBody
and replace original checkout button with the Bolt checkout button:<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: 'View Cart', id: 'add_to_cart_modal.link.view_cart' })} </Button> <Button as={Link} to="/checkout" width="100%" variant="outline" rightIcon={<LockIcon />} > {intl.formatMessage({ defaultMessage: 'Proceed to Checkout', id: 'add_to_cart_modal.link.checkout' })} </Button> </Stack>
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: "View Cart", id: "add_to_cart_modal.link.view_cart", })} </Button> <BoltCheckoutPDP pos="normal" /> </Stack>
-
For the mobile mode, find the element ModalFooter and replace original checkout button with the Bolt checkout button:
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: 'View Cart', id: 'add_to_cart_modal.link.view_cart' })} </Button> <Button as={Link} to="/checkout" width="100%" variant="outline" rightIcon={<LockIcon />} > {intl.formatMessage({ defaultMessage: 'Proceed to Checkout', id: 'add_to_cart_modal.link.checkout' })} </Button> </Stack>
<Stack spacing="4"> <Button as={Link} to="/cart" width="100%" variant="solid"> {intl.formatMessage({ defaultMessage: "View Cart", id: "add_to_cart_modal.link.view_cart", })} </Button> <BoltCheckoutPDP pos="mobile" /> </Stack>
-
Implementation Complete
Your implementation is now complete and you should see the Bolt Checkout Button in the place of previous checkout buttons.