Supporting Endpoints in Shopify Bridge PoS App

Solved
JØhn
Excursionist
37 5 9

Hey all,

This is my first PoS app and I'm having a really confusing experience. I started out with the NextJS framework in https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react, stopping before any GraphQL.

So this means tech stack is NextJS, React, Node,js, and I'm using ngrok to tunnel the app I'm hosting locally. As in that tutorial, I'm using koa-shopify-auth to authenticate. https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify#set-...

What I'm aiming for is an Edit Cart integration that discounts products based on their tags, and at the moment I'm just trying to get the /promotions endpoints working.

So I then have an app, available at the ngrok address. I see that NextJS supports API routing through JS files in an /api subfolder in /pages.

https://nextjs.org/docs/api-routes/introduction

I make /pages/api/promotions.js and the other two with literally the test responses from the docs: https://shopify.dev/docs/pos/pos-cart-app-extension#app-extension-architecture

Which looks something like this:

// promotions.js

export default (req, res) => {
  let message = {
    "type": "simple_action_list",
    "actions": [
      {
        "type": "flat_discount",
        "title": "Add $5.00 discount",
        "description": "5 bucks off",
        "action_id": "123ABC",
        "value": "5"
      }
    ]
  };

  return res.status(200).json(message);
}


In the app extension settings, it's:

  • Not embedded in Shopify admin (I thought this may be a barrier to getting responses as JSON)
  • Embedded as a Shopify PoS app
  • Embedded as a PoS cart action

And when I'm using it on my phone on the new PoS app, I have a tile for its general page (which authenticates and shows the tutorial markup with a resourcepicker), and a tile for the cart actions, which shows "No available discounts".

The docs say that to support an Edit Cart action, the PoS app will try to hit the 3 endpoints, and if it gets good responses, then it's working. When the PoS app tries to hit /api/promotions, I see the transaction in the Terminal where ngrok is running, and it gets a 302 'Found' for api/promotions. I believe this is a redirect and could be why it's not working.

I'm thinking this may be an authentication thing - it's being redirected for authentication and thus doesn't get the response it needs. I've tried opening the general app page from the other tile to enable cookies, then trying, but I'm not sure what the issue is.

I've also tried using Postman to query my endpoint - since there's no authentication there, it gets an auth callback as a response - and just going to the url in my browser, which does work and shows the json I'd expect. 

Does anyone know how you'd typically set up these endpoints? Is there anything obvious I'm doing wrong?

0 Likes
JØhn
Excursionist
37 5 9

This is an accepted solution.

Update: In the end, I was right, it was the authentication. If it quacks like a duck, etc. I've commented out 

server.use(verifyRequest());

in my server.js, and that's done it. Now I have a host of other issues, but it doesn't make sense for those to be in the same thread, so I'll open another one. I can confirm that after making this change, I'm seeing what you'd expect of an Edit Cart action app, with an apply button and an unapply button working with a $5 discount.

0 Likes