import { PaymentForm, CreditCard, CreditCardButton } from 'react-square-web-payments-sdk';

const Payment = ({ formProps }) => {
  return (
    <PaymentForm {...formProps}>
      <h1>Pay</h1>
      <CreditCard hideButton />
      <p>Some other stuff in the middle, e.g. other payment methods</p>
      <CreditCardButton />
    </PaymentForm>
  );
};

import { PaymentForm, CreditCard, CreditCardButton, useForm } from 'react-square-web-payments-sdk';

const Payment = ({ formProps, savedCard }) => {
  return (
    <PaymentForm {...formProps}>
      <h1>Pay</h1>
      <p>Pay with {savedCard}</p>
      <SavedCardButton formProps={formProps} savedCard={savedCard} />
    </PaymentForm>
  );
};

const SavedCardButton = ({ formProps, savedCard }) => {
  const form = useForm();
  const submit = () => {
    const verifyBuyerResults = await paymentForm.payments?.verifyBuyer(
      savedCard,
      formProps.createVerificationDetails()
    );

    await paymentForm.cardTokenizeResponseReceived(
      { token: savedCard, status: "OK" },
      verifyBuyerResults
    );
  };

  return <Button onClick={submit}>Pay with saved card</Button>;
};

import { PaymentForm } from "react-square-web-payments-sdk";

const Payment = ({ formProps }) => {
  const [saveCard, setSaveCard] = useState(false);
  return (
    <PaymentForm
      {...formProps}
      verificationDetails={() => ({
        ...formProps.verificationDetails,
        intent: saveCard ? "STORE" : "CHARGE",
      })}
      cardTokenizeResponseReceived={async (token, buyer, payments) => {
        let cardToken = token.token;
        let buyerToken = buyer?.token;
        if (saveCard) {
          const result = await api.post("/save-card", { cardToken, buyerToken });
          // Token received from square with the saved card token
          cardToken = result.data.savedCard;

          const verifyResult = await payments?.verifyBuyer?.(cardToken, {
            ...formProps.verificationDetails,
            intent: "CHARGE",
          });

          buyerToken = verifyResult?.token;
        }

        await api.post("/pay", { cardToken, buyerToken });
      }}
    >
      <h1>Pay</h1>
      <p>Pay with {savedCard}</p>
      <CreditCard />
      <input value={saveCard} onChange={e => setSaveCard(e.target.checked} type="checkbox" />
    </PaymentForm>
  );
};