Adding Billing to Node and Express App

The1987
Shopify Partner
24 3 5

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

Replies 3 (3)
Zameer
Shopify Staff
Shopify Staff
297 31 89

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.

The1987
Shopify Partner
24 3 5

Thank you @Zameer 

myhackinfo
Shopify Partner
2 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);
});