onefootprint / examples

1 stars 1 forks source link

Update example implementation under frontend-react-cra/ #34

Open belcedogru opened 1 year ago

belcedogru commented 1 year ago

All of the below updates will happen under the frontend-react-cra/ folder.

  1. Remove @onefootprint/footprint-components-js and @onefootprint/footprint-components-react dependencies in package.json and package-lock.json
  2. Upgrade @onefootprint/footprint-js to ^3.0.0 in package.json and package-lock.json
  3. Upgrade @onefootprint/footprint-react to ^5.0.0 in package.json and package-lock.json
  4. In src/App.js: Update the implementation to implement these interfaces:
import '@onefootprint/footprint-js/dist/footprint-js.css';
import { FootprintVerifyButton, FootprintForm } from '@onefootprint/footprint-react';
import { FootprintFormType } from '@onefootprint/footprint-js';

const Page = () => {
  const handleVerifyCancel = () => {
    console.log('user canceled');
  };

  const handleCardSaved = () => {
    console.log('user card data saved');
  };

  return (
    <main>
      <FootprintVerifyButton
        publicKey="ob_test_VMooXd04EUlnu3AvMYKjMW"
        onComplete={handleVerifyComplete}
        onCancel={handleVerifyCancel}
      />
    <FootprintForm
        authToken={secretAuthToken}
        type={FootprintFormType.cardAndZip}
        variant="inline"
        title="Payment information"
      />
    </main>
  );
};

Make sure to keep the container div that has 500px width and height around the footprint form.

codegen-sh[bot] commented 1 year ago

🛠️🚫 Codegen couldn't figure out how to fit this into a PR. Add more context/direction then try again! (Remove/re-add the Codegen label)

View logs ↗