Solid.js集成Stripe嵌入式定价表时client-reference-id未定义问题

问题根源 #

Solid.js默认的属性绑定（如client-reference-id={customer}）会尝试绑定到元素的JavaScript属性，但<stripe-pricing-table>是自定义元素，它的client-reference-id是HTML属性而非JS属性。静态字符串能生效是因为直接设置了HTML属性，动态绑定则因找不到对应的JS属性而失效。

解决方案 #

使用Solid.js的属性显式绑定语法：在属性名前加上attr:前缀，强制将值设置为HTML属性。

修改后的组件代码 #

import { Show } from "solid-js";

import type { ComponentProps } from "solid-js";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "stripe-pricing-table": ComponentProps<"div"> & {
        "client-reference-id": string;
        "pricing-table-id": string;
        "publishable-key": string;
      };
    }
  }
}

export default function PricingPage({ customer }: { customer: string }) {
  return (
    <Show when={customer} fallback={<p>Error</p>}>
      <stripe-pricing-table
        attr:client-reference-id={customer}
        pricing-table-id="id"
        publishable-key="key"
      ></stripe-pricing-table>
    </Show>
  );
}

额外验证点 #

1. 确保页面已正确加载Stripe定价表脚本：

<script async src="https://js.stripe.com/v3/pricing-table.js"></script>

2. 确认传入的customer参数为非空有效字符串（你已完成此验证）

原理说明 #

自定义元素通常依赖HTML属性完成配置，Solid.js默认绑定逻辑优先处理JS属性。attr:前缀会绕过JS属性绑定逻辑，直接将值写入元素的HTML属性，让Stripe的自定义元素能正确读取client-reference-id，并在webhook回调中返回对应值。

内容的提问来源于stack exchange，提问作者thomasA