{"id":8346,"date":"2023-03-24T18:16:08","date_gmt":"2023-03-24T18:16:08","guid":{"rendered":"https:\/\/help.fliplet.com\/?p=8346"},"modified":"2025-05-13T11:39:39","modified_gmt":"2025-05-13T11:39:39","slug":"ecommerce-solution","status":"publish","type":"post","link":"https:\/\/help.fliplet.com\/ecommerce-solution\/","title":{"rendered":"eCommerce solution"},"content":{"rendered":"

The eCommerce app solution is the easiest way to build your own shopping app. It includes essential features such as product listings, shopping cart functionality, and payment processing. It allows you to save time and focus on customizing the app’s design and adding specific business requirements rather than building everything from scratch.<\/p>\r\n

App screens list<\/strong><\/h3>\r\n
    \r\n\t
  1. Onboarding<\/a><\/li>\r\n\t
  2. Terms<\/a><\/li>\r\n\t
  3. Sign in<\/a><\/li>\r\n\t
  4. Sign up<\/a><\/li>\r\n\t
  5. Main menu<\/a><\/li>\r\n\t
  6. About us<\/a><\/li>\r\n\t
  7. Products<\/a><\/li>\r\n\t
  8. Categories<\/a><\/li>\r\n\t
  9. Cart<\/a><\/li>\r\n\t
  10. Confirmation<\/a><\/li>\r\n\t
  11. Canceled checkout<\/a><\/li>\r\n\t
  12. My account<\/a><\/li>\r\n\t
  13. Edit profile<\/a><\/li>\r\n\t
  14. My orders<\/a><\/li>\r\n\t
  15. Customer enquiries<\/a><\/li>\r\n\t
  16. Manage support<\/a><\/li>\r\n\t
  17. Notifications<\/a><\/li>\r\n\t
  18. Admin menu<\/a><\/li>\r\n\t
  19. Manage Stripe configuration<\/a><\/li>\r\n\t
  20. Orders<\/a><\/li>\r\n\t
  21. Manage orders<\/a><\/li>\r\n\t
  22. Manage product<\/a><\/li>\r\n\t
  23. Manage category<\/a><\/li>\r\n<\/ol>\r\n

    App screens<\/strong><\/h3>\r\n
      \r\n\t
    1. Onboarding<\/strong>
      \r\n\"\"
      \r\n

      This screen introduces the user to the app and the various functions that it provides.
      \r\nThis screen can be configured to only display on the first use of the app, it can also include a skip link.
      \r\nYou can configure the number of slides to display and the text and imagery can be changed to create your desired look.
      \r\nThis screen uses the onboarding component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    2. Terms<\/strong>
      \r\n\"\"
      \r\n

      This screen will display the \u201cterms of use\u201d text and will only be shown the first time a user opens the app.
      \r\nThe text displayed should be amended to reflect the terms required for your app.
      \r\nThis screen uses the text component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    3. Sign in<\/strong>
      \r\n\"\"
      \r\n

      This screen provides security for the app only allowing access to registered users.
      \r\nThis screen can be configured to reflect your security preferences.
      \r\nLogging in will also define the user and ensure the correct permissions are shown per user.
      \r\nClick to learn more about the       login component<\/a>.<\/p>\r\n<\/li>\r\n\t

    4. Sign up<\/strong>
      \r\n\"\"
      \r\n

      This screen provides the ability for users to register for access to the app, simply delete the screen if you do not want to enable self-registration.
      \r\nThis screen can be configured to include any signup requirements needed by adding or removing form fields.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    5. Main menu<\/strong>
      \r\n\"\"
      \r\n

      The main menu screen provides users with a clear and easy-to-use interface that allows them to navigate through the app, access the user’s profile, or access the admin settings.
      \r\nWe have set up a few menu items to filter the “Products” screen by the selected category. This allows users to see the products of a certain category quickly.
      \r\nOn this screen, users will be asked if they want to allow the app to send them push notifications.
      \r\nThis screen uses the grid component,       learn more here<\/a>, and to learn more about filtering products via a link, click here<\/a>.
      \r\nThis screen includes the notification prompt, to learn more about push notifications,       click here<\/a>.<\/p>\r\n<\/li>\r\n\t

    6. About us<\/strong>
      \r\n\"\"
      \r\n

      This is an informational screen with details about the organization, the business, and the app creators. Common examples of the content in \u201cAbout us\u201d screens include the company’s history, mission statement, and values. It may also include contact information for customers or potential collaborators. This screen serves as an opportunity to create a personal connection with visitors and establish credibility and trust.
      \r\nThere is a button that allows users to share your app online.
      \r\nThis screen uses the       container<\/a>, text<\/a>, and button<\/a> components.<\/p>\r\n<\/li>\r\n\t

    7. Products<\/strong>
      \r\n\"\"
      \r\n

      This screen includes the list of products for sale. This is a highly customized screen to allow users to select the products and quantity to add to the shopping cart. The List from data source component has been customized to display the quantity selector and the \u201c+ Add\u201d button in the product detail view, and the list view shows when a product is out of stock and when it has a sale price.
      \r\nThe shopping cart overlay will automatically appear on the screen and update the content and total cost as users add more items.
      \r\nClicking the \u201cView basket\u201d button will direct users to the \u201cCart\u201d screen.
      \r\nIf the logged-in user is an Admin, they can add more products, edit, or delete products from this screen directly.
      \r\nThis screen uses the List from data source component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    8. Categories<\/strong>
      \r\n\"\"
      \r\n

      This screen lists the product categories. App users can click on a category to filter the \u201cProducts\u201d screen by the selected category.
      \r\nAdmin users can create, edit and delete categories from this screen. The product categories can be added or updated when editing a product.
      \r\nThis screen uses the List from data source component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    9. Cart<\/strong>
      \r\n\"\"
      \r\n

      This screen will show the user the products they have added to their shopping basket and the total cost of the purchase. Users can remove products, or increase and decrease the quantity of a product.
      \r\nThis screen is highly customized so that you don’t need to build a checkout system from scratch. We have       used Stripe to process the payments<\/a>. You’ll need to create a Stripe account, which is free, and this feature is available on all our app plans.
      \r\nInitially, the app solution is in Demo mode and which means that it won’t have any Stripe configuration set up and allows you to try the entire purchasing flow without setting up anything else.
      \r\nWe do recommend you then configure the app with Stripe test keys to test the purchasing flow with the Stripe checkout system. This won’t charge you as you will use a demo card. For more information see the       Stripe configuration section<\/a> of this article.
      \r\nWe have also implemented a \u201cstock hold\u201d feature that as soon as the user clicks \u201cCheckout\u201d the system will save those products and they will be removed from the total stock quantity for 30 minutes. If a user doesn’t complete the checkout within those 30 minutes, the checkout session will end and the products will be put back into stock for others to buy.
      \r\nThis screen uses the       container<\/a>, text<\/a>, and button<\/a> components to set the base layout.<\/p>\r\n<\/li>\r\n\t

    10. Confirmation<\/strong>
      \r\n\"\"
      \r\n

      This screen is a customized screen that shows users a confirmation that the order was completed successfully.
      \r\nThis screen will also send users the confirmation email and clear the basket. This email contains the products the user has ordered and is sent to their email. The code for the email is in the       screen’s JavaScript<\/a>.
      \r\nThis screen uses the       container<\/a>, text<\/a>, and button<\/a> components to set the base layout.<\/p>\r\n<\/li>\r\n\t

    11. Canceled checkout<\/strong>
      \r\n\"\"
      \r\n

      This screen is a customized screen that is shown to users either when they cancel the checkout, or when something goes wrong during the checkout process. If something goes wrong a detailed error message won’t be shown to indicate what the error was, but this screen allows users to retry checking out again.
      \r\nThis screen uses the       container<\/a>, text<\/a>, and button<\/a> components to set the base layout.<\/p>\r\n<\/li>\r\n\t

    12. My account<\/strong>
      \r\n\"\"
      \r\n

      This screen displays a menu with links that allow users to edit their profile information, review and see the status of their orders, create a new support enquiry, see their notifications, or log out from the app.
      \r\nThis screen uses the List with small thumbnails component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    13. Edit profile<\/strong>
      \r\n\"\"
      \r\n

      This screen enables the user to edit their profile. It can be accessed from the \u201cMy account\u201d menu by selecting \u201cEdit profile\u201d.
      \r\nUsers will also be able to adjust their notification settings by enabling or disabling push and email notifications individually. Email notifications are enabled by default.
      \r\nUsers will be shown a confirmation screen when they save the changes.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    14. My orders<\/strong>
      \r\n\"\"
      \r\n

      This screen allows users to see their orders. Users are able to see the order status at a glance and see all of the details in the detailed view.
      \r\nThis screen uses the List from data source component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    15. Customer enquiries<\/strong>
      \r\n\"\"
      \r\n

      This screen allows users to create a support enquiry and see their existing enquiries. Users are able to search and filter the enquiries by category and date created.
      \r\nWhen a user clicks the \u201c+\u201d button to create a new enquiry, the user will be directed to the \u201cManage support\u201d screen.
      \r\nNote:<\/strong> With this version of our app solution it’s not expected that further replies to the enquiry are done in the app, this will be done via email, and the app owner can configure this form to receive an email notification when a new enquiry is submitted.
      \r\nThis screen uses the List from data source component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    16. Manage support<\/strong>
      \r\n\"\"
      \r\n

      This screen enables the user to create a new support enquiry. The name and email fields will be automatically filled in, and the user will be able to select the order ID from the list of their previous orders.
      \r\nAdmin users can use this screen to update the status of the enquiry.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    17. Notifications<\/strong>
      \r\n\"\"
      \r\n

      This screen displays all the push notifications that have been sent to the user.
      \r\nPush notifications are sent by the app when an order or a support enquiry is updated, or when an admin sends an in-app notification via Fliplet Studio.
      \r\nThis screen uses the notification inbox component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    18. Admin menu<\/strong>
      \r\n\"\"
      \r\n

      This screen displays a menu with links to the management screens. App admins have access to all customer enquiries, and all orders placed by the app users, they can add, update and delete product categories, and manage the Stripe configuration settings.
      \r\nThis screen uses the List small thumbnails component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    19. Manage Stripe configuration<\/strong>
      \r\n\"\"
      \r\n

      On this screen, you’ll be able to configure everything related to the Stripe integration, including the test and live API keys, the currency used at checkout, the allowed shipping countries, and the shipping rates.
      \r\nThis screen is essential and must be configured for you to be able to test the product checkout before publishing the app. We recommend you set up both Test and Live keys and then use the \u201cTest mode\u201d field to select between the modes. We recommend you start with the \u201cDemo\u201d mode just to try the purchase flow, then change to \u201cTest\u201d mode to test the actual checkout of a product with a sample card, and finally when everything is done and working as expected you should switch to the \u201cLive\u201d mode before publishing the app and share it with your customers.
      \r\nA more detailed guide on how to get each of the required items and IDs is displayed at the top of the screen and in the       Stripe configuration section<\/a> in this article.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    20. Orders<\/strong>
      \r\n\"\"
      \r\n

      This screen allows admin users to see the order history. Admin users are able to update or delete an order.
      \r\nThis screen uses the List from data source component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    21. Manage orders<\/strong>
      \r\n\"\"
      \r\n

      This screen enables the admin users to edit an order from the \u201cOrders\u201d screen.
      \r\nAdmin users can update the order status, and add a tracking code and a courier service to help the customer track their shipped order.
      \r\nNote:<\/strong> Fulfillment and shipping of orders can’t be done via the app in this current version. If you are selling physical products, fulfillment and shipping must be either done outside the app or you’ll have to ask a developer to integrate the services you use with the app.       Learn more about integrating with external APIs<\/a>. Depending on the type of integration you may have to upgrade your app plan. See our pricing details<\/a>.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    22. Manage product<\/strong>
      \r\n\"\"
      \r\n

      This screen is used to edit or create a new product to be listed.
      \r\nWhen creating a new product, admin users will need to create the product in Stripe first and then come back to this screen to complete it. Detailed instructions on how to create products in Stripe can be found at the top of this screen and in the       Stripe configuration section<\/a> in this article.
      \r\nWhile editing or creating a product, any new categories that are assigned will be automatically added to the list of product categories.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n\t

    23. Manage category<\/strong>
      \r\n\"\"
      \r\n

      This screen is used to edit or create a new product category.
      \r\nCategories can then be assigned to products and new categories can be created by typing a new category in a product listing.
      \r\nThis screen uses the form component,       learn more here<\/a>.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

       <\/p>\r\n

      Stripe configuration<\/strong><\/h3>\r\n
        \r\n\t
      1. Create a Stripe account<\/strong>
        \r\n
          \r\n\t
        1. Go to Stripe’s registration website page (https:\/\/dashboard.stripe.com\/register<\/a>) and fill in the required fields and press \u201cCreate account\u201d.<\/li>\r\n\t
        2. On the next screen, you’ll be asked to verify your email address by clicking a link sent to your email.<\/li>\r\n\t
        3. Choose if you want to start filling in your business details or do it later. If you chose to do it later, you will find a link in the top left corner called \u201cContinue activating\u201d which will take you to the form you need to fill in. This is a required step to receive payments.<\/li>\r\n\t
        4. If you choose to fill in your business details, select your account type: either “Individual” or “Business”, and Stripe will prompt you to fill out some additional information about yourself or your business. This may include your address, bank account details, tax ID number, and other relevant information.<\/li>\r\n\t
        5. After filling in your business details, or if you skip it, you’ll be taken to your Stripe dashboard. From there, you can set up your payment processing preferences, including creating products, setting prices, and managing subscriptions.<\/li>\r\n<\/ol>\r\n

          Congratulations! You’ve now successfully created a Stripe account. If you have any questions or issues, you can contact Stripe’s customer support team<\/a> for assistance at any time.<\/p>\r\n<\/li>\r\n\t

        6. Change between Stripe Test and Live modes<\/strong>
          \r\n

          You’ll need to activate payments on your account to enable the Live mode, otherwise, Stripe will default it to Test mode.
          \r\nOnce you can toggle between the Live and Test modes, you will find the toggle button on the top right corner called \u201cTest mode\u201d. When the toggle is on, it becomes orange which means that you are in Test mode.
          \r\nLive and Test modes are independent of each other, this means that products, API keys, shipping rates, etc, won’t be copied between modes, you will need to create them on each mode individually.
          \r\nWe recommend trying out the Test mode before you move on to the Live mode.<\/p>\r\n<\/li>\r\n\t

        7. How to get the Stripe Test Publishable and Secret keys<\/strong>
          \r\n

          Once logged into your Stripe account, you will be directed to the Stripe Dashboard. Here make sure you enable the Test mode, and after that, next to it you will find a button called \u201cDevelopers\u201d.
          \r\nPressing it will take you to the technical section of Stripe. Choose \u201cAPI keys\u201d from the top menu and you will find both keys under the \u201cStandard keys\u201d section.
          \r\nThe Publishable key is visible and ready to be copied, you can simply click it to copy it. The Secret key is hidden and shouldn’t be shared with anyone.
          \r\nTo reveal the Secret key, click the \u201cReveal test key\u201d button, and then click the key to copy it.<\/p>\r\n<\/li>\r\n\t

        8. How to get the Stripe Live Publishable and Secret keys<\/strong>
          \r\n

          Once logged into your Stripe account, you will be directed to the Stripe Dashboard. Here make sure you disable the Test mode, and after that, next to it you will find a button called \u201cDevelopers\u201d.
          \r\nPressing it will take you to the developer-focused section of Stripe. Choose \u201cAPI keys\u201d from the top menu and you will find both keys under the \u201cStandard keys\u201d section.
          \r\nThe Publishable key is visible and ready to be copied, you can simply click it to copy it. The Secret key is hidden and shouldn’t be shared with anyone.
          \r\nTo reveal the Secret key, click the \u201cReveal key\u201d button, and then click the key to copy it.<\/p>\r\n<\/li>\r\n\t

        9. How to get the Stripe Signing key<\/strong>
          \r\n

          Once you have both the Publishable and Secret keys, go to your app, and switch to prewiew mode. Once in preview mode, log in using your admin login details.<\/p>\r\n

            \r\n\t
          1. Whilst in preview mode, navigate to the Admin menu > Stripe configuration, enter the Publishable and Secret keys in the respective fields, and save the settings.<\/li>\r\n\t
          2. Making sure to stay in preview mode,  navigate to the Products screen. The screen will show you an alert that starts with \u201cCopy the following webhook URL to configure in Stripe\u2026\u201d, at the end of that alert you will have a URL to copy, make sure to copy this.<\/li>\r\n\t
          3. Log in to your Stripe account and then click \u201cDeveloper\u201d on the top right corner. Once on the developer-focused section, choose \u201cWebhook\u201d from the top menu, and next click \u201cAdd an endpoint\u201d.<\/li>\r\n\t
          4. Paste the URL you copied into the endpoint URL field, and in the \u201cSelect events to listen to\u201d field select the following 3 events:\r\n\r\n
              \r\n\t
            1. customer.subscription.updated<\/li>\r\n\t
            2. customer.subscription.deleted<\/li>\r\n\t
            3. customer.subscription.created<\/li>\r\n<\/ol>\r\n<\/li>\r\n\t
            4. Click \u201cAdd endpoint\u201d.<\/li>\r\n<\/ol>\r\n

              You will be taken to the webhook details page and where it says \u201cSigning secret\u201d, click the \u201cReveal\u201d button and copy the key that is shown.<\/p>\r\n<\/li>\r\n\t

            5. Add a new product with a price<\/strong>
              \r\n

              Once logged into your Stripe account, you will be directed to the Stripe Dashboard.<\/p>\r\n

                \r\n\t
              1. From the very top menu, click the \u201cProduct\u201d link.<\/li>\r\n\t
              2. Click the \u201c+ Add product\u201d button on the right corner.<\/li>\r\n\t
              3. Enter the name of the product you want to add, and then enter the price details for the product including the value and the currency. Since the eCommerce app solution doesn’t support subscriptions yet, you should choose \u201cOne time\u201d under the price value.<\/li>\r\n\t
              4. You can set up more than one price, if you have a Sale price, you can add another price by clicking the \u201c+ Add another price\u201d button, and following the steps mentioned above.<\/li>\r\n\t
              5. Once done, click the \u201cSave product\u201d button on the top right corner.You’ll be directed to the product detail page and here you will have your prices IDs to copy, in the \u201cPricing\u201d section. The ID you need is the string of characters under \u201cAPI ID\u201d. Copy the ID and paste it into the “Stripe Price ID” (or “Stripe Sale Price ID”, if it is a sale price) in the product edit form. <\/li>\r\n<\/ol>\r\n

                Important:<\/strong> If you change the currency in the Admin menu > Stripe configuration on your app, you will need to update the prices in Stripe to match the same currency.<\/p>\r\n<\/li>\r\n\t

              6. Add or update a price to an existing product<\/strong>
                \r\n

                If you have products already created you can add or edit their associated prices.
                \r\nOnce logged into your Stripe account, you will be directed to the Stripe Dashboard.
                \r\nFrom the very top menu, click the \u201cProduct\u201d link. Once you are on the Products page you will see a list of all your products. Click the one you want to edit:<\/p>\r\n

                  \r\n\t
                1. In the Pricing section, you will see the prices associated with the product. Click the \u201c…\u201d of the price you want to edit., and then click \u201cEdit price\u201d.<\/li>\r\n\t
                2. If the price was never used in a purchase before, you are free to edit every field in the price and then click \u201cSave\u201d.<\/li>\r\n\t
                3. However, if the price has been used before, you will need to archive the current price, you can do this by clicking the \u201c…\u201d of the price you want to archive, and then clicking \u201cArchive price\u201d.<\/li>\r\n\t
                4. Next, you will need to create a new price, to do that click the \u201c+ Add anotherOh  price\u201d button to the right of the Pricing section.<\/li>\r\n\t
                5. Fill in the price details and click \u201cAdd price\u201d.<\/li>\r\n<\/ol>\r\n

                  The new price will have a different price ID, and you will need to copy it to add to your app. The ID you need is the string of characters under \u201cAPI ID\u201d.
                  \r\nCopy the ID and paste it into the “Stripe Price ID” (or “Stripe Sale Price ID”, if it is a sale price) in the product edit form. <\/p>\r\n<\/li>\r\n\t

                6. How to get the price ID<\/strong>
                  \r\n

                  Once logged into your Stripe account, you will be directed to the Stripe Dashboard.<\/p>\r\n

                    \r\n\t
                  1. From the very top menu, click the \u201cProduct\u201d link. Once you are on the Products page you will see a list of all your products. Click the one you want to price for.<\/li>\r\n\t
                  2. Go to the Pricing section of the product details page, and you will find the list of prices of the product.<\/li>\r\n\t
                  3. The ID you need is the string of characters under \u201cAPI ID\u201d.<\/li>\r\n\t
                  4. Copy the ID and paste it into the “Stripe Price ID” (or “Stripe Sale Price ID”, if it is a sale price) in the product edit form. <\/li>\r\n<\/ol>\r\n<\/li>\r\n\t
                  5. How to create a shipping rate and get their ID<\/strong>
                    \r\n

                    Once logged into your Stripe account, you will be directed to the Stripe Dashboard.
                    \r\nFrom the very top menu, click the \u201cProduct\u201d link. Once you are on the Products page, click the \u201cShipping rate\u201d link on the top menu and then:<\/p>\r\n

                      \r\n\t
                    1. Click the \u201c+ Create shipping rate\u201d button.<\/li>\r\n\t
                    2. Enter the amount or leave it at 0 for Free delivery.<\/li>\r\n\t
                    3. Give it a description that will be shown to your users.<\/li>\r\n\t
                    4. Optionally, but recommended, enter the estimated shipping time.<\/li>\r\n\t
                    5. Click the \u201cSave\u201d button.You will land on the shipping rate detail page, and here you can find the ID you need to copy in front of the label \u201cID\u201d. Click the ID to copy it and paste it into the Admin menu > Stripe configuration on your app.<\/li>\r\n<\/ol>\r\n

                      To add another shipping rate, follow the same steps mentioned above.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

                       <\/p>\r\n

                      \r\n

                      Related Articles<\/strong><\/p>\r\n