Checkout Browser SDK

<script>
  (function (w, d, s) {
    if (w.ctc) {
      return;
    }
    var js,
      fjs = d.getElementsByTagName(s)[0];
    var q = [];
    w.ctc =
      w.ctc ||
      function () {
        q.push(arguments);
      };
    w.ctc.q = q;
    js = d.createElement(s);
    js.type = 'text/javascript';
    js.async = true;
    js.src =
      'https://unpkg.com/@commercetools/checkout-browser-sdk@latest/browser/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script');
  ctc('checkoutFlow', {
    projectKey: '{projectKey}',
    region: '{region}',
    sessionId: '{sessionId}',
    logInfo: true, // Recommended for debugging during development.
    logWarn: true, // Recommended for debugging during development.
    logError: true, // Recommended for debugging during development.
  });
</script>

import { checkoutFlow } from '@commercetools/checkout-browser-sdk';

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  logInfo: true, // Recommended for debugging during development.
  logWarn: true, // Recommended for debugging during development.
  logError: true, // Recommended for debugging during development.
});

import { checkoutFlow } from '@commercetools/checkout-browser-sdk';

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  locale: `{locale}`,
  logInfo: true,
  logWarn: true,
  logError: true,
  ... // Other configuration properties.
});

import { paymentFlow } from '@commercetools/checkout-browser-sdk';

paymentFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  locale: `{locale}`,
  logInfo: true,
  logWarn: true,
  logError: true,
  ... // Other configuration properties.
});

import { paymentFlow, reloadPaymentMethods } from '@commercetools/checkout-browser-sdk';

reloadPaymentMethods();

  <button data-ctc-selector="paymentButton">Proceed with payment</button>
  <div data-ctc-selector="vendorPaymentButton"></div>

  <script>
    paymentFlow({
      projectKey: '{projectKey}',
      region: '{region}',
      sessionId: '{sessionId}',
      onInfo: (message) => {
        if (message.code === 'payment_method_selection_confirmation') {
          const {
            method: { hasVendorButton, type },
          } = message.payload as {
            method: { type: string; hasVendorButton: boolean };
          };
          const paymentButton = document.querySelector('[data-ctc-selector="paymentButton"]');
          if (paymentButton) {
            paymentButton.style.display = hasVendorButton ? 'none' : 'block';
          }
        }
      },
    });
  </script>

{
  areTermsAndConditionsPending ? (
    <span data-ctc-selector="termsAndConditionsPending" />
  ) : null;
}

import { paymentFlow } from '@commercetools/checkout-browser-sdk';

paymentFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  locale: `{locale}`,
  logInfo: true,
  logWarn: true,
  logError: true,
  onError: (error) => {
    switch (error.code) {
      case 'payment_method_loading_error':
        // Store the number of failed payment integrations on the local state.
        // If the number of failed payment integrations is equal to the total number of payment integrations, display a generic error message.
        break;
      case 'payment_failed':
        // Show a payment failed message to the customer.
        // Call paymentFlow method again to restart the payment flow.
        break;
    }
  },
  onInfo: (message) => {
    switch (message.code) {
      case 'checkout_completed':
        const {
          order: { id },
        } = message.payload as {
          order: { id: string };
        };
        // Redirect to confirmation page with Order ID.
        break;
      case 'payment_method_selection_confirmation_failed':
        // Show message to customer and allow user to try again.
        break;
      case 'payment_method_selection_confirmation': {
        const {
          method: { hasVendorButton, type },
        } = message.payload as {
          method: { type: string; hasVendorButton: boolean };
        };
        // Hide custom payment button if hasVendorButton is 'true'.
        break;
      }
      case 'payment_methods_received': {
        const { paymentMethods } = message.payload as { paymentMethods: string[] };
        // Store total number of payment integrations on local state.
        break;
      }
      case 'payment_method_loaded':
        // Increment loaded payment integrations.
        break;
      case 'payment_started':
        // Show blocking overlay with spinner to avoid user interaction with the page.
        // Initialize local state errors to 'false'.
        break;
      case 'payment_completed':
        // Hide blocking overlay.
        break;
      case 'payment_method_selected':
        const {
          method: { hasVendorButton, type },
        } = message.payload as {
          method: { type: string; hasVendorButton: boolean };
        };
        // Store selected payment integration on local state and remove local payment error state.
        break;
      case 'payment_cancelled':
        // Hide blocking overlay.
        break;
      case 'external_terms_and_conditions_pending':
        // Show message to the customer to accept terms and conditions.
        break;
    }
  },
});

import { expressPayment } from '@commercetools/checkout-browser-sdk';

