Learn how to create a custom integration with Store Pickup + Delivery using the Shopify JS SDK

Please note: This is a working document and so is not yet complete. We have yet to fully create the first-party integration with the Shopify JS SDK. You will certainly need to be a Shopify/JS developer in order to get things up and running.

Hidden Attributes

Below is an example of how to add Store Pickup + Delivery details to your orders via the JS SDK.

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9DaGVja291dC9kMTZmM2EzMDM4Yjc4N=';const input = {    customAttributes: [        
{ key: "Checkout-Method", value: "pickup" },        
{ key: "Pickup-Location-Id", value: "1" },        
{ key: "Pickup-Location-Company", value: "Zapiet" },        
{ key: "Pickup-Location-Address-Line-1", value: "1 Hacker Way"},        
{ key: "Pickup-Location-City", value: "Menlo Park" },        
{ key: "Pickup-Location-Region", value: "California" },        
{ key: "Pickup-Location-Postal-Code", value: "90420" },        
{ key: "Pickup-Location-Country", value: "United States" },        
{ key: "Pickup-Date", value: "2019-01-31" },         
{ key: "Pickup-Time", value: "14:30" }        ]};client.checkout.updateAttributes(checkoutId, input).then((checkout) => {  // Do something with the updated checkout});

Checkout URL

When redirecting customers to the Shopify checkout process you should ensure all the parameters from the following method are appended to the URL:

Zapiet.Widget.getCheckoutParams();

So that you end up with something like:

https://zapietdemo.myshopify.com/25490972/checkouts/15f04d6ed692e309e9bf90757219df2b?checkout%5Bshipping_address%5D%5Baddress1%5D=1+Battery+Place&checkout%5Bshipping_address%5D%5Baddress2%5D=&checkout%5Bshipping_address%5D%5Bcity%5D=Manhattan&checkout%5Bshipping_address%5D%5Bcompany%5D=Zapiet+NYC&checkout%5Bshipping_address%5D%5Bcountry%5D=United+States&checkout%5Bshipping_address%5D%5Bprovince%5D=New+York&checkout%5Bshipping_address%5D%5Bzip%5D=10004&locale=en-CA&step=contact_information

This will then ensure the correct locale and details are pre-populated within the checkout process.

Did this answer your question?