Typescript React Stripe 卡元素不渲染。没有错误

Question

正如标题所示。我一直在尝试弄清楚如何在我的项目中使用 Stripe，但不断遇到障碍。我有一个非常简单的订阅模型，我只是想开始工作。我尝试遵循 this django/react 教程 和文档，但是在导致它的组件内移动

stripePromise

时出现一些问题。

父组件

import { useEffect, useState } from "react";
import Payment from "./Payment";

import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js/pure";

// const stripePromise = loadStripe('pk_test_51KJ0oMGrIQRxhbL6ginXLQbVevkZ4Wo89z0jCO5sqgsW6Y1oK3HVQTxtn2NQfFfpmaaY7d1oT1yUedkpl9zo0H1V004PGw3qRH');

export const RegisterThirdPage = () => {
    const [stripePromise, setStripePromise] = useState<any | null>(null);

    useEffect(() => {
    fetch("http://localhost:8000/api/subscription/config/").then(async (r) => {
        const { publishableKey } = await r.json();
        // console.log(publishableKey)
        setStripePromise(loadStripe(publishableKey));
    });
    }, []);


    return (
    <>
        <h1>React Stripe and the Payment Element</h1>
        <Elements stripe={stripePromise}>
            <Payment />
        </Elements>
    </>
    );
}

export default RegisterThirdPage

支付组件

import { CardElement } from "@stripe/react-stripe-js";
import { FormEvent, useState } from "react";
import { useStripe, useElements } from "@stripe/react-stripe-js";
import axios from "axios";


export const Payment = () => {
    const [error, setError] = useState(null);
    const [email, setEmail] = useState('')
    const stripe = useStripe();
    const elements = useElements();

    // Handle real-time validation errors from the CardElement.
    const handleChange = (event: any) => {
        if (event.error) {
            setError(event.error.message);
        } else {
            setError(null);
        }
    }

    // Handle form submission.
    const handleSubmit = async (event: FormEvent) => {
        event.preventDefault();
        const card = elements!.getElement(CardElement)

        if (!stripe || !card){
            return
        }

        const {paymentMethod, error} = await stripe.createPaymentMethod({
            type: 'card',
            card: card
            })
        if (!paymentMethod){
            console.log(error)
            return
        }

        console.log(paymentMethod)
        
        // const response = await axios.post('subscription/create-payment',
        const response = await axios.post('subscription/create-payment',
            {email, payment_method_id: paymentMethod.id})
        .then(response => {
            console.log(response.data);
        }).catch(error => {
            console.log(error)
        })
    };

  return (
    <form onSubmit={handleSubmit} className="stripe-form">
        
        <div className="form-row">
        <label htmlFor="email">Email Address</label>

        <input className="form-input" id="email" name="name"    
            type="email" placeholder="[email protected]" required value={email} 
            onChange={(event) => {setEmail(event.target.value)}} 
            />
        </div>

        <div className="form-row">
            <label htmlFor="card-element">Credit or debit card</label> 
            <CardElement id="card-element" onChange={handleChange}/>

            <div className="card-errors" role="alert">{error}</div>
        </div>

        <button type="submit" className="submit-btn">
        Submit Payment
        </button>

    </form>
  );
}

export default Payment;

Answer 1

我不明白它为什么起作用，但我所要做的就是将以下内容添加到我的 css 文件中：

#card-element {
  width: 100%;
  height: 100%;
}