expressPayment.init({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  countryCode: '{countryCode}',
  locale: 'en', // Optional: defaults to 'en'
  logInfo: true,
  logWarn: true,
  logError: true,
  onInfo: (message) => {
    switch (message.code) {
      case 'express_payment_started':
        // Show blocking overlay with spinner.
        break;
      case 'express_payment_cancelled':
        // Hide blocking overlay.
        break;
      case 'express_payment_completed':
        // Redirect to confirmation page with Order ID.
        const { order } = message.payload as { order: { id: string } };
        window.location.href = '/thank-you?orderId=' + order.id;
        break;
    }
  },
  onError: (error) => {
    switch (error.code) {
      case 'express_payment_failed':
        // Show error message to customer.
        break;
    }
  },
});

<!-- Single container: use data-ctc-express without a value -->
<div data-ctc-express></div>

<script>
  (function (w, d, s) {
    if (w.ctc) {
      return;
    }
    var js,
      fjs = d.getElementsByTagName(s)[0];
    var q = [];
    w.ctc =
      w.ctc ||
      function () {
        q.push(arguments);
      };
    w.ctc.q = q;
    js = d.createElement(s);
    js.type = 'text/javascript';
    js.async = true;
    js.src =
      'https://unpkg.com/@commercetools/checkout-browser-sdk@latest/browser/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script');

  // Initialize Express Payment
  ctc('expressPaymentInit', {
    projectKey: '{projectKey}',
    region: '{region}',
    sessionId: '{sessionId}',
    countryCode: '{countryCode}',
    locale: 'en', // Optional: defaults to 'en'
    logInfo: true,
    logWarn: true,
    logError: true,
    onInfo: function (message) {
      if (message.code === 'express_payment_completed') {
        var order = message.payload.order;
        window.location.href = '/thank-you?orderId=' + order.id;
      }
    },
    onError: function (error) {
      if (error.code === 'express_payment_failed') {
        console.error('Express payment failed');
      }
    },
  });

  // Mount Express Payment buttons (no expressId needed for single container)
  ctc('expressPaymentMount', {
    initialAmount: {
      type: 'centPrecision',
      currencyCode: 'EUR',
      centAmount: 2999,
      fractionDigits: 2,
    },
    onPayButtonClick: function () {
      // Create a Cart with the product.
      // This must return a Promise.
      return createCartWithProduct(productId);
    },
  });
</script>

import { expressPayment } from '@commercetools/checkout-browser-sdk';

expressPayment.init({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  countryCode: '{countryCode}',
  onInfo: (message) => {
    switch (message.code) {
      case 'express_payment_started':
        // Customer clicked an express payment button.
        // Show blocking overlay with spinner.
        break;
      case 'express_payment_cancelled':
        // Customer cancelled the express payment.
        // Hide blocking overlay.
        break;
      case 'express_payment_interrupted':
        // Express payment was interrupted by the seller's callback.
        // Hide blocking overlay.
        break;
      case 'express_payment_completed':
        // Express payment completed successfully.
        const { order } = message.payload as { order: { id: string } };
        window.location.href = '/thank-you?orderId=' + order.id;
        break;
    }
  },
  onError: (error) => {
    switch (error.code) {
      case 'express_payment_failed':
        // Express payment failed.
        // Show error message to customer.
        break;
      case 'no_express_payment_integrations':
        // No express payment integrations are configured.
        // Hide express buttons container.
        break;
      case 'express_container_not_found':
        // The container element was not found.
        break;
      case 'express_multiple_containers_found':
        // Multiple elements with data-ctc-express attribute found.
        // Use expressId to specify which container to use.
        break;
      case 'express_payment_integration_not_available':
        // The requested payment integration is not available.
        // This can happen when using mountMethod() with an unavailable method.
        break;
    }
  },
});

<!-- Single container for all express buttons -->
<div data-ctc-express></div>

import { expressPayment } from '@commercetools/checkout-browser-sdk';

// Initialize Express Payment once when the page loads.
const initializeExpressPayment = (sessionId: string) => {
  expressPayment.init({
    projectKey: '{projectKey}',
    region: '{region}',
    sessionId: sessionId,
    countryCode: 'DE',
    locale: 'de-DE', // Optional: defaults to 'en'
    logInfo: true,
    logWarn: true,
    logError: true,
    onInfo: (message) => {
      switch (message.code) {
        case 'express_payment_started':
          showBlockingOverlay();
          break;
        case 'express_payment_cancelled':
          hideBlockingOverlay();
          break;
        case 'express_payment_completed':
          hideBlockingOverlay();
          const { order } = message.payload as { order: { id: string } };
          window.location.href = '/thank-you?orderId=' + order.id;
          break;
      }
    },
    onError: (error) => {
      hideBlockingOverlay();
      if (error.code === 'express_payment_failed') {
        showErrorMessage('Express payment failed. Please try again.');
      }
    },
  });
};

// Mount express buttons (no expressId needed for single container).
const mountExpressButtons = (product: { id: string; price: number; currency: string }) => {
  expressPayment.mount({
    initialAmount: {
      type: 'centPrecision',
      currencyCode: product.currency,
      centAmount: product.price,
      fractionDigits: 2,
    },
    onPayButtonClick: async () => {
      // Create a Cart with the product.
      await createCartWithProduct(product.id);
    },
    getShippingMethods: async () => {
      return getAvailableShippingMethods(product.currency);
    },
    onShippingMethodSelected: async ({ shippingMethod }) => {
      await setCartShippingMethod(shippingMethod.id);
    },
  });
};

<!-- Containers for each payment method -->
<div class="express-buttons-row">
  <div data-ctc-express="googlepay"></div>
  <div data-ctc-express="applepay"></div>
  <div data-ctc-express="paypal"></div>
</div>

import { expressPayment, type ExpressPaymentMethod } from '@commercetools/checkout-browser-sdk';

// Initialize Express Payments once when the page loads.
const initializeExpressPayment = (sessionId: string) => {
  expressPayment.init({
    projectKey: '{projectKey}',
    region: '{region}',
    sessionId: sessionId,
    countryCode: 'DE',
    locale: 'de-DE', // Optional: defaults to 'en'
    logInfo: true,
    logWarn: true,
    logError: true,
    onInfo: (message) => {
      if (message.code === 'express_payment_completed') {
        const { order } = message.payload as { order: { id: string } };
        window.location.href = '/thank-you?orderId=' + order.id;
      }
    },
  });
};

// Mount express buttons individually for a product.
const mountIndividualExpressButtons = async (product: { id: string; price: number; currency: string }) => {
  // Get available Express Payments methods
  const methods = await expressPayment.getAvailableMethods();

  // Common mount options
  const commonOptions = {
    initialAmount: {
      type: 'centPrecision' as const,
      currencyCode: product.currency,
      centAmount: product.price,
      fractionDigits: 2,
    },
    onPayButtonClick: async () => {
      await createCartWithProduct(product.id);
    },
  };

  // Mount each method to its own container
  methods.forEach((method) => {
    expressPayment.mountMethod({
      expressId: method.type, // Targets <div data-ctc-express="googlepay">, etc.
      method,
      ...commonOptions,
    });
  });
};

// Mount each method to its own dynamically created container
methods.forEach((method) => {
  const expressId = method.type;

  // Create container element if it doesn't exist
  if (!document.querySelector(`[data-ctc-express="${expressId}"]`)) {
    const container = document.createElement('div');
    container.setAttribute('data-ctc-express', expressId);
    container.className = 'express-button-wrapper';
    document.querySelector('.express-buttons-row')?.appendChild(container);
  }

  expressPayment.mountMethod({
    expressId,
    method,
    ...commonOptions,
  });
});

import { close } from '@commercetools/checkout-browser-sdk';

close();

import { checkoutFlow } from '@commercetools/checkout-browser-sdk';

checkoutFlow({
  region: '{region}',
  projectKey: '{projectKey}',
  sessionId: '{sessionId}',
  locale: '{locale}',
  logInfo: true,
  logWarn: true,
  logError: true,
  paymentReference: '{paymentReference}',
});

import { checkoutFlow } from '@commercetools/checkout-browser-sdk';

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  onInfo: (message) => {
    if (message.code === 'checkout_completed') {
      const {
          order: { id },
        } = message.payload as {
          order: { id: string };
        };
      window.location.href = '/thank-you?orderId=' + id;
    }
  },
});

