Saving Custom form data and use it in shop front in Shopify using Nodejs & React

Question

I'm still learning shopify app development,

I've followed THIS tutorial and created a simple app settings page by checking shopify docs.

Now my App page looks something like below

Now, I want to save this data and use this data to make some changes to cart total at the time of checkout. So, At the moment my concern is, How do I store the data?

Once I stored the data, How can I create custom fields at the checkout page if these 2 fields are filled?

My code is exactly same as they explained in above tutorial, and my current Index class looks something like below.

import { EmptyState, Page, Layout, FormLayout, Card, TextField } from "@shopify/polaris";

function Index() {
    return (
        <Page
        title="App Settings"
        subtitle="All App related settings will go here"
        primaryAction={{content: 'Save'}}>
            <Layout>
                <Layout.AnnotatedSection
                title="API Settings"
                description="Get API Key and API secret.">
                <Card title="API Key and API secret" sectioned>
                <FormLayout>
                    <TextField label="API Key" onChange={() => {}} />
                    <TextField label="API Secret" onChange={() => {}} />
                </FormLayout>
                </Card>
                </Layout.AnnotatedSection>
            </Layout>
        </Page>
    )
};

export default Index;

And my project structure is as below.

I'm trying to figure out this since last 2 days, But I did not find any helpful resources which I can refer at this stage of learning.

Please provide helpful resources/tutorials/links/code if you can.

Answer 1

To show the Shipping's rates at cart page. What you need to do is integrate Google Map at your cart page something like this site

• After integrating the Map you need to get the location name region/country wise.
• Then you need to call this Shopify Shipping Zone API and get the available shipping rate which you'd configured in the Shopify shipping settings.
• In the API's response match the region/country according to the entered location from cart page and show the Shipping's rates.

Reference (not exactly the same but just as an example)