Steuer-IDs mit Checkout erfassen

import {useState} from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

// Create a constant to list out the taxID types you'd like to support in your checkout
const TAX_ID_TYPES = ['au_abn', 'eu_vat', ...] as const;

const TaxIdCollectionForm = () => {
  const [isPurchaseAsBusiness, setIsPurchaseAsBusiness] = useState(false);
  const [isEditing, setIsEditing] = useState(true);
  const [businessName, setBusinessName] = useState('');
  const [taxIdType, setTaxIdType] = useState('');
  const [taxIdValue, setTaxIdValue] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const {updateTaxIdInfo} = useCheckout();

  const validateAndUpdate = async () => {
    if (!businessName) {
      setErrorMessage('Business name is required');
      return;
    }
    if (!taxIdValue) {
      setErrorMessage('Tax ID is required');
      return;
    }
    if (!taxIdType) {
      setErrorMessage('Please select a tax ID type');
      return;
    }

    // When all of the values are filled out, call `updateTaxIdInfo` submit it to the session.
    const res = await updateTaxIdInfo({
      taxId: {value: taxIdValue, type: taxIdType},
      businessName
    });
    if (res.error) {
      setErrorMessage(res.error.message);
    } else {
      setErrorMessage('');
      setIsEditing(false);
    }
  };

  const handleReset = () => {
    setBusinessName('');
    setTaxIdType('');
    setTaxIdValue('');
    setErrorMessage('');
  };

  const onIsPurchaseAsBusinessChange = async (e) => {
    setIsPurchaseAsBusiness(e.target.checked);
    if (!isPurchaseAsBusiness) {
      setErrorMessage('');
      setIsEditing(true);
      // When isPurchaseAsBusiness is false, call this to clear the taxIdInfo in the session.
      await updateTaxIdInfo(null);
    }
  };

  return (
    <div className="tax-id-form">
      <div className="form-row">
        <input
          type="checkbox"
          id="purchaseAsBusiness"
          checked={isPurchaseAsBusiness}
          onChange={onIsPurchaseAsBusinessChange}
        />
        <label htmlFor="purchaseAsBusiness">Purchase as business</label>
      </div>

      {isPurchaseAsBusiness && (
        <>
          {isEditing ? (
            <>
              <div className="form-row">
                <label htmlFor="businessName">Business Name:</label>
                <input
                  type="text"
                  id="businessName"
                  value={businessName}
                  onChange={(e) => setBusinessName(e.target.value.trim())}
                  placeholder="Enter business name"
                />
              </div>

              <div className="form-row">
                <label htmlFor="taxType">Tax ID Type:</label>
                <select
                  id="taxIdType"
                  value={taxIdType}
                  onChange={(e) => setTaxIdType(e.target.value)}
                >
                  <option value="">Select tax ID type</option>
                  {TAX_ID_TYPES.map((t) => (
                    <option key={t} value={t}>
                      {t}
                    </option>
                  ))}
                </select>
              </div>

              <div className="form-row">
                <label htmlFor="taxId">Tax ID:</label>
                <input
                  type="text"
                  id="taxId"
                  value={taxIdValue}
                  onChange={(e) => setTaxIdValue(e.target.value.trim())}
                  placeholder="Enter tax ID"
                />
              </div>

              <div className="form-actions">
                <button onClick={validateAndUpdate}>Save</button>
                <button onClick={handleReset}>Reset</button>
              </div>

              {errorMessage && (
                <div className="error-message">
                  {errorMessage}
                </div>
              )}
            </>
          ) : (
            <div className="tax-id-info">
              <div>Business Name: {businessName}</div>
              <div>Tax ID Type: {taxIdType}</div>
              <div>Tax ID: {taxIdValue}</div>
              <button onClick={() => setIsEditing(true)}>Edit</button>
            </div>
          )}
        </>
      )}
    </div>
  );
};