Official provider SDKs are used over custom card input fields

Custom <input> fields for card number, expiry, or CVC mean card data exists in your JavaScript memory and the DOM — accessible to any browser extension, injected third-party script, or XSS payload running on the page. Official provider SDK components (Stripe Elements, Square Web Payments) render inside sandboxed iframes that your JavaScript cannot read. PCI-DSS 4.0 Req 4.2 requires that cardholder data be protected during transmission; CWE-319 (Cleartext Transmission) and CWE-829 (Inclusion of Functionality from Untrusted Control Sphere) both apply when card data exists in a script-accessible DOM. OWASP A02 (Cryptographic Failures) treats unencrypted card data in the browser JavaScript context as a direct exfiltration risk.

Replace all custom card <input> elements with the provider's official SDK components. Stripe Elements renders in an isolated iframe your JavaScript cannot access.

// WRONG — card data accessible in your JS context
<input name="cardNumber" placeholder="Card Number" />
<input name="expiry" placeholder="MM/YY" />
<input name="cvc" placeholder="CVC" />

// CORRECT — Stripe's sandboxed iframe
import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js'

function PaymentForm() {
  const stripe = useStripe()
  const elements = useElements()
  // stripe.createPaymentMethod reads from the iframe — never touches your DOM
  return <CardElement />
}

Search checkout components for <input> elements with name, id, or placeholder containing "card", "number", "cvc", "cvv", "expiry", or "mm" and replace every match.