Merchants integrating with Coinflow can opt for one of two different integration methods. They can either utilize Coinflow's prebuilt UI's or integrate directly with APIs. The advantage of using the prebuild UI means that a merchant gets all of Coinflow's features directly out of the box including:
- New Card Checkout
- Saved Card Checkout
- Apple Pay
- Google Pay
- 3DS
- Fraud/Chargeback Protection SDK modules
Using the existing Battle Brawlers example, add the CoinflowPurchase element in this file: src/CoinflowForm.tsx. Also add the height handler the CoinflowPurchase component following this recipe: https://docs.coinflow.cash/recipes/add-dynamic-height-to-a-coinflow-ui-component.
Test the following flows:
- New Card Checkout
- Saved Card Checkout
- Google Pay Check
- 3DS Challenge Checkout
- Failed Card Checkout
Note: the merchantId you will be using is swe-challenge, and the environment is sandbox.
You will be graded on the following:
- Completeness of the task
- Error handing and validation
- Code readability
To be respectful of your time, this task was designed to be completed in under 1 hour. Please do not hesitate to reach out to our integrations engineer Tasha (tasha@coinflowlabs.app) for questions regarding the integration. Please do be respectful of her time as well and make sure that your questions are well-formed as this will also factor into the grading.
- Install node v20 (I like to use NVM)
- Change the name of file
.env.exampleto.env - In the root directory run:
npm installnpm run buildnpm run dev
Changes to the UI will hot refresh/update as you make changes
- The
CoinflowPurchasecomponents has been successfully integrated into the Coinflow Purchase Wrapper with theonSuccessfunction utilizing the provided modal. - I have implemented the autoheight to the
CoinflowPurchasecomponent - The component depends on
@solana/wallet-adapter-reactuseWalletContext API. While less DRY, I have utilized the hook within the Purchase component to match access to global state and avoid prop-drilling Future Consideration: Adding a more robust error handling beyond the scope of what is available from the component like connectivity issues to give a more detailed message to the user.