错误反应条纹 CardElement 没有呈现？

Question

我正在我的网站上集成条纹支付，但卡片元素未呈现这里是代码

结帐和元素组件

import React, { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js/pure';
import { Elements, CardElement, ElementsConsumer,useStripe, useElements } from '@stripe/react-stripe-js';

let stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx')

const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
      base: {
        iconColor: "#c4f0ff",
        color: "#fff",
        fontWeight: 500,
        fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
        fontSize: "16px",
        fontSmoothing: "antialiased",
        ":-webkit-autofill": {
          color: "#fce883"
        },
        "::placeholder": {
          color: "#87bbfd"
        }
      },
      invalid: {
        iconColor: "#ffc7ee",
        color: "#ffc7ee"
      }
    }
  };


export const CheckoutForm = (props) => {
    console.log(props);
    const stripe = useStripe();
    const elements = useElements();
    const [cardComplete, setCardComplete] = useState(false);
    console.log(stripe, elements, 'krishna');
    console.log(CardElement);
    return (
        <form>
            <CardElement
                options={CARD_OPTIONS}
                onReady={()=>{
                    console.log("Card Element is ready")
                    
                }}
                onChange={props.onChange}
            />
            <button type="submit" disabled={!stripe}>
                Pay
            </button>
        </form>
    );
};

const InjectedCheckoutForm = () => {
    return (
      <ElementsConsumer>
        {({elements, stripe}) => (
          <CheckoutForm elements={elements} stripe={stripe} />
        )}
      </ElementsConsumer>
    );
  };
export const StripeForm = (props) => {
    console.log(stripePromise)
    return (
        <Elements stripe={stripePromise}>
            <InjectedCheckoutForm />
        </Elements>
    );
};

我使用条纹元素的组件

import React, { Component, useEffect, useState } from 'react';
import InformationForm from './InformationForm';
import Style from '../../styles/checkout_information.module.scss';
import { StripeForm } from './CheckoutForm';

const InputField = ({ _placeholder, _name, _label, _required, _size }) => {
    return (
        <section className={[Style.input_wrapper, _size && Style[_size]].join(' ')}>
            <label className={Style.label}>
                {_label}
                {_required && <sup className={Style.isRequired}>*</sup>}
            </label>
            <input className={Style.input} name={_name} required={_required} placeholder={_placeholder} />
        </section>
    );
};

const SelectField = ({ _placeholder, _name, _label, _required, _size }) => {
    return (
        <section className={[Style.input_wrapper, _size && Style[_size]].join(' ')}>
            <label className={Style.label}>
                {_label}
                {_required && <sup className={Style.isRequired}>*</sup>}
            </label>
            <select
                className={[Style.input, Style.select].join(' ')}
                name={_name}
                required={_required}
                placeholder={_placeholder}
            >
                <option></option>
            </select>
        </section>
    );
};

export default class PersonalDetails extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // console.log(this.props);
    }
    render() {
        return (
            <div className={Style.details_container}>
                <InformationForm title={'Personal Details'}>
                    <fieldset className={Style.form_group}>
                        <form className={Style.form}>
                            <div className={Style.row}>
                                <InputField
                                    _type={'text'}
                                    _label={'First Name'}
                                    _required={true}
                                    _placeholder={'Jane'}
                                    _name={'firstName'}
                                    _size={'large'}
                                />
                                <InputField
                                    _type={'text'}
                                    _label={'Last Name'}
                                    _required={true}
                                    _placeholder={'Doe'}
                                    _name={'lastName'}
                                    _size={'large'}
                                />
                            </div>
                            <div className={[Style.row, Style.mt_1].join(' ')}>
                                <InputField
                                    _type={'email'}
                                    _label={'Email Address'}
                                    _required={true}
                                    _placeholder={'janedoe@gmai.com'}
                                    _name={'email'}
                                    _size="large"
                                />
                                <InputField
                                    _type={'text'}
                                    _label={'Phone Number'}
                                    _required={true}
                                    _placeholder={'(941)-555-0123'}
                                    _name={'phoneNumber'}
                                    _size="large"
                                />
                            </div>
                        </form>
                    </fieldset>
                </InformationForm>
                <InformationForm margin={'mt_1'} title={'Payment Details'}>

                    <StripeForm />

                    
                </InformationForm>
                <InformationForm margin={'mt_1'} title={'Billing Details'}>
                    <fieldset className={Style.form_group}>
                        <div className={Style.row}>
                            <SelectField
                                _type={'text'}
                                _label={'Country'}
                                _required={true}
                                _placeholder={'Jane'}
                                _name={'country'}
                                _size="large"
                            />
                        </div>
                        <div className={[Style.row, Style.mt_1].join(' ')}>
                            <InputField
                                _type={'text'}
                                _label={'Street Address'}
                                _required={true}
                                _placeholder={'Address Line 1'}
                                _name={'address'}
                                _size="large"
                            />
                            <InputField
                                _type={'text'}
                                _label={'Seccondry Address'}
                                _required={false}
                                _placeholder={'Address Line 2'}
                                _name={'secondryLine'}
                                _size="large"
                            />
                        </div>
                        <div className={[Style.row, Style.mt_1].join(' ')}>
                            <InputField
                                _type={'text'}
                                _label={'city'}
                                _required={true}
                                _placeholder={'Address Line 1'}
                                _name={'address'}
                                _size="large"
                            />
                            <div className={Style.row}>
                                <SelectField
                                    _type={'text'}
                                    _label={'State'}
                                    _required={true}
                                    _placeholder={'Cincinati'}
                                    _name={'secondryLine'}
                                    _size="small"
                                />
                                <InputField
                                    _type={'text'}
                                    _label={'Zip Code'}
                                    _required={true}
                                    _placeholder={'22121'}
                                    _name={'zipCode'}
                                    _size="small"
                                />
                            </div>
                        </div>
                    </fieldset>
                </InformationForm>
            </div>
        );
    }
}

它在控制台上没有显示任何错误。并且 loadStripe 正在向条带 API 端发送请求，但它的承诺显示为待处理

SDK 版本

"@stripe/react-stripe-js": "^1.4.0",
"@stripe/stripe-js": "^1.14.0",

Answer 1

如docs 中所述，ElementsConsumer 旨在与基于类的组件一起使用。由于您的组件都是功能性的，您应该使用推荐的模式here：

export const StripeForm = (props) => {
    console.log(stripePromise)
    return (
        <Elements stripe={stripePromise}>
            <CheckoutForm />
        </Elements>
    );
};

并完全删除InjectedCheckoutForm。