Skip to main content

Self-Hosted: Connect a Magento 1 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.

Self-hosted checkout is based on the prebuilt Open Source Checkout Templates. Once you set up the templates, you can customize your checkout experience from there.

This document includes all the steps you'll need to self-host Bold Checkout on your Magento 1 store.

Prerequisites

Before you connect your Magento 1 store with Bold Checkout, ensure you have the following:

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://magento-1-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, complete the following steps.

  1. On the Bold Account Center login page, click Create account. Create an Account Screenshot
  2. Complete the Name, Organization, Email, and Password fields. Click Next.
    note

    In this case, Organization usually refers to your company's name. This value is used to identify the stores associated with your account.

  3. Bold sends you an email to verify your email address. Verify email screen screenshot
    1. Find the message in your inbox and click Verify email. You will be directed back to Bold Account Center.
  4. Enroll in multi-factor authentication.
    note

    Bold requires you to enroll in multi-factor authentication in order to access the Bold Account Center. You can use an authenticator that either scans a QR code or that requires manually entering a code.

    MFA registration screenshot
    1. If you do not have one already, download an authenticator app (such as Google Authenticator, Microsoft Authenticator, 1Password, Authy, Duo, or others).
    2. In your authenticator app, scan the QR code or manually enter the authentication secret code. Save the authenticator entry.
    3. In your browser, click Continue.
    4. Enter the six-digit code from your authenticator app, and click Continue. Authenticate your account screenshot
  5. Add your first store. Add Store Screenshot
    note

    If your store is already registered in the Bold Account Center, reach out to the administrator of that store and request an invitation. You will receive an email with instructions for joining the store.

    1. Select your platform from the Platform drop-down menu.
    2. Enter your Store URL in the input box.
    3. Use the Currency drop-down to select the currency you want your store to use.
    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. Invite Users Screenshot
note

For help with Bold Account Center, refer to the Help Center.

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 Magento 1 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 Magento 1.
      When using the PayPal Checkout Flow, you must use PPCP as your payment gateway.

  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 Magento 1 platform, you must configure these settings to match your store settings.

      Name and Phone settings

      note

      You can also toggle the phone number requirement setting using the Update Phone Number Requirement endpoint.

    2. Click Save.

Add the platform connector in Bold Account Center

Add the Platform Connector for Magento 1 to your store by following the steps below:

  1. Within Bold Account Center, navigate to Launchpad, and click the Integrations tab.
  2. Click the Add button on the Platform Connector for Magento 1 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 Magento 1
  3. Review the required scope permissions, and click Approve to accept them.

Install and configure the Bold Checkout Extension on Magento 1

You must install Bold Checkout as a Magento 1 extension on your store.

Use the steps in this section to set up Bold Checkout on your Magento 1 store.

Add the Bold Checkout Extension to the Magento 1 store

Use the following steps to add the Bold Checkout Extension to your Magento 1 store:

  1. Navigate to the app/code/community location in your store's directory. Create a new folder titled Bold.

  2. Navigate to the Bold Checkout on Magento 1 repository. Download the repository contents (click the Code drop-down menu, and select Download ZIP).

  3. Unzip the downloaded directory.

  4. Copy the following directories to the app/code/community/Bold location in your store's directory that you created in Step 1.

    1. Checkout
    2. CheckoutIntegration
    3. CheckoutSelfHosted
  5. Navigate to the root directory (the parent directory of /app) and execute the following commands:

    cp ./app/code/community/Bold/Checkout/etc/Bold_Checkout.xml ./app/etc/modules/
    cp ./app/code/community/Bold/CheckoutIntegration/etc/Bold_CheckoutIntegration.xml ./app/etc/modules/
    cp .app/code/community/Bold/CheckoutSelfHosted/etc/Bold_CheckoutSelfHosted.xml .app/etc/modules/

    cp -r ./app/code/community/Bold/Checkout/design/* ./app/design/
    cp -r ./app/code/community/Bold/Checkout/locale/* ./app/locale/
    cp -r ./app/code/community/Bold/CheckoutIntegration/design/* ./app/design/
    cp -r ./app/code/community/Bold/CheckoutSelfHosted/design/* ./app/design/
    cp -r ./app/code/community/Bold/CheckoutSelfHosted/media/* ./media/
  6. When you're done, Bold contains three directories: Checkout, CheckoutIntegration, and CheckoutSelfHosted.

Configure the Bold Checkout Extension

Complete the following steps in your store's Magento 1 admin panel:

  1. Clear the cache by following the steps below:
    1. Navigate to System > Cache Management. A screenshot of the Cache Storage Management page in the Magento Admin Panel
    2. Click the Flush Magento Cache button.
    3. Click the Flush Cache Storage button, then click OK on the confirmation pop-up message.
  2. Navigate to System > Configuration, and click Checkout in the Sales section of the left-hand menu.
  3. In the Current Configuration Scope drop-down menu, select Main Website. Screenshot of configuration scope dropdown
  4. Expand the Bold Checkout Extension drop-down. Populate the API Token field using the API access token that you retrieved from the Bold Account Center. Screenshot of Bold Checkout Extension
  5. Click the Save Config button at the top-right corner of the page.
  6. Expand the Bold Checkout Extension Advanced Settings drop-down. Screenshot of Advanced Settings
    1. Select Self-Hosted (Bold templates) in the Bold Checkout Type drop-down menu. Three additional fields appear.
    2. Select either Three Page (Default) or One Page based on the desired checkout experience for your customers.
    3. To use your own template file, upload that file in the Self Hosted Checkout Template File field.
    4. To use an existing React application as the checkout, enter the URL for that app in the Self Hosted Checkout Experience Templates App URL field.
      note

      This field is helpful for template development because you can see your custom template in real time.

  7. Click the Save Config button at the top-right corner of the page.
  8. Expand the Bold Checkout Platform Connector Integrations drop-down. Click Authorize. Screenshot of authorize flow

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 Magento 1 frontend

The Bold Self-Hosted Checkout extension fully integrates with the basic Magento 1 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 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 Magento 1 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

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