Install Bold Checkout

Set up Bold Checkout on your Adobe Commerce or Magento Open Source store with a prebuilt platform connector and extension.

note

The Bold Checkout Extension supports users of both Adobe Commerce (formerly known as Magento 2) and Magento Open Source.

The following video shows an overview of the installation process, beginning at the Complete Bold Checkout onboarding step:

Process overview

This page includes instructions for setting up Bold Checkout on a single Adobe Commerce deployment. If you have more than one deployment or store, you must complete the full set of instructions for each store.

For example, if you have a development, staging, and production store, you must complete these steps three times, using the corresponding store URL each time.

caution

Local development stores MUST use a port-forwarding service, such as ngrok, Cloudflare Tunnel, or OpenVPN, to communicate with Bold Checkout.

Prerequisites

Before you connect your Adobe Commerce store with Bold Checkout, ensure you have the following:

• An Adobe Commerce account.
• An Adobe Commerce store using version 2.3 or later.
• A payment gateway associated with the store. Bold strongly recommends PPCP or Braintree.
  note

  PPCP is required when using the PayPal Checkout flow.

• Composer installed on your machine.
• Ensure that your browser does not have any settings enabled that block cookies, such as "Incognito Mode" or similar "Do Not Track" (DNT) settings. This is especially common when using Safari.

Configure security settings

Your store's security settings may prevent Bold from making calls to your store. Use the following sections to ensure Bold can communicate properly and securely with your store and Adobe Commerce.

Configure firewall settings

Many merchants have firewalls in place that restrict incoming and outgoing network traffic, allowing only a predefined set of IP addresses. The nature of a platform connector requires Bold to make calls to your server. For Bold's integrations to function, Bold domains must be able to make requests to your application.

To ensure proper operation, you must configure your firewall settings to allow requests from the following domains or IP addresses:

Domains

Calls from Bold to your platform connector come from one of the following domains and may be GET, PUT, or POST requests:

• https://api.boldcommerce.com
• https://checkout.boldcommerce.com
• https://adobe-commerce-connector.boldapps.net

IP Addresses

Calls from Bold to your platform connector come from the following IPs:

• 34.118.185.130
• 34.152.35.117

If you are using Bold Booster for PayPal, calls will also come from these additional IPs:

• 35.234.253.95
• 35.234.240.214
• 34.152.62.195
• 35.203.83.169
• 34.95.4.134
• 35.203.123.95
• 35.203.41.15
• 35.203.111.218
• 35.203.12.94
• 34.152.48.9
• 35.203.70.90
• 34.152.57.79
• 34.152.40.169
• 35.203.98.49
• 35.234.243.147
• 34.118.146.188
• 34.152.1.134
• 34.152.7.136
• 35.234.248.107
• 35.234.247.246
• 35.203.50.156
• 34.95.47.124
• 35.203.8.162
• 35.203.89.99
• 35.203.5.164
• 34.95.58.196
• 35.203.82.91
• 35.234.246.9
• 35.203.57.139
• 35.203.27.123
• 34.152.60.211
• 35.203.79.15

Configure user-agent settings

Each call from Bold to your store is accompanied by a User-Agent header with a value of Bold-API. If your security system filters traffic based on headers, ensure that calls marked with User-Agent=Bold-API are permitted.

Install the Bold Checkout Extension

The Bold Checkout Extension is an Adobe Commerce extension that must be installed on your store. For general instructions on how to install an extension, refer to the Adobe Experience League.

You can find the full extension on GitHub.

To install the extension on your store, select your configuration and follow the steps below.

1. Open your terminal and navigate to your project directory.
2. Run the following Composer command to install Bold Platform and Bold Checkout.

   composer require bold-commerce/module-checkout
3. Enable the extension using the following commands:

   php bin/magento setup:di:compile
   php bin/magento setup:upgrade
4. If your version of Adobe Commerce is between 2.3.0 and 2.3.3, you must apply the following patch. Bold created a patch fix to ensure that Adobe and Bold Checkout are incrementing the platform_friendly_id of each order in the same way. Apply the patch by using the following steps, which are different for on-premise and cloud stores.
   1. On-premise patch fix:
      1. Navigate to the root directory of your project. Run the following command:

      patch < vendor/bold-commerce/module-checkout/patches/MAGETWO-70885_2.3.3-p1.patch
   2. Cloud patch fix:
      1. Navigate to the root directory of your project. Create a directory called m2-hotfixes if one does not already exist using the following command:

         mkdir m2-hotfixes
      2. From the root directory, copy the patch file to the /m2-hotfixes directory using the following command:

         cp vendor/bold-commerce/module-checkout/patches/MAGETWO-70885_2.3.3-p1.patch m2-hotfixes
      3. Add, commit, and push the code changes using the following commands:

         git add m2-hotfixes/
         git commit -m "Apply patch"
         git push origin <branch-name>

For more information about applying patches on a Cloud instance, refer to the Adobe Experience League documentation.

Complete Bold Checkout onboarding

Complete the following steps to finish setting up Bold Checkout on your store.

