vitepay v0.1.0

Problem Statement

Generate payment information according to orders received by the merchants. The payment information should include the following:

• QR Code: the QR code should include the Vite address, payment currency and the payment amount.
• Memo: It is used to distinguish different orders. Each order should have its own distinct memo.
• Scan QR code with the Vite App. After scanning, it redirects the user to the payment page. The App retrieves the Vite address, payment currency and payment amount. On the same page, the user is able to fill in the memo manually and initiate the payment process.

Once the payment process is initiated within the App, VitePay will look up the payment information. If it detects the matching order information (as distinguished by the memo), the screen display shows “Processing”, resulting in one of the following:

Payment Successful. This means payment currency, amount and memo match up with the order and the network has achieved 30 confirmations. Payment Failed. This means one or more of the information regarding payment currency, amount or memo does not match up with the order. This will trigger refund back to the original address.

Other scenarios:

• Time out: if the payment is not completed within 15 minutes, the order will be canceled automatically Payment after order cancelation: if the order is canceled manually or due to time-out, no payments will be facilitated.
• The ability to review payment information and track order after payment success. The following is a mockup for the payment page.

How to use VITEPAY (VIDEO)

Screenshot

How to customize the Embed Button UI (Design)

Here is the code that you can use to customize the CSS,

    #vite-embed-button button {
        color: #FFF;
        background-color: #02298A;
        font-size: 18px;
        text-align: center;
        font-style: normal;
        border-radius: 5px;
        width: 200px;
        border-width: 1px 1px 3px;
        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
        margin-bottom: 10px;
        height: 3em;
    }

Next Steps

• Customizable Nodes
• Allow recurrent payments (subscription model)
• Make the design customizable
• Use modal popups instead of windows as a better UX

Run this Code

In the project directory, you can install dependencies with:

yarn install

This will install the dependencies of the project present in the package.json file.

yarn start

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!