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

Question

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

    <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

您需要更改前端代码。要使拆分窗体工作，应在。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;