Connectors and Applications

To configure the settings of your checkout flows, you must install Connectors and create Applications.

Connectors

A Connector manages the communication between the merchant, Checkout, and third-party systems such as a payment service provider (PSP) or a gift card management system.

Checkout uses two types of Connectors: payment Connectors and gift card Connectors.

Checkout supports both Public Connectors and Organization Connectors (also called private Connectors) available in the Connect marketplace. Public Connectors are available for all Composable Commerce Projects, while Organization Connectors are Connectors that you can develop specifically for your Organization. Public Connectors can be developed either by commercetools (for example, Adyen and PayPal payment Connectors) or by third parties (for example, Stripe payment Connector).

Connectors determine which Payment Integration Types and payment methods are available.

Before creating and configuring your Applications, you must install at least one Connector from commercetools Connect because Connectors are required to set the Payment Integrations for the Application.

Payment Integration Types

Payment Integration Types determine how Checkout renders the Payment Integrations on the Checkout page of a specific Application. Checkout supports two Payment Integration Types: web components and drop-in.

The Payment Integration Types available for an Application depend on the Connector. If both types are available, only one can be active at a time, but you can set both up and switch between them as needed.

Payment Connectors

A payment Connector manages the communication between the merchant, Checkout, and the PSP. By using payment Connectors in your Applications, you can provide your customers with payment methods such as credit cards, Google Pay, and PayPal in your checkout flow.

To integrate with supported PSPs, you must use Public Connectors of type Payment Service Providers in the Connect marketplace.

To integrate with custom PSPs, you must create and install Organization Connectors based on this template.

Gift card Connectors BETA

A gift card Connector manages the communication between the merchant, Checkout, and the gift card management system. By using gift card Connectors in your Applications, you can provide your customers with the option of using gift cards as a payment method in your checkout flow.

To integrate with supported card management systems, you must use Public Connectors of type Gift Cards in the Connect marketplace.

To integrate with custom gift card management systems, you must create and install an Organization Connector for gift cards.

Applications

An Application lets you set a specific configuration for Checkout, such as country-specific or brand-specific checkout flows.

When creating an Application, you can configure some general settings, the user agreements, and the Payment Integrations.

Based on your business needs, you can create multiple Applications. For example, if you need different settings for different countries, you can create multiple Applications and set up user agreements, Payment Integrations, and other settings for each country.

Depending on the Checkout mode you are using, you can create two types of Applications:

• Complete Checkout: you can configure the general settings, activate the discount code functionality, add user agreements, and add Payment Integrations.

• Payment Only: you can configure only the general settings and add Payment Integrations.

You can create Applications of different types for the same Project.

Payment Integrations

A Payment Integration represents an Application configuration that combines the Connector, the Payment Integration Type, and the payment method. You can set multiple Payment Integrations for an Application.

For example, you can set a Payment Integration for your Application to use the Adyen payment Connector, the web components Payment Integration Type, and the credit card, PayPal, and Google Pay payment methods.
Additionally, you can set a Payment Integration for your Application to use a gift Card Connector, the web components Payment Integration Type, and the gift card payment method.

Create a Complete Checkout Application

1. In the Merchant Center main menu, select Checkout > Add application.

2. On the Add application page, click Add complete checkout.

3. On the Add application: Complete checkout page, follow these steps:

   1. In the General information section, do the following:

      • In Application name, enter a plain-text name for the Application.
      • In Application key, enter a unique identifier that contains 2-256 alphanumeric characters and special characters _-.
      • Optional: In Application description, enter a plain-text description for the Application.

   2. In the Application settings section, do the following:

      • In Logo URL, enter a valid URL of the logo that will be visible on your checkout page.

      • From Select countries, select the countries where the Application will be available.

      • In Origin URLs:

        • Optional: Click the toggle to allow all URLs to communicate with your Application. This is recommended for test purposes only.

        • In Specified origin URLs, enter the URLs of websites that you want to use the Application. Only the provided URLs can use Checkout.

          URLs must match the following pattern /^(https?:\/\/)?(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})\b(?::\d+)?(?!\/)$/i.
          For example, https://www.example.com or https://example.com:8080.

      • In Payment return URL, enter the URL to redirect customers to after they complete the payment.

      • To display the field for entering discount codes on your checkout page, keep the Activation of discount code function toggle in the activated position. Otherwise, deactivate it.

4. Click Save.

5. To add a user agreement, follow these steps:

   1. In the User agreement tab, click Add agreement and do the following:

      • In User agreement name, enter a plain-text name for the user agreement.
      • In User agreement text, enter the text for the user agreement that can include corresponding links (for example, terms and conditions).
      • From User agreement method, select if a mandatory checkbox should be displayed for the user agreement.

   2. Click Save. The order of user agreements in the list will be the same as displayed on your checkout page. To change the order, click Reorder, drag the agreements, and click Save.

   By default, user agreements are deactivated on creation. To activate the user agreement, click the Status toggle.

