条纹支付方式。使用卡[拆分形式]不起作用。无法获取卡号有效期和 CVC 号码

Question

我正在用react和node实现stripe。但我没有得到这些值

    <CardNumberElement/>
    <CardExpiryElement/> 
    <CardCvcElement/>

没有它的价值就无法获得代币，也无法充值。

如果我只使用 cardElement 那是可行的，但 cardElement 是一个单行输入字段，但我想拆分它。这就是为什么我使用 CardNumberElement 、 CardExpiryElement 和 CardCvcElement 进行拆分。后端代码是完美的，但错误在前端内部，因为我们无法完美地传递值来创建支付的条带令牌。

前端代码：

import React from "react";
import { loadStripe } from "@stripe/stripe-js";
import {
    Elements,
    CardElement,
    useStripe,
    useElements,
    CardNumberElement,
    CardExpiryElement,
    CardCVCElement,
    injectStripe,
    StripeProvider,
    CardCvcElement
} from "@stripe/react-stripe-js";
import axios from "axios";
import { ServiceBooking } from "../../services/service-booking"


const CheckoutForm = ({ success }) => {
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async event => {
        event.preventDefault();
        let number = elements.getElement(CardNumberElement);
        let cvc = elements.getElement(CardCvcElement);
        console.log("farrukh",number)
        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: {
                number: number,
                exp_month: 4,
                exp_year: 2021,
                cvc: cvc,
              }
        });

        if (!error) {
            const { id } = paymentMethod;

            try {
                const data = await ServiceBooking.charge(id, 1099);
                console.log(data);
                success();
            } catch (error) {
                console.log(error);
            }
        }
    };

    return (
        <form
            onSubmit={handleSubmit}
            style={{ maxWidth: "400px", margin: "0 auto" }}
        >
            <h2>Price: $10.99 USD</h2>
            <CardNumberElement/>
            <CardExpiryElement/> 
            <CardCvcElement/>
            <button type="submit" disabled={!stripe}>
                Pay
      </button>
        </form>
    );
};

// you should use env variables here to not commit this
// but it is a public key anyway, so not as sensitive
const stripePromise = loadStripe("pk_test_wSvr6guTJvkKmv21jVqVd2D20049BVPKHP");

const Checkout = () => {
    const [status, setStatus] = React.useState("ready");

    if (status === "success") {
        return <div>Congrats on your empanadas!</div>;
    }

    return (
          <Elements stripe={stripePromise}>
              <CheckoutForm
                  success={() => {
                  setStatus("success");
                 }}
              />
          </Elements>
    );
};

export default Checkout;

后端代码：

router.post(
    "/charge",
    asyncHandler(async function (req, res) {
        const { id, amount } = req.body;

  try {
    const payment = await stripe.paymentIntents.create({
      amount,
      currency: "USD",
      payment_method: id,
      confirm: true
    });

    console.log(payment);

    return res.status(200).json({
      confirm: "abc123"
    });
  } catch (error) {
    console.log(error);
    return res.status(400).json({
      message: error.message
    });
  }
    })
);

我已尝试但无法成功扣款（付款）

Answer 1

在 Stripe.js 中，您只需要将 传递CardElement给调用即可stripe.createPaymentMethod。您不需要卡号，出于安全原因您也无法获得卡号。

let number = elements.getElement(CardNumberElement);
...
const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: number
        });

你可能会问我如何传入cvc和expiry date？答案是您不必这样做，Stripe.js 会自动在同一页面中自动定位 CVC 和到期输入。

请参阅https://stripe.com/docs/stripe-js/react上的参考