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

Question

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

    <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

Answer 2

您需要更改前端代码。要使拆分表单起作用，您应该使用 .createPaymentMethod 下的三个不同（卡）键分别捕获 CardNumberElement、CardExpiryElement 和 CardCvcElement

  .createPaymentMethod(
    {
      type: 'card',
      card: elements.getElement(CardNumberElement),
      card: elements.getElement(CardExpiryElement),
      card: elements.getElement(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();
        const { error, paymentMethod } = await stripe.createPaymentMethod({
          type: 'card',
          card: elements.getElement(CardNumberElement),
          card: elements.getElement(CardExpiryElement),
          card: elements.getElement(CardCvcElement),
        });

        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;