# Browser SDK enhancements

The Checkout Browser SDK received numerous updates throughout 2025.

## Configuration properties

Several new configuration properties were added to the `checkoutFlow` method:

- Skip payment pages: the [`skipPaymentSuccessPage` and `skipPaymentErrorPage` properties](/checkout/releases/2025-04-02-added-skippaymentsuccesspage-and-skippaymenterrorpage-properties-for-the-checkoutflow-method) were added in April 2025. These properties are independent of each other, so you can pass just one of them, or both. This allows you to bypass default success and error pages, provide custom post-payment experiences, integrate payment results directly into your application flow, and reduce unnecessary page transitions.

- Tax display control: the [`showTaxes` property was replaced with the more flexible `tax` property](/checkout/releases/2025-07-14-replaced-the-showtaxes-property-with-the-tax-property-in-the-checkoutflow-method) in July 2025. The new `tax` property structure provides finer control over tax display formatting with `{display: true}` to show tax information from Composable Commerce in the price summary.

- Extension error messages: the [`showExtensionErrorMessages` property](/checkout/releases/2025-07-31-added-the-showextensionerrormessages-property-in-the-checkoutflow-method-of-the-checkout-browser-sdk) was added in July 2025. If the `address` property inside the object is set as `true`, then address-related extension error messages are shown in the UI. Otherwise, a generic error message will be shown.

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

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  tax:{
    display: true
  },
  skipPaymentSuccessPage: true,
  skipPaymentErrorPage: true,
  showExtensionErrorMessages:{
    address: true
  },
  // Handle results through messages instead
});
```

## Message handling improvements

In May 2025, [the following Messages referring to Payment Methods and Payment Connectors were renamed](/checkout/releases/2025-05-08-renamed-payment-method-and-payment-connector-messages) for clarity and consistency. Old messages were supported until 31 October 2025 and are now deprecated.

- Payment Connector Error → ConnectorError
- Payment Methods Received → PaymentIntegrationsReceived
- Multiple Payment Method Containers → MultiplePaymentIntegrationContainers
- No Payment Methods → NoPaymentIntegrations
- Payment Method Not Available → PaymentIntegrationNotAvailable
- Payment Method Loading → PaymentIntegrationLoading
- Payment Method Loading Error → PaymentIntegrationLoadingError
- Payment Method Loaded → PaymentIntegrationLoaded
- Payment Method Selected → PaymentIntegrationSelected
- Payment Method Selection Confirmation → PaymentIntegrationSelectionConfirmation
- Payment Method Selection Confirmation Failed → PaymentIntegrationSelectionConfirmationFailed
- Payment Started → PaymentStarted

In July 2025, [the following order verification Messages were renamed or introduced](/checkout/releases/2025-07-31-introduced-retryorderverification-sdk-method-order-verification-retry-error-message-and-renamed-payment-verification-messages):

- Payment Verification Started -> Order Verification Started: it signals the beginning of verification process.
- Payment Verification Timeout -> Order Verification Timeout: it is triggered when order verification takes too long.
- Order Verification Retry Error: indicates an error during verification retry.

Additionally, a [`retryOrderVerification` SDK method](/checkout/browser-sdk.md#retry-order-verification) was introduced.

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

retryOrderVerification();
```

The method allows you to programmatically retry order verification when timeouts or errors occur. If you retry the order verification and this fails, the [`OrderVerificationRetryError` Message](/checkout/messages.md#order-verification-retry-error) will be generated.

## Discount code handling

In April 2025, Checkout introduced [automatic removal of non-applicable discount codes](/checkout/releases/2025-04-02-introduced-removal-of-not-applicable-discount-code-from-cart-for-payment-only-mode) when using Payment Only mode. This feature ensures a smoother checkout experience by handling invalid discount codes automatically rather than blocking the payment flow.

When a discount code becomes invalid or doesn't apply to the current Cart contents, several things happen automatically: the code is removed from the Cart, a Message is sent to notify your application, and pricing updates to reflect the code removal. This allows you to inform customers about the change and explain why their discount code was removed.

The [Not Applicable Discount Code Removed Message](/checkout/messages.md#not-applicable-discount-code-removed) allows you to subscribe to these events.

You can subscribe to this message to provide feedback to customers when discount codes are automatically removed from the Cart. By subscribing to this message, you can provide clear feedback to customers when discount codes are automatically removed, maintaining transparency throughout the checkout process:

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

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  onWarn: (message) => {
    if (message.code === 'not_applicable_discount_code_removed') {
      const { cartId, discountCode } = message.payload;
      // Display notification to customer
      displayNotification(`Discount code ${discountCode} is no longer applicable`);
      // Update cart display
      updateCartDisplay();
    }
  }
});
```

## Style customization

In July 2025 we [introduced new customization variables](/checkout/releases/2025-07-09-introduced-new-customization-variables-in-checkout) that give you greater control over the visual appearance of checkout components.

Three new styling variables were added:

- `--button-outline`: allows you to customize the primary button’s border and outline color to match your brand guidelines.
- `--button-hover`: allows you to set the primary button’s background color when customers hover over it, creating interactive visual feedback.
- `--spinner`: allows you to customize the loading spinner’s color to align with your overall color scheme.

You can configure these variables using the `styles` property when initializing Checkout with either the `checkoutFlow` or `paymentFlow` methods:

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

checkoutFlow({
  projectKey: '{projectKey}',
  region: '{region}',
  sessionId: '{sessionId}',
  styles: {
    '--button-outline': '#007bff',
    '--button-hover': '#0056b3',
    '--spinner': '#007bff'
  }
});
```

For complete customization details and all available styling variables, refer to the [customize colors documentation](/checkout/custom-style.md#customize-colors).

## Related pages

- [Area overview page with navigation](/certifications.md)
- [Previous page: Payment features and capabilities](/certifications/frontend-developer-refresher-2026/checkout-refresher-2026/payment-features-and-capabilities.md)
- [Next page: Payment automation and notifications](/certifications/frontend-developer-refresher-2026/checkout-refresher-2026/payment-automation-and-notifications.md)
- [Search documentation and API specs](/search.md)