How can i get CVV in frames react. It is not allowing me to access.
SohaibButtTxLabz opened this issue · 2 comments
SohaibButtTxLabz commented
I applied the onchange, useRef but didn't find any solution to access the CVV is there any method. I have to send the CVV in
payload to backend.I'm getting few details from cardTokenized but can't access the CVV
<Frames
config={{
debug: true,
publicKey: "",
localization: {
cardNumberPlaceholder: "",
expiryMonthPlaceholder: "",
expiryYearPlaceholder: "",
cvvPlaceholder: "CVV",
},
style: {
base: {
fontSize: "14px",
background: "#e5eff2",
color: "#101e8e",
opacity: "1",
padding: "18px 18px 18px 47px",
margin: "0",
outline: "none",
border: "1px solid #b6bfdc",
width: "100%",
height: "35px",
},
},
}}
cardTokenized={(e) => {
paymentsubmit(e);
}}
>
<div style={{ background: "white" }}>
<div
style={{
display: "flex",
flexDirection: "column",
height: "400px",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
padding: "20px",
}}
>
<div className="quick-pay-amount-to-pay-screen1">
<p>Amount </p>
<p>AED {totalAmountToPay.toFixed(2)} </p>
</div>
<hr className="hr-add-card" />
<div className="quick-pay-card-number-field1">
<p
style={{
fontSize: `${0.875}rem`,
fontFamily: "Segoe UI",
color: "#101E8E",
fontWeight: "700",
marginBottom: "2px",
}}
>
Credit / Debit Card Number
</p>
<div className="quick-pay-card-number-field1-icon">
<img src={ccIcon} />
</div>
<CardNumber style={{ height: "40px" }} />
</div>
<div
style={{
display: "flex",
width: "100%",
marginTop: "30px",
}}
>
<div style={{ display: "flex", flexDirection: "column" }}>
<p
style={{
fontSize: `${0.875}rem`,
fontFamily: "Segoe UI",
color: "#101E8E",
fontWeight: "700",
}}
>
Expiry Date
</p>
<ExpiryDate
style={{ width: "90%" }}
className="ExpiryDate-field"
/>
</div>
<div style={{ position: "relative" }}>
<p
style={{
fontSize: `${0.875}rem`,
fontFamily: "Segoe UI",
color: "#101E8E",
fontWeight: "700",
}}
>
CVV Number
</p>
<div className="cvc-image-background-color">
<img src={cvv} />
</div>
<Cvv
type="text"
className="ExpiryDate-field"
/>
</div>
</div>
<div className="quick-pay-card-number-field2">
<p
style={{
fontSize: `${0.875}rem`,
fontFamily: "Segoe UI",
color: "#101E8E",
fontWeight: "700",
marginBottom: "2px",
}}
>
Email Address
</p>
<input
onChange={(e) => handleEmailChange(e)}
type="email"
className=""
value={mail}
/>
</div>
<Button
className="pay-now"
onClick={() => {
Frames.submitCard();
}}
style={{ padding: "20px", boxShadow: "none" }}
>
PAY NOW
</Button>
</div>
</div>
</div>
</Frames>
SohaibButtTxLabz commented
By PCC DSI regulation, payment service provider and merchant can't save CVV. Therefore, CVV won't be returned if you tokenised with Stripe.
SohaibButtTxLabz commented
By PCC DSI regulation, payment service provider and merchant can't save CVV. Therefore, CVV won't be returned if you tokenised with Stripe.