checkout / frames-react

React wrapper of Checkout.com Frames.

Home Page:https://docs.checkout.com/integrate/frames

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How can i get CVV in frames react. It is not allowing me to access.

SohaibButtTxLabz opened this issue · comments

   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>

By PCC DSI regulation, payment service provider and merchant can't save CVV. Therefore, CVV won't be returned if you tokenised with Stripe.

By PCC DSI regulation, payment service provider and merchant can't save CVV. Therefore, CVV won't be returned if you tokenised with Stripe.