条带在生产中不显示付款详细信息。使用 NextJS

Question

我已经使用沙盒凭据（可发布密钥和秘密）测试了我的应用程序。我现在正在尝试在生产模式下启用条带。

问题

• 在我的用户界面中，当我更改可发布密钥以使用实时密钥时，不会显示付款详细信息
• 如果我切换到测试版，它会正确显示

我不确定缺少什么。我只启用了 1 种付款方式（卡）。我没有看到任何错误，所以我很难确定问题所在。

这是我的 paymentDetails 组件：

"use client"
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import * as React from "react";
import {Elements, PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {Env} from "@/libs/Env";
import {subscribe} from "@/api/userCost";
import {useAuth} from "@clerk/clerk-react";
import toast from "react-hot-toast";

interface StripePaymentDetailsProps {
  className?: string;
  clusterName: string;
  onSubmited: () => Promise<void>;
}

console.log('Using publishable key: ', Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
const stripePromise = loadStripe(Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

stripePromise
  .catch((error) => {
    console.error("Error loading Stripe:", error);
  });

stripePromise
  .then((error) => {
    console.log("stripe loaded", error)
  });


interface CheckoutFormProps {
  onSubmited: () => Promise<void>;
  clusterName: string;
  email: string;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({onSubmited, clusterName }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth();

  const handleError = (error: any) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    try {
      event.preventDefault();

      if (!stripe || !elements) {
        // Stripe.js hasn't yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        return;
      }

      setLoading(true);

      // Trigger form validation and wallet collection
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        setLoading(false)
        return;
      }

      // Create the subscription
      const token = await getToken({ "template": "purrstack" });
      if (token) {
        console.log(clusterName)
        const {type, clientSecret} = await subscribe(token, clusterName)
        const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

        // Confirm the Intent using the details collected by the Payment Element
        if (onSubmited) {
          await onSubmited()
        }

        const {error} = await confirmIntent({
          elements,
          clientSecret,
          confirmParams: {
            return_url: `${window.location.origin}/dashboard?element=instances`,
          },
        });

        if (error) {
          // This point is only reached if there's an immediate error when confirming the Intent.
          // Show the error to your customer (for example, "payment details incomplete").
          handleError(error);
          toast.error("An error occurred while creating the subscription");
        } else {
          if (onSubmited) {
            console.log("onSubmited")
            onSubmited()
          }
        }

      } else {
        setLoading(false)
      }
    } catch (error) {
      setLoading(false)
      toast.error("An error occurred while creating the subscription");
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement options={{
        defaultValues: {
          billingDetails: {
            email: "[email protected]"
          }
        }
      }} />
      <div>
        {errorMessage && <div className={"text-red-600"}>{errorMessage}</div>}
      </div>

      <Button type="submit" disabled={!stripe || loading}>
        Submit
      </Button>

    </form>
  );
}

const StripePaymentDetails: React.FC<StripePaymentDetailsProps> = ({ className, onSubmited, clusterName }) => {
  return (
    <div className={className}>
      <h1> Add payment details</h1>
      <Elements stripe={stripePromise} options={{
        mode: 'subscription',
        amount: 0,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      }}>
        <CheckoutForm email={"[email protected]"} onSubmited={onSubmited} clusterName={clusterName}/>
      </Elements>
    </div>
  );
};

export default StripePaymentDetails;

我已经检查过，记录的可发布密钥是条带仪表板中显示的正确密钥。

这是我在测试和生产模式之间更改可发布密钥时的 UI 差异：

测试

直播模式

还有一堆警告和错误在测试模式下不会显示，但当我尝试在生产中打开付款详细信息时会显示

lockdown-install.js:1 Removing unpermitted intrinsics
110Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
8[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
inpage.js:1 MetaMask no longer injects web3. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
inpage.js:1 MetaMask no longer injects web3. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
46d9f3f7-05df-4153-b70b-0a9c3d8d8226:1 WebGPU is experimental on this platform. See https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
a2986899-90fa-4235-a54a-59c6882dfd0e:1 WebGPU is experimental on this platform. See https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
blob:https://newassets.hcaptcha.com/1b9a56ea-12e4-471f-b7db-7dfd62228d38:1 WebGPU is experimental on this platform. See https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
blob:https://newassets.hcaptcha.com/614b637a-daf5-43f5-8409-4c31734625fe:1 WebGPU is experimental on this platform. See https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
newassets.hcaptcha.com/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn.com&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha.com&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha.com&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn.com:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha.com/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn.com&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha.com&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha.com&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn.com:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha.com/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn.com&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha.com&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha.com&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn.com:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha.com/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn.com&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha.com&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha.com&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn.com:1 Failed to create WebGPU Context Provider

我都听到感谢您的帮助:)

相关网站（如果有帮助，但需要登录/注册才能获取付款详细信息）：https://purrstack-dev.catpack.ninja/dashboard

Answer 1

我建议您在调用

loadStripe

时仔细验证您的可发布密钥环境变量是否已填充。控制台中 Stripe.js 是否有任何错误？您是否发现调用 Stripe API 时出现任何网络错误？

使用此延迟意图模式和当前行为，我希望向

/elements/sessions

发出请求以获取您的付款方式配置。

如果 PK 环境变量没有问题或出现 Stripe.js 错误，您应该写信给 Stripe 支持以获得集成帮助：https://support.stripe.com/contact