Shopify / js-buy-sdk

The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It is based on Shopify's API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.
https://shopify.github.io/js-buy-sdk
MIT License
985 stars 260 forks source link

completedAt: null, order: null on checkout object after a successful checkout flow #917

Open mud1 opened 1 year ago

mud1 commented 1 year ago

Hi all!

Bug details

Describe the bug I create a checkout object with the Shopify Buy SDK client, that has a checkoutId. The checkoutId is saved to localStorage so it can be accessed later. When the user finishes the checkout flow (via client.webUrl), my custom script written in the Shopify Admin (Settings -> Checkout -> Additional scripts) redirects back the customer to my site's "successful checkout" page. This page gets the checkout object again, with the updated data, completedAt with the date, order: object with order details. It stopped working. Now, the Shopify Buy SDK client returns back an outdated checkout object for the same checkoutId! It worked before perfectly fine.

To Reproduce Steps to reproduce the behaviour:

  1. checkout = await state.client.checkout.fetch(checkoutId);
  2. Complete the checkout via Shopify's checkout flow
  3. Fetch the checkout with the same checkoutId
  4. completedAt: null, order: null

Network details x-request-id: c38e0d5f-c0a6-4a57-bab5-d441b74f63b9 x-shopify-api-version: 2022-07 x-sdk-version: 2.16.1

Expected behavior The checkout object that is returned is updated with the completedAt property and order (and possibly other) property. Should work as before.

Environment (please complete the following information):

shopify-checkout-completedat-null

mud1 commented 1 year ago

It's still not working. Could you please check the request id? Do you need more information? Anyone else experiencing this issue?

NikoD-93 commented 1 year ago

A client's e-commerce site went down completely due to a very similar issue. No updates to the code. orderStatusUrl was no longer populating.

mud1 commented 1 year ago

@NikoD-93 Did you solve the issue? I did a workaround to get some property via query string, but it's not ideal. Had to implement some additional checks in the checkout flow after the successful order. I still think it's a bug in the Shopify Buy SDK and/or the Storefront API / other Shopify API. They updated their codebase and now it's not working anymore.

Renesauve commented 1 year ago

You aren't alone my friend!

Store was working as intended and now for some reason this value isn't getting updated after a customer completes the checkout process.

I opened a ticket and after some back and forth they told me they identified and fixed the problem but still seems to not work.

Will report back here if I find out more!

CalebBarnes commented 1 year ago

I'm also having this issue. completedAt is null even after completing checkout. This breaks sites for any customer who wants to make a 2nd purchase.

Do you guys have any ideas for a workaround? This seems like this taking a long time to be fixed!

NikoD-93 commented 1 year ago

Sorry for the late reply. Yep, still having the problem. I'm thinking the source is the storefront api itself. Making the check without the sdk still yielded null for me.

Fairly frustrating. I'm currently using an alternative, much less than ideal check.

Seems like it's quite a few of us that are running into this.

On Fri, Oct 14, 2022, 9:41 AM mud1 @.***> wrote:

@NikoD-93 https://github.com/NikoD-93 Did you solve the issue? I did a workaround to get some property via query string, but it's not ideal. Had to implement some additional checks in the checkout flow after the successful order. I still think it's a bug in the Shopify Buy SDK and/or the Storefront API / other Shopify API. They updated their codebase and now it's not working anymore.

— Reply to this email directly, view it on GitHub https://github.com/Shopify/js-buy-sdk/issues/917#issuecomment-1279102276, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN53WOK74FAC6RJ42XDGPP3WDFWJJANCNFSM6AAAAAAQ7N3UHY . You are receiving this because you were mentioned.Message ID: @.***>

Renesauve commented 1 year ago

What was the alternative solution that you decided to go with?

I'm afraid we may have to find another solution as well for the time being

If you don't mind sharing! @NikoD-93 :)

trickstar13 commented 1 year ago

I am having the same problem here. I would really appreciate it if anyone can share the solution.

vguenoff commented 1 year ago

+1 completedAt is null even after completing checkout. This breaks sites for any customer who wants to make a 2nd purchase.

eatmoarrice commented 1 year ago

+1 completedAt and order are null after checkout. I reverted back to 2.11.0 which worked for me before but it's still broken. It's possible the issue is at the source and not this client. This is the second time this month I've had issues with Shopify that were on Shopify's side.

CalebBarnes commented 1 year ago

On the order status page we should be able to use the additional scripts field to add an order completed cookie and then read this cookie in the app to determine when to clear out the old checkout.

It's not an ideal fix but it should help until this gets properly fixed.

CalebBarnes commented 1 year ago

+1 completedAt and order are null after checkout. I reverted back to 2.11.0 which worked for me before but it's still broken. It's possible the issue is at the source and not this client. This is the second time this month I've had issues with Shopify that were on Shopify's side.

Yes, it seems that this is affecting old API versions. People's shops are breaking with zero code changes. Not good!

mud1 commented 1 year ago

It's most likely an issue with the Storefront API not the client SDK. However, I opened the ticket here for them to notice. After all, the problem affects the client SDK, so in turn it affects the custom apps as well.

In the meantime what I did if anyone is interested: Shopify Admin page -> Settings -> Checkout -> Additional scripts (here you can inject custom scripts):

<script>
    if (window.location.pathname.indexOf('checkouts') !== -1) {
        window.location = `{my-domain}/checkout-success?order={{checkout.order.order_number}}&customer={{checkout.customer.first_name}}`;
    }
</script>

This way I could grab the data I needed for my custom checkout page from the query params. In my React app's context:

// WORKAROUND: Shopify Buy SDK has a bug right now (2022-10-12) and does not set completedAt. if (window.location.pathname.includes('checkout-success')) { checkout = await state.client.checkout.create(); }

Hope this helps someone.

trickstar13 commented 1 year ago

Thank you so much @mud1 , it worked and helped me a lot! I have also contacted Shopify Partner Support and hoping the developers to solve the issue.

ianjosephwilson commented 1 year ago

This is a big issue for me as well. I'm using this library https://github.com/Shopify/buy-button-js (as linked into remote issue via GitHub). I don't have a custom checkout page so I'm not sure if I could use this workaround.

Could this be permission issue + failed documentation? I have unauthenticated_write for checkouts but maybe I need to add read, even though I understood it to be implicitly allowed with write ?

ianjosephwilson commented 1 year ago

The storefront API started returning the correct values again for me sometime between Wednesday and now.