Adding Billing to Node and Express App

Chris_Hantis
Shopify Partner
28 3 6

I have been building an app with Node / Express and I want to add billing to the app, but I am confused by how the documentation is laid out.

 

Would I follow the instructions under Charge A Fee Using The Billing API   because this is under Build a Shopify App with Node and React and their does not appear to be a dedicated article for Build a Shopify App with Node and Express (unless I am overlooking it).

 

Is there an example of this in the Shopify Git Hub Repo? I may be missing it when looking.

 

Thanks,

Chris

CH
Replies 3 (3)

Zameer
Shopify Staff
297 31 90

Hey Chris,

 

We don't have language specific guides, but there are language agnostic guides that run you through the features of the Billing API which you can access here

 

If you have specific questions in regards to implementing your billing model with Node and Express, I would encourage you to post them on the forums to get help from the community.

To learn more visit the Shopify Help Center or the Community Blog.

Chris_Hantis
Shopify Partner
28 3 6

Thank you @Zameer 

CH

myhackinfo
Shopify Partner
3 0 0

React Component:

 

import {Page, Layout,List,CalloutCard} from "@shopify/polaris";
import {useNavigate} from '@shopify/app-bridge-react';
import React from 'react';
import {useCallback} from 'react';
import {useAuthenticatedFetch } from "../hooks";

export function Plans() {
    const navigate = useNavigate();
    const fetch = useAuthenticatedFetch();
    const activePlan = useCallback( async () => {

        const response = await fetch("/api/application_charges", {method:"POST", headers:{'Content-Type': 'application/json'}});
        let dataResult = await response.json();
        console.log(dataResult.confirmation_url);
        navigate(dataResult.confirmation_url);
        
    },[]);

    return (
        <Page fullWidth>
        <Layout>

            <Layout.Section oneHalf>
            <CalloutCard
                title="Premium Plan"
                illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
                primaryAction={{
                    content: '30 Day(s) Free Trial',
                    onAction: activePlan,
                }}
                >
                <p>$50 USD (Annual)</p>
               
            </CalloutCard>
            </Layout.Section>

        </Layout>
        </Page>
    );

}

 


Index.js file or server.js file: 

 

// application_charges
app.post("/api/application_charges", async (req, res) => {
 
  const application_charge = new shopify.api.rest.ApplicationCharge({session: res.locals.shopify.session});
  application_charge.name = "App Name";
  application_charge.price = 50.0;
  application_charge.return_url = `https://${storeName}/admin/apps_url`;
  application_charge.test = true;
  await application_charge.save({
    update: true,
  });

  res.status(200).send(application_charge);
});