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

1. Download the Bolt PWA backend cartridge from Bolt’s GitHub Repository.
2. Log into Salesforce Business Manager.
3. Navigate to Administration > Sites > Manage Sites and select the Settings tab.
4. Add int_bolt_pwa to the cartridge path.
5. 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

1. 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.
2. Then, navigate to Merchant Tools > Ordering > Payment Processors, create a new processor with ID BOLT_PAY.
3. 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

1. In Business Manager, navigate to Merchant Tools > Site Preferences > Custom Preferences.
2. 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

1. In Business Manager, navigate to Administration > Site Development > Open Commerce API Settings.
2. Navigate to metadata/ocapi folder.
3. Copy the contents of OCAPIshop.json within Shop Type > Open Commerce API Settings.
4. Replace <<client_id>> with your client_id.
5. Click Save.
6. Copy the content of OCAPIdata.json within Data Type > Open Commerce API Settings.
7. Select “Global (organization-wide)” from the Context Selection dropdown.
8. Replace <<client_id>> with your client_id.
9. 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

1. 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.

2. 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
   

3. 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(),
       })
   );
   

4. 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.

     1. Import Bolt component:

     import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
     

     2. Replace original checkout button with the Bolt checkout button:

        • Original Button Code
        • New Bolt Button Code

        <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

     1. Import Bolt component and necessary modules:

     import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
     

     2. Replace original checkout button with the Bolt checkout button:

        • Original Button Code
        • New Bolt Button Code

        <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>
        

5. 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

     1. Import Bolt component

     import BoltCheckout from '@salesforce/retail-react-app/app/components/bolt'
     

     2. For the desktop mode, find the element ModalBody and replace original checkout button with the Bolt checkout button within its content:

        • Original Button Code
        • New Bolt Button Code

        <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>
        

     3. For the mobile mode, find the element ModalFooter and replace original checkout button with the Bolt checkout button within its content:

        • Original Button Code
        • New Bolt Button Code

        <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>
        

Implementation complete.

For Shops Built with PWA Kit 2.x

1. Clone the Bolt PWA component to your local.

2. Copy the folder for-pwa-kit-2.x/bolt to your_pwa_kit_storefront_project_path/app/components.

3. 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
   

4. 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(),
       })
   );
   

5. 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.

     1. Import Bolt component:

     import {BoltCheckout} from '../../components/bolt'
     

     2. Replace original checkout button with the Bolt checkout button:

        • Original Button Code
        • New Bolt Button Code

        <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

     1. Import Bolt component and necessary modules

     import {BoltCheckout} from '../../../components/bolt'
     

     2. Replace original checkout button with the Bolt checkout button from

        • Original Button Code
        • New Bolt Button Code

        <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>
        

6. 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

     1. Import Bolt component

     import { BoltCheckoutPDP } from "../components/bolt";
     

     2. For the desktop mode, find the element ModalBody and replace original checkout button with the Bolt checkout button:

        • Original Button Code
        • New Bolt Button Code

        <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>
        

     3. For the mobile mode, find the element ModalFooter and replace original checkout button with the Bolt checkout button:

        • Original Button Code
        • New Bolt Button Code

        <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.