Accessing a specific order from a Vue.js frontend

orders
vuejs
javascript

#1

I am currently trying to fetch information about a specfic order within a Vue.js frontend and get a 503 error since my authentication object only provides limited access I think (only using the public id, since this is a frontend).

Is there any way around this? I’d like to provide the user with the following checkout flow:

  1. /cart (see items -> go to /checkout)
  2. /checkout (enter address, choose payment method -> create order -> go to /checkout/:orderID)
  3. /checkout/:orderID (check items and entered details, enter payment details -> pay order -> go to /thanks/)
  4. /thanks (simple “Thank you” including order total/details/number)

In Germany this kind of flow is required by law, and while my current project is based in the UK, i’d like to figure this out anyways, since I think it’s pretty user friendly this way. Plus I’d like to be prepared for future use cases (I’m based in Germany myself).

Would this be possible at all?


#2

Hi @studioscholz

When you convert a Checkout to an Order you will get the following response:

{
	"data": {
		"type": "order",
		"id": "c79a24c1-d639-4ac7-9eb5-3565efd9c84b",
		"status": "incomplete",
		"payment": "unpaid",
		"shipping": "unfulfilled",
		"customer": {
			"name": "Ron Swanson",
			"email": "ronswanson@example.com"
		},
		"shipping_address": {
			"first_name": "Ron",
			"last_name": "Swanson",
			"phone_number": "",
			"company_name": "Moltin",
			"line_1": "British India House",
			"line_2": "15 Carliol Square",
			"city": "Newcastle upon Tyne",
			"postcode": "NE1 6UF",
			"county": "Tyne & Wear",
			"country": "UK",
			"instructions": ""
		},
		"billing_address": {
			"first_name": "Ron",
			"last_name": "Swanson",
			"company_name": "Moltin",
			"line_1": "British India House",
			"line_2": "15 Carliol Square",
			"city": "Newcastle upon Tyne",
			"postcode": "NE1 6UF",
			"county": "Tyne & Wear",
			"country": "UK"
		},
		"links": {},
		"meta": {
			"display_price": {
				"with_tax": {
					"amount": 47500,
					"currency": "USD",
					"formatted": "$475.00"
				},
				"without_tax": {
					"amount": 47500,
					"currency": "USD",
					"formatted": "$475.00"
				}
			},
			"timestamps": {
				"created_at": "2018-05-09T09:53:16.045565913Z",
				"updated_at": "2018-05-09T09:53:16.045566558Z"
			}
		},
		"relationships": {
			"items": {
				"data": [
					{
						"type": "item",
						"id": "5ff8e482-da0b-4c43-b9ae-a13d384f10bd"
					}
				]
			}
		}
	}
}

Which includes the order ID and totals (values, formatted). You’d want to persist this data until you “Pay for an order”.

If you require additional data about the order, you’ll need to use the client_credentials authentication type. You’ll want to do this lookup on the server and only return the data you require to your frontend.

I hope this helps :smile:


#3

Ah yes, totally missed this. Thanks!


#4

Is relationships.items.data[0].id the product-id or the cart-item-id? I’d like to display a name, and price of each item (much like on the /cart site) and therefore need to access that info somehow.


#5

Hey @studioscholz :wave:

The order items are a snapshot of the corresponding product at the time of the order. Meaning any updates made to that product after the order was made will not be reflected on the order.

You can include the items with the order in your API call:

/v2/orders/:id?includes=items

Or using the JS SDK:

Moltin.Orders.With('items').Get(id)


#6

Trying this I am getting a 403 (unauthorized call) error. I’m guessing this isn’t possible without providing the secret id? Since this a frontend, I can’t include that, correct?

I think this is definitely something you should consider. In my opinion there are quite a few use cases where it would be useful to fetch the products of an order (checkout process, order history, return form).


#7

Hi @studioscholz

We don’t allow access to things like orders from the implicit grant type as they contain personal information (names, emails, addresses) that we wouldn’t want everybody to have access to. We do return the order after the checkout request.

There are definitely lots of use cases for being able to access orders from the frontend after checkout, we added customer tokens so that you can access orders for specific customers in a more secure way. Check out the customer tokens blog post & api reference.

The one caveat here is that right now, you can’t access a specific order by ID using a customer token. But hitting /v2/orders?include=items with a customer token will return all orders & order items for that customer. You’ll need to do some filtering in your Vue app to get the right order & its items.

Thanks,
James


#8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.