Installation Guide for Bold Checkout

Bold has created a custom Platform Connector to allow you to connect your store to Bold Checkout. This is available for both Adobe Commerce (formerly known as Magento 2) and Magento Open Source stores.

To connect Bold Checkout, you will need to create an account in Bold Account Center, and add the Platform Connector files to your store as an extension.

This article walks you through the setup process, step-by-step.

Prerequisites

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

An Adobe Commerce account.
A payment gateway associated with the store.
Composer installed on your store.

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 for Bold applications:

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

Bold's applications are hosted on Google Cloud Platform. If you prefer to configure your firewall to allow requests from a comprehensive list of IP addresses instead of domains, Google's official IP ranges are compatible with our applications.

Set up Bold Checkout

Create an account in Bold Account Center

To create an account and connect your store in Bold Account Center, please follow the steps below.

Navigate to the Bold Account Center Login Page.
Select Create account.
Complete the Name, Organization name, Email, and Password fields.
Note: The organization name will represent your company. You can add multiple stores under your organization in Account Center.
Select Next.
From the dropdown menu under Platform, select Adobe Commerce.
Enter your Store URL.
Note: Use your store's default URL.
Select your store Currency.
Select Add store.
A message will appear to confirm you've successfully added your first store. You can go to the Account Center Launchpad, or invite users to manage your store. For more information please visit, Invite or Deactivate a user in Account Center.

Create an API access token in Account Center

To set up an API access token in Account Center, please follow the steps below.

From within Account Center, expand the left-hand menu and select API access tokens.
Select Create API access token.
Enter the API access token name and select the scopes as shown in the screenshot below.
Select Create.
Note: You will now be provided with the your API credentials. The Shared Secret and API access token will disappear once the dialogue box closes. Save this information in a secure place. You will need this for a later step.
Select Done.

Install Bold Checkout

To install Bold Checkout from within Bold Account Center, follow the steps below.

In Bold Account Center, navigate to Launchpad.
In the Available Bold apps section, click Add under Bold Checkout.
Click Accept and Continue to agree to the terms of service and privacy policy.

Once complete, you will be redirected to the Bold Checkout admin.

Configure Bold Checkout

From within Bold Checkout, navigate to Payment options > payment gateways.
- To add a development gateway intended for testing, slide the toggle to the right to enable Development mode. Bold recommends first connecting a payment gateway in development mode so that you can ensure everything is set up correctly.
  Note: You will need to use a real credit card even when using a payment gateway in development mode. If you need to bypass this step, please reach out to our Customer Success team.
- To add a production payment gateway, toggle off Development mode, and set up a supported payment gateway in the Connect a payment gateway section. Bold recommends using either the PayPal Commerce Platform (PPCP) or Braintree payment gateways.
Navigate to Settings > General settings.
1. Scroll down to the Checkout Process section. If company name or phone number are required fields on your Adobe platform, you will need to to configure these settings to match your store settings.
2. Select Save.

Add the Platform Connector in Bold Account Center

Within Bold Account Center, navigate to Launchpad, and select the Integrations tab.
Click the Add button on the Platform Connector for Adobe Commerce card.
Note: If you have more than one store in Bold Account Center, a drop-down appears for you to select the desired store.
Review the required scope permissions, and click Approve to accept them.

Install and configure the Bold Checkout Extension on Adobe

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.

Use the steps in this section to set up Bold Checkout as an extension on your store.

Add the extension on your Adobe Commerce store

The Platform Connector for Adobe Commerce is considered an Adobe Commerce extension. For general instructions on how to install an extension, refer to the Adobe Experience League.

To install the extension on your store, please follow the steps below.

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

composer require bold-commerce/module-checkout

Enable the extension using the following commands:

bin/magento setup:upgrade

bin/magento setup:di:compile

(Optional) Apply the patch fix

Alert: If your version of Adobe Commerce is between 2.3.0 and 2.3.3, you must complete the steps outlined in this section.

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. The patch file is included in the adobe-commerce-bold-checkout package that you already installed.

Apply the patch by using the following steps, which are different for on-premise and cloud stores.

On-premise patch fix instructions

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

Cloud patch fix instructions

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

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.

Configure the extension

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

In the Adobe Commerce admin, navigate to Stores > Configuration.
If you have multiple stores, navigate to the Scope drop-down menu at the top of the page and select Main Website. Skip this step if you are in Single-Store Mode.
Note: This drop-down is titled Store View in Adobe Commerce versions earlier than 2.4.
In the left-hand menu of the Configuration page, navigate to Sales > Checkout.
Expand the Bold Checkout Integration section, and configure the Bold Checkout Integration.
Note: You will need to deselect the Use Default checkboxes to configure these fields.

In the Enable Bold Checkout drop-down menu, select Yes.
In the API token field, enter your API access token.
In the Bold Integration Email drop-down, enter the admin user's email you would like to use.
The Bold Integration Status says "Not Found" or "Inactive". This is expected.

Optional: Expand the Bold Checkout Integration Advanced Setting section, and configure advanced settings:

Note: Deselect the Use Default checkboxes to configure these fields.

Advanced Settings

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.
Do not change the M2 Platform Connector API Url setting.
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.

Click the Save Config button.

Activate the extension

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

In your Adobe Commerce admin, navigate to System > Integrations.
In the list of integrations, find BoldPlatformIntegration. Click Activate.
Note: If you only have one website this will say BoldPlatformIntegration1. The number will change depending on the number of stores you choose to integrate with Bold Checkout.
When prompted to allow access to the requested resources, click Allow. The extension authenticates and completes installation.
Note: If a failure message appears, do not click Reauthorize. You will need to delete the integration from the Integrations page in the Adobe admin and re-save the information you entered in Stores > Settings > Configuration.

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 Adobe Commerce store configuration using real payment data.

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

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

Next steps

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

Tailor the frontend user experience by adding UI elements in strategic locations. Add Lightweight Frontend Experience (LiFE) elements in the Adobe admin.
Create a custom domain name for the Bold Checkout page.