Skip to main content

Connect an Adobe Commerce store with Bold Checkout

info

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.

note

When prompted to Contact Bold with a request or certain information, reach out to the Bold Account Manager assigned to your store.

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.

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.

  1. On the Bold Account Center login page, click Create account.
  2. 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. Create an Account Screenshot
  3. Click Next. You are redirected to a new screen where you can add your first store. Add Custom Store Screenshot
    1. From the Platform drop-down menu, select the Custom option.
    2. Enter your Store URL and use the Currency drop-down to select the currency you want your store to use.
    3. Click Add store.
  4. In the pop-up dialog, you can invite new users to your organization or go to Launchpad, where you can manage your store. Invite Users Screenshot

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:

  1. From the Bold Account Center Launchpad, expand the left-hand menu and click API access tokens.

  2. Click Create API access token.

  3. Enter the API access token name, and select the scopes you need. The following screenshot shows the required scopes for an Adobe Commerce store:

    Adobe Commerce access token scopes

  4. 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.

  5. Click Done when you are finished.

Install Bold Checkout​

Complete the following steps to add the Bold Checkout app to your store.

  1. Return to the Bold Account Center Launchpad.
  2. In the Available Bold apps section, click Add on the Checkout card.
  3. Click Accept and Continue to accept the terms of service and privacy policy.
  4. 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:

  1. To add your API access token to the Bold Checkout database. Include the store URL and API access token value in your request.
  2. 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:

  1. Click Account >> Stored Credit Card. Note that you must use a real credit card, even when using a payment gateway in development mode.
  2. Click Payment options >> Payment gateways, and connect a payment gateway. Screenshot of Payment gateways page
    1. 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.
  3. Click Shipping >> Warehouse settings, and create a warehouse zone. This can be sample data and does not have to reflect an actual warehouse zone. Screenshot of Warehouse settings page
  4. Click Shipping >> Shipping zones, and create a shipping zone. This can be sample data and does not have to reflect an actual shipping zone. Screenshot of Shipping zones page
  5. 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. Screenshot of Tax Settings page
  6. Click Settings >> General settings, and toggle the Use Public Order ID setting on. Screenshot of the Public Order ID setting
  7. 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: Screenshot of Bold Checkout appearance section
  8. 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:

  1. Navigate to the Integrations tab of the Launchpad.
  2. Click the Add button on the Platform Connector for Adobe Commerce card.
  3. 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.
  4. Once redirected to the Launchpad, click Open on the Platform Connector for Adobe Commerce card. Another tab opens in your browser.
  5. 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. Platform Connector for Adobe Commerce credentials

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:

  1. 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
  2. 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:

  1. In the Adobe Commerce admin, navigate to Stores >> Settings >> Configuration. Screenshot of Adobe Commerce Stores menu, showing where to click Configuration

  2. 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.

    Screenshot of Configuration page drop-down selector

  3. In the left-hand menu of the Configuration page, navigate to Sales >> Checkout.

  4. Expand the Bold Checkout Integration section, and configure the Bold Checkout Integration: Screenshot of Bold Checkout Integration configuration

    1. In the Enable Bold Checkout drop-down menu, select Yes.
    2. In the API token field, enter your API access token.
    3. In the Bold Integration Email drop-down, the admin user's email you would like to use.
    4. Input the callback URL and identity link URL provided by Bold.
    5. The Bold Integration Status says "Not Found" or "Inactive". This is expected.

  5. (Optional) Expand the Bold Checkout Integration Advanced Setting section, and configure advanced settings: Screenshot of Bold Checkout Integration Advanced Setting

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

  6. Click the Save Config button.

Activate the extension​

Complete the following steps to activate the extension on your Adobe Commerce store:

  1. In the Adobe Commerce admin, navigate to System >> Integrations. Screenshot of Adobe Commerce System menu, showing where to find the Integrations page
  2. In the list of integrations, find BoldPlatformIntegration. Click Activate. Screenshot of Integrations page
  3. 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.

  1. Open the Bold Checkout admin page.
  2. Navigate to the Payment Options >> Payment Gateways page. Turn "developer mode" ON.
  3. Navigate to your Adobe Commerce storefront.
  4. Select an item and proceed to checkout.
  5. Use your payment gateway's associated test credit card to complete the order.
  6. Once your order successfully completes, return to the Payment Gateways page in the Bold Checkout admin and turn "developer mode" OFF.
note

OPTIONAL: Once developer mode is OFF, you can also test your Adobe Commerce store configuration with real payment data.