Solidjs Stripe 定价表 undefined client-reference-id

Question

我正在尝试使用 stripe 嵌入定价表 与 solid.js

我已经定义了一个简单的组件：

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
          client-reference-id={customer}
          pricing-table-id="id"
          publishable-key="key"
        ></stripe-pricing-table>
      }
    </Show>
  );
}

但是，我从 webhook 收到的

client_reference_id

总是未定义的。我显然之前检查过

customer

已定义并且是有效的 Stripe

client-reference-id

.

我认为问题来自动态

client-reference-id

道具本身。

我测试了不同的东西，

client-reference-id="test"

在 webhook 中返回有效的

client-reference-id

但是

client-reference-id={"test"}

返回 null.

我已经尝试使用

h

或

html

。

这就是我如何称呼我的组件：

<PricingPage customer="testcustomer" />

谢谢，任何帮助表示赞赏。

Answer 1

如果您正在为

customer

值使用信号，则由于

PricingPage

中的解构赋值，对其值的任何更新都不会反映出来。

通过解构 props，您将创建一个局部变量，从而破坏反应性并坚持使用默认值。 Solid 通过函数调用传递组件之间的反应性。所以，你应该使用像

customer

这样的道具来访问

props.customer

您的组件的另一个问题是您在

stripe-pricing-table

周围有不必要的表达式包装器。如果是有效元素，可以直接使用。

最后，由于 solid exported

Component

generic 在声明组件时提供了更好的清晰度。

所以，总的来说，你的组件应该如下所示：

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

如果这不能解决您的问题，您需要确保您的 Stripe API 设置有效，然后您需要修复存储和访问客户端参考 ID 的方式。 Solidjs 不使用 VDOM，而是编译成原生 DOM 节点。因此，您需要使用信号来更改项目的值。

如果您进行远程 API 调用以获取客户端 ID，请使用资源：https://www.solidjs.com/docs/latest/api#createresource.

我不熟悉 Stripe API，但使用更具特色和描述性的表 ID 和键名也无妨。