Web consumes protocol

[markmur]

The web component now consumes the shared @shopify/checkout-kit-protocol package instead of its own hand-rolled wire types and JSON-RPC parser (ucp-embed-types.ts). The public element API — the <shopify-checkout> tag, its attributes, methods (open()/close()), and the ec.* events — is unchanged. What changes for consumers is the shape of the payload types: the exported type names and the casing of the fields on the checkout/error objects.

Breaking changes

1. Renamed exported types

Four domain types exported from @shopify/checkout-kit were renamed to the canonical names from the protocol package:

Before	After
CheckoutLineItem	LineItem
CheckoutMessage	Message
Total	CheckoutTotal
UcpErrorResponse	ErrorResponse

Buyer, Checkout, and OrderConfirmation keep their names.

// Before
import type { CheckoutLineItem, Total, UcpErrorResponse } from "@shopify/checkout-kit";

// After
import type { LineItem, CheckoutTotal, ErrorResponse } from "@shopify/checkout-kit";

2. Payload fields are now camelCase

Payloads are decoded through the shared protocol package, which converts wire snake_case to camelCase. This affects every field you read off the full checkout/error objects — event.detail.checkout, event.detail.order, event.detail.error, and the element.checkout / element.error mirrors.

Note: the change-event wrapper fields (event.detail.lineItems, .totals, .messages) were already camelCase and are unaffected. Only the nested objects change.

// Before — snake_case
element.addEventListener("ec.line_items.change", (event) => {
  const { line_items, continue_url, expires_at } = event.detail.checkout;
  const firstParent = line_items[0].parent_id;
});

// After — camelCase
element.addEventListener("ec.line_items.change", (event) => {
  const { lineItems, continueUrl, expiresAt } = event.detail.checkout;
  const firstParent = lineItems[0].parentId;
});

Representative field renames:

Object	Before	After
Checkout	line_items	lineItems
Checkout	continue_url	continueUrl
Checkout	expires_at	expiresAt
LineItem	parent_id	parentId
Message	content_type	contentType
ErrorResponse	continue_url	continueUrl

// Error handling — element mirror and event detail
element.addEventListener("ec.error", (event) => {
  // Before: event.detail.error.continue_url
  // After:
  const { continueUrl, messages } = event.detail.error;
});

Migration

1. Update type imports to the new names (table above).
2. Replace snake_case field access on checkout / order / error objects with camelCase. TypeScript consumers get compile errors at each site; the field names map 1:1 (foo_bar → fooBar).

Why

The web component maintained a private copy of the UCP embedded-checkout wire types and a bespoke JSON-RPC parse/dispatch/encode loop, duplicating the contract already defined in @shopify/checkout-kit-protocol and drifting from the other platforms. This wires web onto the shared EmbeddedCheckoutProtocol.Client, which decodes payloads, routes them to per-event handlers, and encodes JSON-RPC responses. URL negotiation goes through EmbeddedCheckoutProtocol.url, and window.open results are built via the shared windowOpenSuccess / windowOpenRejected factories.

Focus review on platforms/web/src/checkout.ts (handler wiring and the #dispatchProtocolMessage / #handleWindowOpen flow). Run dev web test to exercise the reworked message handling, which asserts against decoded payloads and the shared response envelopes.

[github-actions]

React Native — Coverage Report

Lines	Statements	Branches	Functions
	91.85% (327/356)	87.98% (183/208)	100% (86/86)

[github-actions]

Web — Coverage Report

Lines	Statements	Branches	Functions
	99.55% (222/223)	85.58% (95/111)	100% (61/61)

[github-actions]

Package Size

Platform	Artifact	Base	Head	Delta
Web	npm tarball	44.6 KiB	66.6 KiB	+22.0 KiB
React Native	npm tarball	99.1 KiB	99.4 KiB	+315 B
Android	release AAR	160.8 KiB	160.8 KiB	0 B

Measured from the PR base SHA and PR head SHA. This comment reports package artifact sizes only; it is not a final app binary-size report.