条带 - 接受付款会引发集成错误

Question

我正在开发我的reactjs和nodejs制作的应用程序。我正在遵循本指南的反应网络。我正在使用react-stripe-elements.我的react-stripe-elements版本是^3.0.1。这是我的前端代码的样子。

结帐.js

import React, { Component } from "react";
import {
CardNumberElement,
CardExpiryElement,
CardCVCElement,
injectStripe,
} from "react-stripe-elements";
import axios from 'axios';
const createOptions = () => {
return {
style: {
base: {
fontSize: "16px",
color: "#0382FF",
fontFamily: "Quicksand",
letterSpacing: "2px",
fontSmoothing: "antialiased",
"::placeholder": {
color: "#40e8cb87"
},
padding: "10px"
},
invalid: {
color: "#9e2146"
}
}
};
};
class CheckoutFormIntent extends Component {
constructor(props) {
super(props);
this.cardNumberRef = React.createRef();
}
GetClientSecret = async () => {
await axios.get('/api/stripe-client-secret');
return {
clientSecret: res.data.client_secret,
};
}

handleSubmit = async ev => {
ev.preventDefault();
const { stripe } = this.props;
if (stripe) {
setloader(true);
this.GetClientSecret().then(responseJson => {
const { clientSecret } = responseJson;
stripe
.confirmCardPayment(clientSecret, {
payment_method: { cardNumber: this.cardNumberRef.current }
})
.then(result => {
// Display error.message in your UI.
if (result.error) {
console.log("error");
} else {
console.log("success");
}
})
.catch(error => {
console.log(error);
});
});
}
};
render() {
return (
<>
<form onSubmit={this.handleSubmit}>
<div>
<div>
<span>Card Number</span>
<CardNumberElement
{...createOptions()}
ref={this.cardNumberRef}
placeholder="1234 1234 1234 1234"
/>
</div>
<div className="expCvc">
<div>
<span>Expiry Date</span>
<CardExpiryElement {...createOptions()} />
</div>
<div>
<span>Security Code</span>
<CardCVCElement {...createOptions()} placeholder="CVV" />
</div>
</div>
</div>
<button type="submit" disabled={isSubmitting} className="btnSubmit">
PAY 25
</button>
</form>
</>
);
}
}
export default injectStripe(CheckoutFormIntent);

我成功地从后端获取了客户端密钥，但是当代码到达confirmCardPayment时，它会integration error Invalid value for confirmCardPayment: payment_method.card should be object or element. You specified: undefined抛出此错误。我已经浏览了条纹的每个文档，他们已经实现了cardnumber、cvc和expiry而不是react-stripe-elementscardElement。我尝试使用元素来收集信息，但没有成功。

Answer 1

我终于成功了。这就是它的工作原理。

.confirmCardPayment(clientSecret, {
payment_method: { card: this.cardNumberRef.current._element },
})

Answer 2

您不会传递payment_method: { card: cardElement }中的card元素，因为它希望您按照文档传递。