Documentation for creating checkout and setting shipping address
yungobiwan opened this issue · comments
Hello! I'm having issues creating a checkout or setting an address
After I invoke the method
return Shopify.checkout([{ quantity: 1,variant: 22912315077 }]);
I get the error
Exception '-[__NSCFNumber count]: unrecognized selector sent to instance 0xb00000555ae2ec53' was thrown while invoking checkout on target RNShopify with params ( ( { quantity = 1; variant = 22912315077; } ), 2, 3 )
What is the right way to call checkout, setCustomerInformation and complete checkout. Can the documentation be updated with an example. I am able to get the product object calling Shopify.getProductsPage() but having issues with the other methods
Hey jungobiwan!
For checkout, you need to use the variant object that you got from Shopify when fetching products. Like this:
Shopify.getProducts(1) .then((products) => { const cart = [{quantity: 1, variant: products[0].variants[0]}]; Shopify.checkout(_.cloneDeep(cart)).then(() => { // Set customer information }); });
You're currently using IDs?
As for customer information, you need an object with fields mentioned in the official documentation (it's the same for both iOS and Android):
Look under: Specifying Billing and Shipping Addresses
Here is an example:
const addressInformation = { firstName: 'First name', lastName: 'Last name', address1: 'Address', city: 'City', zip: '10000', countryCode: 'US', }; Shopify.setCustomerInformation(customer@somerandommail.com, addressInformation).then(() => { });
I'll update the documentation with detailed examples for all methods but I hope that this will help you in the meantime!
Yes I was using the variant id. I have updated my code but I getting ' cannot read property 'title' of undefined' using
Shopify.getProductsPage(1).then(products => { return products}).then(products => { return Shopify.checkout([{ quantity: 1,variant: products[0].variants[0] }]); }).then(res => { ... })
I forgot to mention that you also need to include the product to which the variant belongs. We use it to give you a user-friendly error message in case the checkout fails (see index.js for details). Just include the product, like this:
Shopify.getProducts(1) .then((products) => { const cart = [{item: products[0], quantity: 1, variant: products[0].variants[0]}]; Shopify.checkout(_.cloneDeep(cart)).then(() => { // Set customer information }); });
Note that the key for a product in the cart is item. A cart is an array of item (product), variant and quantity.
We're using this bridge in a real app but the documentation is currently lagging and we'll fix that asap!
Btw, if you got that error, it seems that your checkout failed with Shopify.
Okay thats seemed to do the trick. I wasn't able to complete the checkout because I'm still having issues with getting and setting shipping rate
Shopify.getShippingRates()
I'm getting an empty array
I was able to get it to work. Works like a charm!
Awesome! So, you are able to perform the checkout to completion?
Yes I was able to complete the checkout. Works perfectly. Let me know if you need any help with the documentation.
Thanks again.
@Air-Miha
I am using the following code to create a checkout
Shopify.checkout(cart).then(checkout => { Shopify.setCustomerInformation('test@gmail.com', addressInformation).then(() => {
As I see the checkout is created in RNShopify.m.
The next step will be to display and complete the checkout, but I did not found how I can do this in the mobile app (not inside webview or browser) using the created checkout? Could you provide or give a link to a sample code to display and complete the checkout
Thank you!
You'll need your own UI form to capture user information. Then you just need to update the checkout. Check how we did it in our Shopify app:
https://github.com/shoutem/extensions
Go to shoutem-shopify and study the screens. These screens dispatch checkout actions. The actionCreators.js file call the Shopify API.
Now you reminded me that I need to update the documentation here, with all of the methods.
I've updated the documentation and sent a PR. I included images and code examples for each checkout step, with some helpful links. Let me know what you think and if you need anything more!
@Air-Miha,
Thank you! Have nothing to add. The documentation is clear and images are helpful to understand the checkout flow.
@Air-Miha I get an error message saying "There was an unknown error. Please contact our customer support" every time I try to checkout. Which I'm assuming means it's failing on Shopify's end because the docs say there should be a specific error message telling me what's going wrong. But I have a feeling customer support probably won't be able to help me.
Are there any specific permissions I might need to set in shopify admin or anything in order to checkout? I can load my products and collections and everything but I get that same unknown error when attempting a checkout.
I'm curious if the checkout method throws an error every time if all of the steps (setCustomerInformation, getShippingRates, etc) are not completed? My cart and addressInformation log out correctly, and if they weren't correct would the error message tell me that? Or tell me I'm missing shipping info instead of the unknown error?
@austincline09 I'm currently facing the same issue than you. Did you find a solution ?
@yungobiwan
I'm getting an empty array too, on
Shopify.getShippingRates()
How did you solve it?
@austincline09 @DEEvent I'm running into the same issue: "There was an unknown error. Please contact our customer support" every time I try to checkout.
Were you guys able to get around this? Thanks ahead of time.