import { retryOrderVerification } from '@commercetools/checkout-browser-sdk';

retryOrderVerification();

import { checkoutFlow } from '@commercetools/checkout-browser-sdk';

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  onInfo: (message) => {
    console.error('Received: ' + message.code);
  },
});

<script>
  (function (w, d, s) {
    if (w.ctc) {
      return;
    }
    var js,
      fjs = d.getElementsByTagName(s)[0];
    var q = [];
    w.ctc =
      w.ctc ||
      function () {
        q.push(arguments);
      };
    w.ctc.q = q;
    js = d.createElement(s);
    js.type = 'text/javascript';
    js.async = true;
    js.src =
      'https://unpkg.com/@commercetools/checkout-browser-sdk@latest/browser/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script');

  ctc('checkoutFlow', {
    projectKey: '{projectKey}',
    region: '{region}',
    sessionId: '{sessionId}',
    onInfo: function (message) {
      console.error('Received: ' + message.code);
    },
  });
</script>

import { checkoutFlow } from '@commercetools/checkout-browser-sdk';

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  logInfo: true,
  logWarn: false,
  logError: true,
});

<script>
  (function (w, d, s) {
    if (w.ctc) {
      return;
    }
    var js,
      fjs = d.getElementsByTagName(s)[0];
    var q = [];
    w.ctc =
      w.ctc ||
      function () {
        q.push(arguments);
      };
    w.ctc.q = q;
    js = d.createElement(s);
    js.type = 'text/javascript';
    js.async = true;
    js.src =
      'https://unpkg.com/@commercetools/checkout-browser-sdk@latest/browser/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script');

  ctc('checkoutFlow', {
    projectKey: '{projectKey}',
    region: '{region}',
    sessionId: '{sessionId}',
    logInfo: true,
    logWarn: false,
    logError: true,
  });
</script>