Documentation

Introduction to Checkout

Learn about the key features of Checkout and how to set it up.

  • After completing this page, you should be able to:

    • Describe the key features of Checkout.
    • Set up and activate Checkout.

    • Checkout empowers retailers and brands to craft exceptional checkout experiences. Its flexibility supports existing and future touchpoints, transforming them into valuable sales opportunities.

    Checkout contains the following key features:

    • Seamless integration: use Checkout with Frontend or any other frontend solution (React.js, Vue.js, Svelte.js, Solid.js, etc.) for accelerated time-to-market.
    • Pre-built payment solutions: access trusted payment gateways out-of-the-box.
    • Streamlined API: reduce 50 API calls down to 3 compared to traditional methods by leveraging the power of Composable Commerce.
    • Managed infrastructure: benefit from scalable and secure infrastructure.
    • Customization & localization: tailor the checkout experience with local currencies, regional tax calculations, and multi-language support.
    • Real-time event messages: subscribe to event messages for real-time feedback on checkout activities, enabling data-driven improvements.

    Checkout in the ecosystem

    Before diving into Checkout, let's briefly recap the ecosystem:

    • commercetools Composable Commerce: a modular digital commerce application built on MACH principles, providing businesses with limitless flexibility and complete control over their customer-facing layer.
    • Frontend: a headless application offering a comprehensive toolkit for creating, optimizing, and customizing digital storefronts quickly and efficiently.
    • Connect: a self-service marketplace for installing certified integrations and an integration framework for partners to build cutting-edge solutions. Checkout seamlessly integrates with these components, enabling businesses to build a truly agile and future-proof commerce architecture.

    Two Checkout modes

    Checkout can be used in the following modes:

    • Complete Checkout: power your entire checkout experience with our comprehensive solution. This mode provides everything you need for your checkout, including:

      • Streamlined checkout flow for increased conversions
      • Pre-built UI components for faster time-to-market
      • Secure and compliant with Payment Card Industry Data Security Standard (PCI DSS)

    • Payment Only mode: maintain full control over your custom checkout flow while tapping into the robust payment integrations of Checkout. You handle the checkout experience, we securely manage the payment service provider integrations. This mode has the following benefits:

      • Leverage existing checkout investments or build your own checkout experience

      • Use the same prebuilt payment integration for both Complete Checkout and Payment Only

      • Access prebuilt payment integrations

    Let’s inspect what you need to get up and running with Checkout.

    Prerequisites

    • An active commercetools Composable Commerce Project (it can be a trial Project).

    Steps

    After you've completed the prerequisites, follow these steps:

    1. Install the Sample Payment Connector. To do this, navigate to My Profile > Organizations & teams > {Select Organization} > Connect. In Search connector type, enter Sample payment connector for checkout, click Install, then follow the installation prompts. The following are the required configuration fields you need to provide for the Sample Connector:
    FieldDescriptionExpected value
    CTP_API_URLComposable Commerce API URLhttps://api.{region}.commercetools.com
    CTP_AUTH_URLAuthentication URLhttps://auth.{region}.commercetools.com
    CTP_CLIENT_IDAPI client ID for the Sample Payment. This API client must have the following scopes:manage_payments, view_sessions, view_api_clients, manage_orders, introspect_oauth_tokens, manage_checkout_payment_intents
    CTP_JWKS_URLJSON Web Key (JWK) URLhttps://mc-api.{region}.commercetools.com/.well-known/jwks.json
    CTP_JWT_ISSUERJSON Web Token (JWT) Issuer for JWT validationhttps://mc-api.{region}.commercetools.com
    CTP_PROJECT_KEYComposable Commerce Project keyexample-project-key
    CTP_SESSION_URLSession API URLhttps://session.{region}.commercetools.com
    CTP_CLIENT_SECRETComposable Commerce API client secretya_bWf_example-Secret4jtiVu_j_Qzasu
    1. Create a Checkout application. In the Merchant Center, go to Checkout > Add Application > Add complete checkout and complete the fields. In the origin URLs field, enter the domain(s) where your code will be hosted on.
    2. Add a Payment Method to Checkout. In your Checkout configuration, navigate to Payment method via Connect > Add payment method. Select the sample payment Connector, the payment method, and provide a name.
    3. Activate the Checkout Application by setting the Status toggle to Activated.

    Ok great, nice work! Let's do a quick knowledge check before we continue.

    Test your knowledge