我目前正在使用API，我了解到可以使用“Large”创建大小下拉元素，stripe结帐页面中的“Medium”和“Small”选项，这样客户就可以选择商品的尺寸，并将其作为描述传递给stripe，这样我就可以最终知道他们选择了哪种尺寸。我很难在结帐页面上实现这个功能。下面是我当前的后端代码，它只显示“provide shipping info”元素以及我的Stripe Checkout页面中的“provide card info”元素：

const express = require("express");
var cors = require("cors");
const stripe = require("stripe")(
STRIPE_KEY
);

const app = express();
app.use(cors());
app.use(express.static("public"));
app.use(express.json());

app.post("/checkout", async (req, res) => {
const items = req.body.items;

let lineItems = [];
items.forEach((item) => {
lineItems.push({
  price: item.id,
  quantity: item.quantity,
});
});

const session = await stripe.checkout.sessions.create({
line_items: lineItems,
mode: "payment",
billing_address_collection: "required",
shipping_address_collection: {
  allowed_countries: ["US", "CA"],
},
shipping_options: [
  {
    shipping_rate_data: {
      type: "fixed_amount",
      fixed_amount: { amount: 0, currency: "usd" },
      display_name: "Free shipping",
      delivery_estimate: {
        minimum: { unit: "business_day", value: 5 },
        maximum: { unit: "business_day", value: 7 },
      },
    },
  },
],
success_url: "http://localhost:3000/success",
cancel_url: "http://localhost:3000/cancel",
});

res.send(
JSON.stringify({
  url: session.url,
})
);
});

app.listen(4000, () => console.log("Listening on port 4000!"));

我还尝试了在我的前端有大小下拉菜单，这样当用户选择一个大小，他们将被重定向到一个页面的价格ID以及它的价格等。唯一的问题是，我使用链接组件从react-router-dom重定向用户到正确的页面与大小，他们想要和onlclick方法来改变下拉切换标题的大小，他们选择，因此，这样做似乎有时会忽略onlcick方法，不将下拉切换标题更改为选定大小，而是倾向于使用Link组件将用户重定向到从未失败的页面。

const [sizeLabel, sizeLabelFunc] = React.useState("Select Size");

   <Dropdown>
            <Dropdown.Toggle id="dropdown-basic">
              {sizeLabel}
            </Dropdown.Toggle>

            <Dropdown.Menu>
              <Dropdown.Item
                onClick={() =>
                  sizeLabelFunc("Large (1-inch Width 18-26-inch Length)")
                }
              >
                <Link to={"http://localhost:3000/Pag1Large"}>
                  Large (1-inch Width 18-26-inch Length)
                </Link>
              </Dropdown.Item>
              <Dropdown.Item
                onClick={() =>
                  sizeLabelFunc("Medium (1-inch Width 12-18-inch Length)")
                }
              >
                <Link to={"http://localhost:3000/Pag1Medium"}>
                  Medium (1-inch Width 12-18-inch Length)
                </Link>
              </Dropdown.Item>

              <Dropdown.Item
                onClick={() =>
                  sizeLabelFunc("Small (5/8-inch Width 8-12-Length)")
                }
              >
                <Link to={"http://localhost:3000/Pag1Small"}>
                  Small (5/8-inch Width 8-12-Length)
                </Link>
              </Dropdown.Item>
            </Dropdown.Menu>
       </Dropdown>

任何关于这两个问题的代码示例都将不胜感激。