Stripe payment method. Use card [split-form] not working. Can't get card number expiry and cvc number - node.js

Question

I am implementing stripe with react and node.
but I am not getting these values
<CardNumberElement/>
<CardExpiryElement/>
<CardCvcElement/>
Without its value can't get token and can't charge money.
if I only use cardElement that's work but cardElement is a one-line input field but I want to split it. so that's why I used CardNumberElement , CardExpiryElement, and CardCvcElement for splitting.
backend code is perfect but the error is inside frontend because we can't pass values perfectly for creating the stripe token for the payment.
Frontend Code:
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;
Backend Code:
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
});
}
})
);
I have tried but could not charge (payment) successfully

Answer 1

in Stripe.js, you would just need to pass the CardElement to the stripe.createPaymentMethod call. You do not need the card number nor you can get the card number due to security reason.
let number = elements.getElement(CardNumberElement);
...
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: "card",
card: number
});
You may ask how do I pass in the cvc and expiry date? The answer is that you don't have to, Stripe.js will automatically locate the CVC and expiry input automatically in the same page.
See reference at https://stripe.com/docs/stripe-js/react

Answer 2

You need to change your front-end code. For a split form to work, you should use three different (card) keys under .createPaymentMethod to catch the CardNumberElement, CardExpiryElement, and CardCvcElement respectively
.createPaymentMethod(
{
type: 'card',
card: elements.getElement(CardNumberElement),
card: elements.getElement(CardExpiryElement),
card: elements.getElement(CardCvcElement),
}
Your Frontend Code should look like this:
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;

Answer 3

Just for anyone coming up with this issue in 2022. I was having a similar set up as OP and the answer is here on YouTube. You can use the method .confirmCardPayment taking any of the elements. Something like:
(token) => {
stripe?.confirmCardPayment(token, {
payment_method: {
card: elements?.getElement(CardNumberElement),
billing_details: {
name: "Leandro",
},
},
});
}
it will still validate all fields. Testing in the sandbox, I was passing like so but testing with leaving CVC empty, and stripe API was rejecting.