Skip to main content

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.

Bold Booster for PayPal vs. full Bold Checkout​

Bold Booster for PayPal is a more lightweight alternative to Bold Checkout. Use this table to choose which option fits your use case.

Bold Booster for PayPalBold Checkout
Use Bold Checkout functionalityYes, payment functionality only.Yes.
Replaces existing checkoutNo.Yes.
Frontend interfaceUse your existing experience, with the addition of Bold's payment interface.Bold's three page or one page checkout experience.
Development effortLow or none — Bold cleanly adds the payment interface without changing the rest of the experience.Low or none — using the pre-built solution keeps code requirements low.
Integration supportRetain all integrations.Retain nonvisual integrations.
Customization optionsMerchant retains full control of behavior of checkout interface.Lightweight customization using Checkout LiFE and CSS.

To install Bold Booster for PayPal instead, refer to the Bold Booster for PayPal help.

Process overview​

This page includes instructions for setting up full 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.

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

Prerequisites​

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

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:

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

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. Configuration menu screenshot
  2. In the left-hand menu of the Configuration page, navigate to Sales > Checkout. Adobe checkout section
  3. A Bold Checkout onboarding banner appears on the page, prompting you to set up your store. Click the Connect with Bold button. Connect with Bold onboarding 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. Configuration menu screenshot
  2. In the left-hand menu of the Configuration page, navigate to Sales > Checkout. Adobe checkout section
  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.

    Scope dropdown screenshot 1. Expand the Bold Checkout Extension section and configure the following settings. Screenshot of configurations for standard checkout
    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. Screenshot of advanced configurations for standard checkout
    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. Screenshot of integrations menu
  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.

    Screenshot of integrations list
  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. Configuration menu screenshot
  2. In the left-hand menu of the Configuration page, navigate to Sales > Checkout. Adobe checkout section
  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.

    Scope dropdown screenshot
  4. Locate the Bold Checkout Extension section and expand it.
  5. Update the Enable Bold Checkout drop-down menu to Yes. Enable Bold Checkout drop-down
  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: