# Step-by-Step Guide to Designing a Cinema Ticketing App with Google Sheets, Flutter, and Fincra API

## Prerequisites:

This app will be built with the flutter framework, using google sheets for storing the data and the Fincra API for receiving payments. For this you'll need:

*   Flutter version 3.3.3
    
*   A Google Account with Google Cloud Console
    
*   A Fincra Merchant account
    

### Goal:

At the end of this guide, you will have built a mobile app that connects to a Google spreadsheet to pull listed movie data, let users buy movie tickets, and automatically update the spreadsheet with new information whenever a purchase is made.

![](https://firebasestorage.googleapis.com/v0/b/paul-portfolio-6aec1.appspot.com/o/ezgif.com-gif-maker%20(1)%20(1).gif?alt=media&token=5e8935b9-1275-4735-9fde-d66d0d8b7cbf align="center")

### Outline:

*   Step 1: Set up Google Sheets Credentials
    
*   Step 2: Set up Google Spreadsheet Document
    
*   Step 3: Set up your Fincra Account
    
*   Step 4: Set up Flutter Local Code
    

#### Step 1: Set up Google Sheets Credentials

To get started, you'll need to get credentials from your Google console by following the process below to let your app access the spreadsheet.

*   Go to [https://console.developers.google.com](https://console.developers.google.com)
    
*   Create a new project and name it "**movie-app"**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922223629/JbrGqiWUJ.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922303383/55OYPuoyP.png align="center")
    
*   Click the menu and go to **"Enable API & Services"**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922376991/hsABIW_YR.png align="center")
    
*   Enable **Google Drive API** and **Google Sheets API**
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922434726/H2U8TTEtY.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922440683/VSkqhcMZS.png align="center")
    
*   Next, you'll need to create a service account credentials, click the Menu button, and under **API & Services,** click **Credentials,** then click **Create Credentials** and create a **Service Account**.
    
    *A service account is a robot account that can access your documents (spreadsheet) and perform actions on your behalf.*
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922500944/x3eFcWzJR.png align="center")
    
*   Fill in the service account details
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922584289/l1mYWYgKa.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922590958/nvwB77odQ.png align="center")
    
*   Once the service account is created, click **Keys** and create a new JSON key, and it should automatically download the JSON file.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670885917677/sNDfqdWlk.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670922964588/4iBLektQ5.png align="center")
    

#### Step 2: Set up Google Spreadsheet Document

*   Create a new Google Spreadsheet document, or make a copy of this one  
    https://docs.google.com/spreadsheets/d/1gzCSczMfb1s8sXy81unXs3vR3JMBwFVTdJxDxk19ScI
    
*   Invite your service account to have edit access to the spreadsheet
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670923151667/c3dLXtIOh.png align="center")
    
*   Make sure you have two sheets named **Movies** and **Payments** respectively
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670923234280/uzBvIyn3W.png align="center")
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670886688419/vKkJVEwFD.png align="center")

*Movies Table*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670886722910/Wfzd52QYT.png align="center")

*Payments Table*

#### Step 3: Set up your Fincra Account

*   Go to [https://app.fincra.com/auth/signup](https://app.fincra.com/auth/signup) to open an account
    
*   After signing up you should have access to a test account like the one below, don't worry the test account is fine for this guide
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670924140188/j3PdvHNfw.png align="center")
    

#### Step 4: Set up Flutter Local Code

*   To get started quickly, I've already implemented the UI of the movie app, all you'll need to do is clone the flutter app repo
    
    Here: [https://github.com/pauleke65/movie\_app](https://github.com/pauleke65/movie_app)
    
    Next, you'll need to configure the Google sheets service to let the app use the service account you previously created and access the spreadsheet.
    
*   Open the `google_sheet.dart` file and update the credentials with the ones in the previously downloaded JSON file.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670886993344/ynMCFJdbU.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670887175852/ZAkkmSq5b.png align="center")

*   Make sure to add your spreadsheet id in the `_spreadsheetId` variable
    
    **Sample:** `https://docs.google.com/spreadsheets/d/1gzCSczMfb1s8sXy81unXs3vR3JMBwFVTdJxDxk19ScI` where **1gzCSczMfb1s8sXy81unXs3vR3JMBwFVTdJxDxk19ScI** is the spreadsheet id.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670925478810/yvOyCc4lV.png align="center")

*   Next, open the `payments.dart` file and update it with your Fincra API Credentials
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670887352866/jj64eJEMo.png align="center")

*   Open your Fincra dashboard and go to **Settings**, then copy your **Business Id** and paste it in `businessId`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670925110398/SH2tlPMtX.png align="center")

*   Next Click **API Key & Webhook**
    
*   Paste your **Secret Key** in `apiKey` and your **Public Key** in `publicKey`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1670887485157/RUHMMOCGe.png align="center")

*   In the `Payment` class, you will find two main functions `getCheckoutLink()` which uses the **Checkout > Create Checkout** endpoint to generate a checkout link that the user can use for payments.
    
    More info [here](https://docs.fincra.com/reference/create-checkout)
    
*   And the `verifyPayment()` method, which uses the **Checkout > Verify Payment** endpoint to verify the status of the payment if it was *successful* or it's still *pending*.
    
    More info [here](https://docs.fincra.com/reference/verify-payment)
    
*   Now, in your terminal run `flutter pub get` to download the dependencies, then `flutter run` to get your app up and running.
    

Congratulations🎉, you just created a cross-platform app with Flutter that uses Google Sheets as its database and the Fincra API to receive payments😃

### Conclusion

So what exactly just happened?

Well, let me explain.

First, we set up our Google console service account and credentials so that we could let our app access our spreadsheet in order to retrieve the list of movies, and record payment history whenever a payment is made.

Next, we created our google spreadsheet, opened a Fincra account and set up our Flutter app that pulls the list of movies from the Google sheets and lets the user pay for a movie ticket with Fincra while recording the transactions history on the Google sheets table.

Voila✨