javascript - 条卡元素输入不显示

Question

我试图为一个项目实施条带支付，但卡片元素的输入显示不正确：

你可以在这里看到它的显示

这是我的代码：

结帐组件

import React, { useState, useEffect } from "react";
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { useSelector, useDispatch } from "react-redux";
import { createPaymentIntent } from "../functions/stripe";

const StripeCheckout = ({ history }) => {

  const [succeeded, setSucceeded] = useState(false);
  const [error, setError] = useState(null);
  const [processing, setProcessing] = useState("");
  const [disabled, setDisabled] = useState(true);
  const [clientSecret, setClientSecret] = useState("");

  const stripe = useStripe();
  const elements = useElements();



  const cardStyle = {
    style: {
      base: {
        color: "#32325d",
        fontFamily: "Arial, sans-serif",
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#32325d",
        },
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a",
      },
    },
  };

  return (
    <>
      <form id="payment-form" className="stripe-form" onSubmit={handleSubmit}>
        <CardElement
          id="card-element"
          options={cardStyle}
          onChange={handleChange}
        />
        <button
          className="stripe-button"
          disabled={processing || disabled || succeeded}
        >
          <span id="button-text">
            {processing ? <div className="spinner" id="spinner"></div> : "Pay"}
          </span>
        </button>
      </form>
    </>
  );
};

export default StripeCheckout;

和支付页面

import React from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import StripeCheckout from "../components/StripeCheckout";
import "../stripe.css";


const promise = loadStripe(process.env.STRIPE_PUBLIC);

const Payment = () => {
  return (
    <div className="container p-5 text-center">
      <h4>Complete your purchase</h4>
      <Elements stripe={promise}>
        <div className="col-md-8 offset-md-2">
          <StripeCheckout />
        </div>
      </Elements>
    </div>
  );
};

export default Payment;

如果有人添加建议或可以提供工作示例，我没有看到我的输入代码显示不正确的任何问题。

Answer 1

您需要input在组件中设置元素，checkout以便在条带结帐中呈现它们。

checkout在组件的表单中尝试与以下类似的解决方法：

<form id="payment-form" className="stripe-form" onSubmit={handleSubmit}>
<fieldset className="FormGroup">
  <Field
    label="Name"
    id="name"
    type="text"
    placeholder="Jane Doe"
    required
    autoComplete="name"
    value={billingDetails.name}
    onChange={(e) => {
      setBillingDetails({...billingDetails, name: e.target.value});
    }}
  />
  <Field
    label="Email"
    id="email"
    type="email"
    placeholder="janedoe@gmail.com"
    required
    autoComplete="email"
    value={billingDetails.email}
    onChange={(e) => {
      setBillingDetails({...billingDetails, email: e.target.value});
    }}
  />
  <Field
    label="Phone"
    id="phone"
    type="tel"
    placeholder="(941) 555-0123"
    required
    autoComplete="tel"
    value={billingDetails.phone}
    onChange={(e) => {
      setBillingDetails({...billingDetails, phone: e.target.value});
    }}
  />
</fieldset>
<fieldset className="FormGroup">
  <CardField
    onChange={(e) => {
      setError(e.error);
      setCardComplete(e.complete);
    }}
  />
</fieldset>
{error && <ErrorMessage>{error.message}</ErrorMessage>}
<SubmitButton processing={processing} error={error} disabled={!stripe}>
  Pay $25
</SubmitButton>
      </form>

您可以在此处关注 React Stripe JS 文档：https ://stripe.com/docs/stripe-js/react