Redirect To Billing API

chong
Excursionist
32 1 3

Hi everyone, I am building an app using nodejs and React. I have no problems redirecting the billing API right after the app is installed. However, I have a separate page that lists the different plans for upgrade and there is a button for each plan where it is supposed to execute their respective createAppSubscription queries once clicked. However, I was wondering how do I redirect to billing page once a user clicks on a button? I'm sorry if my questions are vague. I am a 18 year old self-taught dev and am quite new to the game. Thank you

I've linked a sample code on how I am trying to redirect it to the billing API on buttonclick. Once again, I'm new to this so please pardon my ignorance

 

import React from 'react';
import  createApp from '@shopify/app-bridge';
import { Redirect } from "@shopify/app-bridge/actions";
import axios from 'axios';

export default function PlanUpgrade(props)
{
const app = createApp({
    apiKey: API_KEY,
    shopOrigin: shopOrigin,
});
const redirect = Redirect.create(app);
function openPlan(planUrl) {
    axios.get(planUrl)
    .then((res) => {
    redirect.dispatch(Redirect.Action.REMOTE, { url: res.data.confirmationUrl, newContext: false })
      })
      .catch(err => { console.log(err) })
  }
return(
    <section className = "page-div">
     <button onClick = { ( ) => openPlan('/server/getSubscriptionUrl') }>Select this plan</button>
    </section>
)
}

 

getSubscriptionUrl.js

 

const { default: Shopify } = require('@shopify/shopify-api');

const getSubscriptionUrl = async (accessToken, shop, returnUrl) => {
  const query = `mutation {
    appSubscriptionCreate(
      name: "Advanced Plan"
      returnUrl: "${returnUrl}"
      test: true
      lineItems: [
        {
          plan: {
            appUsagePricingDetails: {
              cappedAmount: { amount: 10, currencyCode: USD }
              terms: "$10 for Advanced Plan"
            }
          }
        }
        {
          plan: {
            appRecurringPricingDetails: {
              price: { amount: 10, currencyCode: USD }
            }
          }
        }
      ]
    )
    {
      userErrors {
        field
        message
      }
      confirmationUrl
      appSubscription {
        id
      }
    }
  }`;

  const client = new Shopify.Clients.Graphql(shop, accessToken);
  const response = await client.query({
    data: query,
  });

  return response.body.data.appSubscriptionCreate.confirmationUrl;
};

module.exports = getSubscriptionUrl;

 

 

 

 

 

0 Likes