Skip to main content

Self-Hosted: Connect an Adobe Commerce store

If you need full customization, or full control over how your checkout looks and behaves, you may want to self-host your Bold Checkout implementation.

note

The Bold-hosted checkout on Adobe Commerce uses the pre-built, optimized, three page checkout. Refer to Bold-Hosted: Connect an Adobe Commerce store for instructions on setting up Bold-hosted checkout.

There are two kinds of self-hosted Bold Checkout implementations, based on the intended frontend user experience:

  • Adobe Frontend — The merchant retains the current checkout experience and swaps out existing backend functionality for Bold Checkout. Bold provides only the payments section of the checkout.
  • Open Source Checkout Templates — The merchant uses the prebuilt Bold Checkout three page template and customizes the checkout experience from there.

Prerequisites​

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

  • An Adobe Commerce account and associated Adobe Commerce or Magento Open Source store.
    note

    Your store must be on Adobe Commerce version 2.4 or later.

  • A payment gateway associated with your store.
  • Composer installed on your store.
  • An SFTP client with a connection to your store's server.

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:
  • https://api.boldcommerce.com
  • https://checkout.boldcommerce.com
  • https://adobe-commerce-connector.boldapps.net

Set up Bold Checkout​

Use the following sections to set up Bold Checkout.

Create an account in Bold Account Center​

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

  1. Navigate to the Bold Account Center Login Page.
  2. Click Create account. Screenshot of Bold Account Center Login page
  3. Complete the Name, Organization name, Email, and Password fields.
    note

    The organization name represents your company. You can add multiple stores under your organization in Account Center.

  4. Click Next.
  5. Add your first store. Add your first store
    1. From the dropdown menu under Platform, select Custom.
    2. Enter your Store URL. Use your store's default URL.
    3. Select your store Currency.
    4. Click Add store.
  6. A message appears to confirm you've successfully added your first store. You can now go to the Account Center Launchpad, or invite users to manage your store. For more information, refer to Invite or Deactivate a user in Account Center. Success message

Create an API access token​

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

  1. From within Account Center, 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 as shown in the screenshot below. Adobe scopes
  4. Click Create. A dialog box appears and provides a shared secret and API access token.
    caution

    Be sure to save the shared secret and API access token in a secure location, as they will disappear when you close the dialog.

    You will use the shared secret and API access token to configure Adobe Commerce to call Bold Checkout.
  5. Click Done.

Install Bold Checkout​

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

  1. In Bold Account Center, navigate to Launchpad.
  2. In the Available Bold apps section, click Add under Bold Checkout.
  3. Click Accept and Continue to agree to the terms of service and privacy policy.
  4. Once complete, you are redirected to the Bold Checkout admin.

Configure Bold Checkout​

Configure Bold Checkout by following the steps below:

  1. From within Bold Checkout, navigate to Payment options > Payment gateways. Payment gateway page
    1. 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.
    2. 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 strongly recommends using PayPal Complete Payments (PPCP) or Braintree as payment gateways with Adobe Commerce. You will not be charged Bold Checkout fees when these platforms.
  2. 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 must configure these settings to match your store settings. Name and Phone settings
    2. Click Save.

Add the platform connector in Bold Account Center​

Add the Platform Connector for Adobe Commerce to your store by following the steps below:

  1. Within Bold Account Center, navigate to Launchpad, and select the Integrations tab.
  2. 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.

    Screenshot of integrations page, featuring Platform Connector for Adobe Commerce
  3. 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.

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​

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

  1. 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
  2. Enable the extension using the following commands:
    bin/magento setup:upgrade
    bin/magento setup:di:compile

Add the self-hosted checkout extension​

If you want to self-host your Bold-powered checkout experience on Adobe Commerce, you must install an additional extension.

Reach out to Bold and request the Adobe Commerce Self-Hosted Bold Checkout files.

Adding the files to your instance depends on your method of deployment. The following steps outline how to add the extension files using an SFTP client:

  1. Unzip the files, if necessary.
  2. Using your SFTP client with a connection to your store's server, copy the extracted files to the app/code/Bold/CheckoutSelfHosted/ location in your store's directory.
  3. Enable the extension using the following command:
    bin/magento setup:upgrade
    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 > Configuration. Configuration menu screenshot
  2. If you have multiple websites, find the 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
  3. In the left-hand menu of the Configuration page, navigate to Sales > Checkout. Scope dropdown screenshot
  4. Expand the Bold Checkout Integration section, and configure your integration.
    note

    You must deselect the Use Default checkboxes on any fields you wish to configure.

    Bold Checkout integration settings in Adobe admin
    1. In the Enable Bold Checkout drop-down menu, select Yes.
    2. In the Bold Checkout Type drop-down menu, select one of the Self-Hosted options.
      1. Choose Self-Hosted (Magento storefront) if you want to use your existing built-in checkout for the frontend.
      2. Choose Self-Hosted (React application) if you want to replace your existing checkout with Bold Checkout's Open Source Checkout Templates.
    3. In the API token field, enter your API access token.
    4. In the Bold Integration Email drop-down, select which existing Adobe Commerce user's email you would like to use.
    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. Bold Checkout integration settings in Adobe admin
    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 M2 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.
    4. Click the Save Config button.
  6. In the Self Hosted Checkout Experience Templates App URL field, add your local app URL (i.e. http://localhost:8080/).

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

Set up your checkout frontend​

You have two options for your checkout frontend: use your existing frontend, or use Bold's Open Source Checkout Templates.

Use the existing Adobe frontend​

The Bold Self-Hosted Checkout extension fully integrates with the Adobe Commerce Luma theme.

If you use a different or a custom theme, you may need to do some troubleshooting.

After completing all of the above steps, test out your checkout using the steps in Place a test order.

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.

Follow the instructions in the Clone and configure the Open Source Checkout Templates section of the Developer Docs.

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.

  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.