📍 Bolt Help / Platforms / Salesforce Commerce Cloud / SFCC V2 - Managed Checkout / Integrate Bolt with Salesforce Composable Storefront Integrate Bolt with Salesforce Composable Storefront Learn how to integrate Bolt with your Salesforce Composable Storefront for headless commerce. Page Contents Click to expand. 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 your client_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 your client_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(), }) ); 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: 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 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: 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> 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: 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> 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 Clone the Bolt PWA component to your local. Copy the folder for-pwa-kit-2.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 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: 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 Import Bolt component and necessary modules import {BoltCheckout} from '../../../components/bolt' 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> 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: 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> 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.