paper-pay-with-card.tsx

<>
  <Button onClick={() => setShowCreditCardDialog(true)}>
    {t('nftCollection.actionButton.payWithCreditCard', 'Pay with credit card')}
  </Button>
  <Web3PayWithCardDialog
    showDialog={showCreditCardDialog}
    recipientWalletAddress={connectedAddress}
    quantity={quantity}
    onClose={() => setShowCreditCardDialog(false)}
    onPaymentSuccess={() => {
      setShowCreditCardDialog(false);
      onSuccessCardPayment();
    }}
  />
</>;

Web3PayWithCardDialog.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CheckoutWithCard, PayWithCard } from '@paperxyz/react-client-sdk';
import { Field, Form, Formik } from 'formik';
import Dialog from 'components/Dialog';

type Props = {
  showDialog: boolean;
  onClose: () => void;
  onPaymentSuccess: () => void;
  quantity: number;
  checkoutId?: string;
  recipientWalletAddress?: string;
};

const Web3PayWithCardDialog = ({
  recipientWalletAddress,
  showDialog,
  quantity = 1,
  onClose,
  onPaymentSuccess,
}: Props) => {
  const { t } = useTranslation();
  const [recipientEmailAddress, setRecipientEmailAddress] = useState('');

  const onCloseDialog = () => {
    setRecipientEmailAddress('');
    onClose();
  };

  const onSubmit = async (values: { email: string }) => {
    setRecipientEmailAddress(values.email);
  };

  const confirmAddress = (
    <>
      <Formik
        initialValues={{ email: '', walletAddress: recipientWalletAddress }}
        onSubmit={onSubmit}
      >
        {({ touched, errors, isValid, dirty }) => (
          <>
            <Form className="space-y-4">
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-700 mb-1 sm:mb-2"
              >
                {t('auth.confirmEmailAddress', 'Confirm your email address')}
              </label>
              <Field
                type="text"
                name="email"
                id="email"
                autoComplete="email"
                placeholder={t('auth.emailAddress')}
                className="shadow-sm  block w-full sm:text-sm border-2 border-gray-100 rounded-lg p-2"
              />
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-700 mb-1 sm:mb-2"
              >
                {t(
                  'auth.connectedWalletAddress',
                  'Current connected wallet address'
                )}
              </label>
              <Field
                type="text"
                name="walletAddress"
                id="walletAddress"
                disabled={true}
                placeholder={t('auth.walletAddress', 'Wallet Address')}
                className="shadow-sm  block w-full sm:text-sm border-2 border-gray-100 rounded-lg p-2"
              />
              <button
                disabled={!isValid || !dirty}
                type="submit"
                className={`py-2 sm:py-3 w-full bg-brand text-white rounded-lg ${
                  !isValid || !dirty ? 'opacity-50 cursor-not-allowed' : ''
                }`}
              >
                {t('web3.confirm', 'Confirm')}
              </button>
            </Form>
          </>
        )}
      </Formik>
    </>
  );

  return (
    <Dialog showDialog={showDialog} onClose={onCloseDialog}>
      {recipientEmailAddress && (
        <PayWithCard
          checkoutId="02c018a3-ded9-4776-a030-54d27d6fd7c2"
          emailAddress={recipientEmailAddress}
          recipientWalletAddress={recipientWalletAddress ?? ''}
          onPaymentSuccess={onPaymentSuccess}
          quantity={quantity}
        />
      )}
      {!recipientEmailAddress && confirmAddress}
    </Dialog>
  );
};

export default Web3PayWithCardDialog;