Quick start (unstyled)

import { ElementsForm, CardElement, FieldName } from '@getopenpay/openpay-js-react';
import { useState } from 'react';

function CheckoutForm() {
  const [error, setError] = useState<string | undefined>(undefined);
  const [amount, setAmount] = useState<string | undefined>(undefined);

  const onLoad = (totalAmountAtoms: number) => {
    setAmount(`$${totalAmountAtoms / 100}`);
  };

  const onCheckoutError = (message: string) => {
    setError(message);
  };

  const onCheckoutSuccess = (invoiceUrls: string[]) => {
    // Invoice URLs are returned here
    console.log('invoiceUrls', invoiceUrls);
  };

  return (
    <ElementsForm
      checkoutSecureToken={`checkout-secure-token-uuid`}
      onChange={() => setError(undefined)}
      onLoad={onLoad}
      onValidationError={(message) => setError(message)}
      onCheckoutSuccess={onCheckoutSuccess}
      onCheckoutError={onCheckoutError}
    >
      {({ submit }) => (
        <>
          <div>
            <input type="text" placeholder={'Given name'} data-opid={FieldName.FIRST_NAME} />
            <input type="text" placeholder={'Family name'} data-opid={FieldName.LAST_NAME} />
            <input type="email" placeholder={'Email'} data-opid={FieldName.EMAIL} />
            <input type="text" placeholder={'Country'} data-opid={FieldName.COUNTRY} />
            <input type="text" placeholder={'ZIP'} data-opid={FieldName.ZIP_CODE} />
          </div>

          <div>
            <CardElement />
          </div>

          {error && <small>{error}</small>}

          <button onClick={submit}>Pay {amount}</button>
        </>
      )}
    </ElementsForm>
  );
}