求助：@stripe/react-stripe-js集成Apple Pay确认框无确认按钮

我使用@stripe/react-stripe-js集成了Google Pay与Apple Pay，Google Pay运行正常，但点击Apple Pay按钮后弹出的对话框中没有“Confirm Payment”按钮，导致无法继续支付流程。已在网上搜索但未找到相关解决方案，恳请帮助排查操作错误。

以下是我的Stripe表单组件代码：

import {Elements, useElements, useStripe} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import StyledForm from '@/components/StyledForm/StyledForm';
import {PaymentElement} from '@stripe/react-stripe-js';
import {PaymentRequestButtonElement} from '@stripe/react-stripe-js';
import './paymentForm.scss';
import { useEffect, useState } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { STRIPE_PUBLISH_KEY, STRIPE_SECRET_KEY } from '@/common/config/config';


const stripePromise = loadStripe(STRIPE_PUBLISH_KEY as string);

const PaymentForm = (props: any) => {
      return (
        <Elements stripe={stripePromise}>
            <CheckoutForm onSubmit={props?.onSubmit} />
        </Elements>
      )
    }
    
    const CheckoutForm = (props: any) => {
        const stripe: any = useStripe();
        const [paymentRequest, setPaymentRequest] = useState<any>(null);
      
        useEffect(() => {
          const price = localStorage.getItem('price') ?? 89;
          if (stripe) {
            const pr = stripe.paymentRequest({
              country: 'US',
              currency: 'usd',
              total: {
                label: 'LiProspect',
                amount: Number(price) * 100,
              },
              requestPayerName: true,
              requestPayerEmail: true,
            });
      
            // Check the availability of the Payment Request API.
            pr.canMakePayment().then((result: any) => {
                if (result) {
                  setPaymentRequest(pr);
                }
            });

            pr.on('paymentmethod', async (event: any) => {
              const result = await props?.onSubmit(false, event?.paymentMethod);
              if (!result) {
                event.complete('fail');
              } else {
                event.complete('success');
                console.log('paymentIntent success:', result);
              }
            });

            // pr.on('token', ( (event: any) => {
            //   console.log('token event', event);
            //   props?.onSubmit(false, event?.token)
            // }));
          }
          
          
        }, [stripe]);
      
        if (paymentRequest) {
          return (
            <>
              <PaymentRequestButtonElement options={{paymentRequest}}  />
            </>
          )
        }
      
        return <LoadingOutlined />;
      }

export default PaymentForm;

排查方向及解决方法： #

• 测试环境配置：Apple Pay沙盒环境要求测试设备绑定有效的Stripe测试卡，确认你的测试账户已正确配置沙盒支付方式，未配置可能导致弹窗缺少确认按钮。
• 域名验证：在Stripe后台的Apple Pay设置中，检查当前域名（包括开发环境的localhost或测试域名）是否已完成验证，未验证的域名无法正常触发Apple Pay完整流程。
• HTTPS环境：Apple Pay仅支持HTTPS（localhost开发环境例外，但需确保是https://localhost而非http），非HTTPS环境可能导致弹窗UI异常。
• Stripe版本更新：旧版本的@stripe/react-stripe-js和@stripe/stripe-js可能存在Apple Pay弹窗bug，执行以下命令更新到最新稳定版：

  npm update @stripe/react-stripe-js @stripe/stripe-js
  

• 支付请求参数检查：确认paymentRequest中的total.amount为正整数（你的代码中是Number(price)*100，需确保price不为0或负数），label避免使用特殊字符，参数不符合要求可能导致Apple Pay流程异常。
• 回调逻辑排查：在paymentmethod事件回调中添加日志，确认props.onSubmit未阻塞或抛出异常，回调异常可能导致Apple Pay无法触发后续确认步骤。

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