Billing API, app approve charge again after cookies is cleared

Solved
mannenson
Tourist
11 1 5

Hello,

I am playing around a bit with the Shopify CLI. I have created a node app through the CLI and used the command shopify create billing->recurring-billing to generate billing.

When I install the app I get prompted to accept the billing. If I clear the cookies in the browser and click in to the already installed app in my test store this prompt shows up once again.
Is this how its supposed to work or is there some additional implementation needed to get the billing process to work properly? If so how do I implement billing so this issue does not occur.

Thanks in advance!

 

0 Likes
mannenson
Tourist
11 1 5

Below is the code in server.js CLI creates after cli created project and I have run shopify create billing.

 

import "@babel/polyfill";
import dotenv from "dotenv";
import "isomorphic-fetch";
import createShopifyAuth, { verifyRequest } from "@shopify/koa-shopify-auth";
import graphQLProxy, { ApiVersion } from "@shopify/koa-shopify-graphql-proxy";
import Koa from "koa";
import next from "next";
import Router from "koa-router";
import session from "koa-session";
import * as handlers from "./handlers/index";
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 8081;
const dev = process.env.NODE_ENV !== "production";
const app = next({
  dev
});
const handle = app.getRequestHandler();
const { SHOPIFY_API_SECRET, SHOPIFY_API_KEY, SCOPES } = process.env;
app.prepare().then(() => {
  const server = new Koa();
  const router = new Router();
  server.use(
    session(
      {
        sameSite: "none",
        secure: true
      },
      server
    )
  );
  server.keys = [SHOPIFY_API_SECRET];
  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET,
      scopes: [SCOPES],

      async afterAuth(ctx) {
        //Auth token and shop available in session
        //Redirect to shop upon auth
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: "none"
        });
        server.context.client = await handlers.createClient(shop, accessToken);

        await handlers.getSubscriptionUrl(ctx);
      }
    })
  );
  server.use(
    graphQLProxy({
      version: ApiVersion.October19
    })
  );
  router.get("(.*)", verifyRequest(), async ctx => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });
  server.use(router.allowedMethods());
  server.use(router.routes());
  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

 

 

 

If Im not misunderstanding how this is working I still do need to implement logic to fetch a list of current subscriptions for the store and only if no active subscription exist execute getSubscriptionUrl(). Or else every time proper cookies is not there user will be presented to approve a new charge. This charge would inactivate the old charge and it would just be a mess.

Please help to confirm my understanding is correct?

Thanks in advance.

SyedUzairAlii
Tourist
10 0 0

@mannenson  hello there ! i'm also having the exact same issue i build an app by following the Build a Shopify App With Node.js and Next.js tutorial. 
in my app i have a 30 days trial period but if i use the app from different browser or in same browser after couple of days, the Authentication happens again prompt the billing screen again to user which is overwriting the previous accepts billing and resetting the trial period back to 30 days .

did you find any solution to this ? do i need to make any logic in my server.js file ?

Thanks !

0 Likes
mannenson
Tourist
11 1 5

This is an accepted solution.

Hi @SyedUzairAlii,

I implemented some logic to check for any active charges using https://shopify.dev/docs/admin-api/rest/reference/billing/recurringapplicationcharge.

If there is an active charge i will not create a new charge. It can also good to know that there can only be one active charge at a time, that is why the old active charge is cancelled when a new one is created.

Hope it will help you.

Cheers!

SyedUzairAlii
Tourist
10 0 0

@mannenson  Thanks a lot ! can you confirm me this will be the endpoint you were talking about . 
Thanks !

 

SyedUzairAlii_0-1610020382091.png

 

0 Likes
mannenson
Tourist
11 1 5

Yes correct, it is that one.
Then just check through the array response for status active. Should do the trick :).

SyedUzairAlii
Tourist
10 0 0

Awesome thanks !

0 Likes