6. To add a Payment Integration, follow these steps:

   1. In the Payment integrations tab, click Add payment integration and do the following:

      • From Connector, select the payment Connector or gift card Connector that you installed from the Connect marketplace and that you want to use for the Payment Integration.

      • From Specification of the payments integration, select the Payment Integration Type you want to set up. If the selected Connector supports only one Payment Integration Type, the type will be preselected.

      • Depending on the Payment Integration Type, do the following:

        • If you selected Web components:
          • From Payment method, select the payment method that you want to activate.
          • In Payment integration name, enter a name for the Payment Integration. It will be displayed only in the Merchant Center.
          • Optional: In Payment integration conditions via predicates BETA, enter the Payment Integration predicate to determine the conditions for displaying the Payment Integration. Leave the field empty to always display the Payment Integration.
          • Optional: In Payment integration key BETA, enter a unique identifier that contains 2-256 alphanumeric characters and special characters _-. You need this key if you are using the Checkout Transactions API.
          • Click Save. A Payment integration ID BETA is generated automatically. You need this ID if you are using the Checkout Transactions API.
            Also, the first Payment Integration on the list will be the default Payment Integration on your checkout page. To change the order, click Manage order of payment integrations (frontend), drag the Payment Integrations into the desired order, and click Save.
        • If you selected Drop-in BETA:
          • In Drop-in integration name BETA, enter a name for the Payment Integration. It will be displayed only in the Merchant Center
          • Optional: In Payment integration key BETA, enter a unique identifier that contains between 2 and 256 alphanumeric characters and special characters _-. You need this key if you are using the Checkout Transactions API.
          • Click Save. A Payment integration ID BETA is generated automatically. You need this ID if you are using the Checkout Transactions API.
   By default, Payment Integrations are deactivated on creation. To activate the Payment Integration, click the Status toggle.

7. To activate the Application, click the Status toggle.

Create a Payment Only Application

1. In the Merchant Center main menu, select Checkout > Add application.

2. On the Add application page, click Add payment only.

3. On the Add application: Payment only page, follow these steps:

   1. In the General information section, do the following:

      • In Application name, enter a plain-text name for the Application.
      • In Application key, enter a unique identifier that contains 2-256 alphanumeric characters and special characters _-.
      • Optional: In Application description, enter a plain-text description for the Application.

   2. In the Application settings section, do the following:

      • From Select countries, select the countries where the Application will be available.

      • In Origin URLs:

        • Optional: Click the toggle to allow all URLs to communicate with your Application. This is recommended for test purposes only.

        • In Specified origin URLs, enter the URLs of websites that you want to use the Application. Only the provided URLs can use Checkout.

          URLs must match the following pattern /^(https?:\/\/)?(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})\b(?::\d+)?(?!\/)$/i.
          For example, https://www.example.com or https://example.com:8080.

4. Click Save.

5. To add a Payment Integration, follow these steps:

   1. In the Payment integrations tab, click Add payment integration and do the following:

      • From Connector, select the payment Connector or gift card Connector that you installed from the Connect marketplace and that you want to use for the Payment Integration.

      • From Specification of the payments integration, select the Payment Integration Type you want to set up. If the selected payment Connector supports only one Payment Integration Type, the type will be preselected.

      • Depending on the Payment Integration Type, do the following:

        • If you selected Web components:
          • From Payment method, select the payment method that you want to activate.
          • In Payment integration name, enter a name for the Payment Integration. It will be displayed only in the Merchant Center.
          • Optional: In Payment integration conditions via predicates BETA, enter the Payment Integration predicate to determine the conditions for displaying the Payment Integration. Leave the field empty to always display the Payment Integration.
          • Optional: In Payment integration key BETA, enter a unique identifier that contains 2-256 alphanumeric characters and special characters _-. You need this key if you are using the Checkout Transactions API.
          • Click Save. A Payment integration ID BETA is generated automatically. You need this ID if you are using the Checkout Transactions API.
            Also, the first Payment Integration on the list will be the default Payment Integration on your checkout page. To change the order, click Manage order of payment integrations (frontend), drag the Payment Integrations into the desired order, and click Save.
        • If you selected Drop-in BETA:
          • In Drop-in integration name BETA, enter a name for the Payment Integration. It will be displayed only in the Merchant Center
          • Optional: In Payment integration key BETA, enter a unique identifier that contains between 2 and 256 alphanumeric characters and special characters _-. You need this key if you are using the Checkout Transactions API.
          • Click Save. A Payment integration ID BETA is generated automatically. You need this ID if you are using the Checkout Transactions API.
   By default, Payment Integrations are deactivated on creation. To activate the Payment Integration, click the Status toggle.

6. To activate the Application, click the Status toggle.

Edit and delete an Application

To edit or delete an Application, select Checkout > Overview in the Merchant Center main menu. From the List of applications tab, you can manage Applications:

• To edit an Application, select it and edit the information on the settings page.
• To delete an Application, select it and click the Delete application icon on the settings page.