1. In the Adobe Commerce admin, navigate to Stores > Configuration.
2. In the left-hand menu of the Configuration page, navigate to Sales > Checkout.
3. A Bold Checkout onboarding banner appears on the page, prompting you to set up your store. Click the Connect with Bold button.
4. A pop-up window appears. Follow the instructions in the window to complete the following steps:
   note

   Ensure that your browser does not have any settings enabled that block cookies, such as "Incognito Mode" or similar "Do Not Track" (DNT) settings. These settings can cause an error when attempting to complete this step.

   1. Create a Bold account.
   2. Install Bold Checkout.
   3. Add and configure a payment gateway.
   4. Create an API access token.
      caution

      Ensure that you save the API access token in a safe place. You will need it for the next step.

Configure the extension

Complete the following steps in your Adobe Commerce admin to configure Bold Checkout on your store.

1. If you are not already there, navigate to the Stores > Configuration page in the Adobe Commerce admin.
2. In the left-hand menu of the Configuration page, navigate to Sales > Checkout.
3. If you have multiple websites, find the Scope drop-down menu at the top of the page, and select the website you would like to configure. Skip this step if you are in Single Store Mode.
   note

   In Adobe Commerce versions earlier than 2.4, this drop-down is titled Store View.

   1. Expand the Bold Checkout Extension section and configure the following settings.
   1. In the Enable Bold Checkout drop-down menu, leave No selected.
   2. In the Bold Checkout Type drop-down menu, select Bold-Hosted (Standard). You can also select Dual if you'd like to use both Bold Checkout and your existing checkout concurrently.
   3. In the API Token field, enter your API access token.
   4. In the Bold Extension Email drop-down, select which existing Adobe Commerce user's email you would like to use.
   5. The Bold Extension Status says "Not Found" or "Inactive". This is expected.
4. (Optional) Expand the Bold Checkout Extension Advanced Setting section, and configure the following advanced settings.
   1. If you do not want to enable Bold Checkout for all traffic on your store, select a traffic routing method from the Enabled For drop-down menu.
   2. Do not change the Adobe Commerce Platform Connector API URL, API URL, or Checkout URL settings.
   3. If you want to send log information to your logging folder at var/log/debug.log, select Yes from the Enable Bold Checkout Requests Log.
5. Click the Save Config button at the top of the page.

Activate the extension

Complete the steps below to activate the extension on your Adobe Commerce store.

1. In your Adobe Commerce admin, navigate to System > Integrations.
2. In the list of integrations, find BoldPlatformIntegration{websiteId}. Click Activate.
   note

   If you only have one website, the integration is called BoldPlatformIntegration1. The suffix number changes depending on the number of stores you choose to integrate with Bold Checkout.

   
3. When prompted to allow access to requested resources, click Allow. The extension authenticates and completes installation.
   caution

   If a failure message appears, do not click Reauthorize. Instead, delete the integration from the Integrations page in the Adobe admin, return to the Stores > Settings > Configuration page, and re-save the configuration.

Enable Bold Checkout

When you're ready to enable Bold Checkout, complete the following steps.

1. In the Adobe Commerce admin, navigate to Stores > Configuration.
2. In the left-hand menu of the Configuration page, navigate to Sales > Checkout.
3. If you have multiple websites, find the Scope drop-down menu at the top of the page, and select the website you would like to configure. Skip this step if you are in Single Store Mode.
   note

   In Adobe Commerce versions earlier than 2.4, this drop-down is titled Store View.

   
4. Locate the Bold Checkout Extension section and expand it.
5. Update the Enable Bold Checkout drop-down menu to Yes.
6. Click Save Config.

Use the open source checkout templates

You can use the open source checkout templates to use Bold's pre-built and proven templates as the frontend of your checkout.

To get started, follow the instructions in Clone and configure the Open Source Checkout Templates.

Place a test order

To ensure everything is set up correctly, you can place a test order using development mode and your associated gateway's test card. Once development mode is off, you can also test your store configuration using real payment data.

Follow the steps below to place a test order in development mode.

1. From within Bold Checkout, navigate to Payment Options > Payment Gateways.
2. Ensure that Development mode is toggled on.
3. Navigate to your Adobe Commerce storefront, select an item, and proceed to checkout.
4. Use your payment gateway's associated test credit card to complete the order.
5. Once your order successfully completes, return to the Payment Gateways page in the Bold Checkout admin and turn Developer mode off.

Next steps

If you have any issues with your onboarding, submit a support ticket and add the Bold representative that is working with you as a support user on your store.

After setting up the standard Bold Checkout, there are several steps you can take to customize your store's checkout experience:

• Customize the look and feel of the checkout experience by adding CSS rules. Refer to Style the Checkout with CSS for detailed instructions.
• Tailor the frontend user experience by adding UI elements in strategic locations. Bold provides the Lightweight Frontend Experience (LiFE) elements for easy user interface customizations. Add LiFE elements using the Bold Checkout APIs or the Adobe admin.
• Create a custom domain name for the Bold Checkout page.