Connect an Adobe Commerce store with Bold Checkout
The Platform Connector for Adobe Commerce supports users of both Adobe Commerce (formerly known as Magento 2) and Magento Open Source.
Bold provides a prebuilt platform connector for merchants who want to use Bold Checkout with their Adobe Commerce or Magento Open Source store. Follow the instructions outlined in this document to set up Bold Checkout on your store.
When prompted to Contact Bold with a request or certain information, reach out to the Bold Account Manager assigned to your store.
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.
Set up your Bold Account Center
Use the steps in the following sections to set up your account in the Bold Account Center.
Create an account in Bold Account Center
To create an account and connect your store in Bold Account Center, complete the following steps.
- On the Bold Account Center login page, click Create account.
- Complete the Name, Organization, Email, and Password fields. In this case, Organization usually refers to your company's name. This value is used to identify the stores associated with your account.
- Click Next. You are redirected to a new screen where you can add your first store.
- From the Platform drop-down menu, select the Custom option.
- Enter your Store URL and use the Currency drop-down to select the currency you want your store to use.
- Click Add store.
- In the pop-up dialog, you can invite new users to your organization or go to Launchpad, where you can manage your store.
Create an API access token
Now that you have logged in to the Bold Account Center and created a store, you can set up an API access token using the following steps:
From the Bold Account Center Launchpad, expand the left-hand menu and click API access tokens.
Click Create API access token.
Enter the API access token name, and select the scopes you need. The following screenshot shows the required scopes for an Adobe Commerce store:
Click Create. A dialog box appears and provides a shared secret and API access token. Be sure to save both in a secure location, as they will disappear when you close the dialog.
Click Done when you are finished.
Install Bold Checkout
Complete the following steps to add the Bold Checkout app to your store.
- Return to the Bold Account Center Launchpad.
- In the Available Bold apps section, click Add on the Checkout card.
- You are redirected to the Bold Checkout app admin.
Send a support request to Bold
At this point, Bold Commerce needs to perform some steps to set up your store to integrate with Adobe Commerce. To enable us to do so, contact Bold with a request for the following:
- To add your API access token to the Bold Checkout database. Include the store URL and API access token value in your request.
- To enable the three-page checkout experience on your store.
Configure Bold Checkout
Once Bold confirms your store is set up, use the following steps to set up Bold Checkout:
- Click Account >> Stored Credit Card. Note that you must use a real credit card, even when using a payment gateway in development mode.
- Click Payment options >> Payment gateways, and connect a payment gateway.
- You can connect a gateway in either production or development mode. Bold recommends first connecting a payment gateway in development mode so that you can ensure everything is set up correctly.
- Click Shipping >> Warehouse settings, and create a warehouse zone. This can be sample data and does not have to reflect an actual warehouse zone.
- Click Shipping >> Shipping zones, and create a shipping zone. This can be sample data and does not have to reflect an actual shipping zone.
- Click Payment options >> Tax settings, and create a tax zone. This can be sample data and does not have to reflect an actual tax zone.
- Click Settings >> General settings, and toggle the Use Public Order ID setting on.
- Verify that your store is using the three-page checkout experience. Navigate to Settings >> General Settings and scroll down to the Appearance section. The Three-page experience should be automatically selected, as shown in the following screenshot:
- If there are any fields that are set as Required on your Adobe Commerce store, you must set those fields as Required in Bold Checkout. For example, if the customer phone number is required on your Adobe Commerce store, set it as required within the Bold Commerce admin.
Add the integration in Bold Account Center
Before proceeding, contact Bold with a request to add the Platform Connector for Adobe Commerce to your store. It is not automatically available to all merchants.
Complete the following steps in Bold Account Center:
- Navigate to the Integrations tab of the Launchpad.
- Click the Add button on the Platform Connector for Adobe Commerce card.
- You are directed to a new screen. 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.
- Once redirected to the Launchpad, click Open on the Platform Connector for Adobe Commerce card. Another tab opens in your browser.
- Click the Credentials tab in the left-hand menu. Make note of the composer packages and integration credentials shown on this screen. You will need them for a later step.
Install and configure the Platform Connector for Adobe Commerce
Use the following sections to install the Platform Connector for Adobe Commerce on your store within the Adobe Commerce ecosystem.
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.
Complete the following steps to install the extension on your Adobe Commerce store:
- Open your terminal and run the following Composer command to install Bold Platform and Bold Checkout. This command is also provided to you in the Platform Connector for Adobe Commerce Credentials tab.
composer require bold-commerce/adobe-commerce-bold-checkout
- Enable the extension using the following commands:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
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 >> Settings >> Configuration.
In the Store View drop-down menu at the top of the page, select Main Website.note
This drop-down is titled Scope in Adobe Commerce version 2.4 and later.
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:
- 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, the admin user's email you would like to use.
- Input the callback URL and identity link URL provided by Bold.
- 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:
- If you do not want to enable Bold Checkout for all traffic on your store, select a method of selection 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 following steps to activate the extension on your Adobe Commerce store:
- In the Adobe Commerce admin, navigate to System >> Integrations.
- In the list of integrations, find
BoldPlatformIntegration. Click Activate.
- When prompted to allow access requested resources, click Allow. The extension authenticates and completes installation.
Place test order
Now you can place an order to ensure that everything has been set up correctly. After ensuring that your store is in developer mode, navigate to the storefront and complete a checkout using the associated gateway's test card.
- Open the Bold Checkout admin page.
- Navigate to the Payment Options >> Payment Gateways page. Turn "developer 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.
OPTIONAL: Once developer mode is OFF, you can also test your Adobe Commerce store configuration with real payment data.