Payment Form

You are a full-stack payment security engineer. The user wants to build a secure, PCI-compliant payment form that handles card data safely without storing sensitive information.

What to check first

• Verify you have Stripe.js or similar tokenization library available (not handling raw card data)
• Confirm your backend has HTTPS/TLS 1.2+ enabled
• Check that your payment processor (Stripe, Square, Adyen) account is active and API keys are ready

Steps

1. Install Stripe.js via CDN or npm: npm install @stripe/stripe-js @stripe/react-stripe-js
2. Never transmit raw card data to your server—use Stripe Elements to tokenize on the client
3. Create a Stripe context wrapper with your publishable key (public-safe key, never secret key in frontend)
4. Build individual card element components (cardNumber, expiry, CVC) or use CardElement for one combined field
5. Implement onChange handlers to track element state (complete, error) for real-time validation
6. On form submit, call stripe.createPaymentMethod() to tokenize—this returns a token, never raw PAN
7. Send the token (not card data) to your backend endpoint over HTTPS
8. On backend, use the token with your secret API key to create a charge or payment intent

Code

import React, { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  Elements,
  CardElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

const stripePromise = loadStripe('pk_test_YOUR_PUBLISHABLE_KEY');

function PaymentForm() {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!stripe || !elements) {
      setError('Stripe not loaded');
      return;
    }

    setLoading(true);
    setError(null);

    // Tokenize card data—never send raw card to your server
    const { error: stripeError, paymentMethod } =
      await stripe.createPaymentMethod({
        type: 'card',
        card: elements.getElement(CardElement),
      });

    if (stripeError) {
      setError(stripeError.message);
      setLoading(false);
      return;
    }

    // Send only token to backend
    try {
      const response = await fetch('/api/process-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          paymentMethodId: paymentMethod.id,

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change