集成react-stripe-elements时PaymentRequestForm不显示及金额传递问题

Hey there! Let's work through your two main issues with react-stripe-elements one by one.

1. Fixing PaymentRequestForm Not Showing Up #

First, let's tackle why the PaymentRequestForm isn't rendering in your browser. Here are the most common culprits to check:

• Browser & Environment Requirements:
  The Payment Request API (which powers PaymentRequestForm) has strict rules:

  • Your app must run over HTTPS (localhost is the only exception for local development).
  • Not all browsers support it fully—Chrome, Edge, and Firefox work reliably, but Safari has limited support (make sure you're on a recent version if testing there).

• Missing or Misconfigured PaymentRequest Instance:
  You need to create a valid PaymentRequest object using stripe.createPaymentRequest() and pass it directly to the PaymentRequestForm component. Skip this step or use invalid parameters, and the form won’t render at all.

• Proper Wrapping in StripeProvider:
  Double-check that PaymentRequestForm is nested inside your <StripeProvider> component (just like your SplitForm). If it’s outside the provider, it won’t have access to the Stripe context and won’t load.

2. Passing Amounts to PaymentRequest #

Setting the transaction amount is straightforward—you define it directly when creating the PaymentRequest object via the total property. Note that the amount needs to be specified in cents (so $10.00 would be 1000).

Here’s a complete example that integrates this with your existing setup:

import { StripeProvider, PaymentRequestForm } from 'react-stripe-elements';
import { loadStripe } from '@stripe/stripe-js';

// Initialize your Stripe promise with your publishable key
const stripePromise = loadStripe('pk_live_29VEENvMXTK8wZCb8...');

const PaymentComponent = () => {
  const [paymentRequest, setPaymentRequest] = useState(null);

  useEffect(() => {
    if (stripePromise) {
      stripePromise.then(stripe => {
        // Create the PaymentRequest with your amount and details
        const pr = stripe.createPaymentRequest({
          country: 'US', // Update to your country code (e.g., 'GB' for UK)
          currency: 'usd', // Update to your currency code
          total: {
            label: 'Order Total',
            amount: 1500, // $15.00 represented in cents
          },
          requestPayerName: true, // Optional: ask for the payer's name
          requestPayerEmail: true, // Optional: ask for the payer's email
        });
        setPaymentRequest(pr);
      });
    }
  }, []);

  const handlePayment = (event) => {
    // Process the payment using the generated payment method
    stripePromise.then(stripe => {
      stripe.confirmCardPayment('your_client_secret', {
        payment_method: event.paymentMethod.id,
      }).then((result) => {
        if (result.error) {
          event.complete('fail');
          // Handle payment failure here
        } else {
          event.complete('success');
          // Handle successful payment here
        }
      });
    });
  };

  return (
    <StripeProvider stripe={stripePromise}>
      {/* Your existing SplitForm component goes here */}
      
      {/* Only render PaymentRequestForm once the paymentRequest is ready */}
      {paymentRequest && (
        <PaymentRequestForm
          paymentRequest={paymentRequest}
          onPaymentMethodSubmit={handlePayment}
        />
      )}
    </StripeProvider>
  );
};

Key Tips: #

• The total.amount field is where you pass your transaction value—always use cents to avoid decimal errors.
• Use the conditional render ({paymentRequest && ...}) to prevent rendering the form before the PaymentRequest instance is ready.
• Replace 'your_client_secret' with the actual client secret generated by your backend for the payment intent.

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