Building a credit card payments extension with UI extensibility

Technical Q&A
, ,

Topic summary

A developer is encountering a crash when building a credit card payment extension with UI extensibility for Shopify. The setup includes:

Configuration:

  • UI extension targeting purchase.checkout.payment-option-item.hosted-fields.render-after
  • Payment extension with api_version = "2025-01" linked to the UI extension via ui_extension_handle
  • Required checkout payment fields: number and email (note: typo in config shows “ke y” instead of “key”)

Error:
When running shopify app dev, the checkout crashes with TypeError: Cannot read properties of undefined (reading 'includes') before the Extension component in Checkout.tsx renders.

Key Finding:
The crash occurs before the React extension component is rendered, suggesting an issue with the extension configuration or initialization rather than the component code itself.

The discussion remains open with no resolution yet provided.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m facing some issue about integrating “credit card payments extension with UI extensibility”

here are my related configurations;

ui_extension → shopify.extension.toml

[[extensions]]
name = “card-ui”
handle = “card-ui”
type = “ui_extension”

[[extensions.targeting]]
module = “./src/Checkout.tsx”
target = “purchase.checkout.payment-option-item.hosted-fields.render-after”
export = “default”

.

.

.

payments_extension → shopify.extension.toml

api_version = “2025-01”

[[extensions]]
name = “Credit Card Payment”
handle = “credit-card-onsite”
type = “payments_extension”

.

.

ui_extension_handle = “card-ui”

[[extensions.checkout_payment_method_fields]]
key = “number”
type = “string”
required = true

[[extensions.checkout_payment_method_fields]]
key = “email”
type = “string”
required = true

When i run shopify app dev previewed card ui website crashes with;

TypeError: Cannot read properties of undefined (reading ‘includes’)
at app.BeOm4IS4.js:42:26948
at Array.reduce ()
at yIe (app.BeOm4IS4.js:42:26932)
at Rs._k [as constructor] (app.BeOm4IS4.js:69:318209)
at Rs.pU [as render] (app.BeOm4IS4.js:2:9369)
at cS (app.BeOm4IS4.js:2:6509)
at fN (app.BeOm4IS4.js:2:1962)
at uU (app.BeOm4IS4.js:2:8483)
at cS (app.BeOm4IS4.js:2:7124)
at fN (app.BeOm4IS4.js:2:1962)

Findings: It does crash before rendering the Extension component in Checkout.tsx exported default like;

export default reactExtension(“purchase.checkout.payment-option-item.hosted-fields.render-after”, () => )

Any idea why does it crash?