Cart is not cleared on completion of a checkout about js-buy-sdk HOT 43 CLOSED

We're aiming for around april. There may be a beta of js buy available a couple months before that though.

I definitely feel your pain and understand that you're getting a lot of complaints, and I wish I had a better answer. Unfortunately, anything to do with taking payments and managing totals for customers can't be undertaken lightly with the number of merchants in our system.

Please know, however, that you've been heard, and what we're working on is going to be pretty good when it finally gets released 😄 .

from js-buy-sdk.

I've come up with a slightly different approach to clearing the cart after a purchase based on @peteshilling approach.

Instead of adding

<script> window.location = <custom thank you page> </script>

to the Additional scripts section of the Settings > Checkout page, I added

<iframe style="display:none;" src="https://yourdomain.com/clearCart.html"></iframe>

Note: clearCart.html should contain a simple script to load the users cart and clear it from localStorage.

This approach gives the added benefit of keeping the user on the same window and original checkout page while clearing the carts content.

Obviously, this approach will only work if the iframe is able to load completely before the user closes the page.

from js-buy-sdk.

Solving this would be huge. The only solution I've come up with is to redirect users to a thank you page after checkout that clears the cart from local storage.

from js-buy-sdk.

+1 ... I'm going to do the same redirect trick but it's not ideal.

from js-buy-sdk.

We have a way to manage this, but still not sure on the best approach to implement in the API.

I should have news in the next couple weeks.

from js-buy-sdk.

@peterbrunton @lepsalex We've built an example detailing the best way to watch the checkout. The most pertinent part is here: https://github.com/Shopify/js-buy-sdk/pull/142/files#diff-ce801cc7cadd385c53c5ab7f3b477719R48

from js-buy-sdk.

Tagged the wrong Peter @minasmart

from js-buy-sdk.

Sorry. @peterbrunton. @peteshilling see above!

from js-buy-sdk.

Thanks! This looks like a good option, although keeping users in the same window during checkout would be ideal.

from js-buy-sdk.

@peteshilling that's why I didn't build it into the SDK. We have a cart and checkout API coming soon, and I didn't want to build out a new behaviour which will soon be deprecated. This is temporary compromise.

from js-buy-sdk.

Great, thanks! I'll use this method for now.

On Thu, Jun 16, 2016 at 8:25 AM, Mina Smart [email protected]
wrote:

@peteshilling https://github.com/peteshilling that's why I didn't build
it into the SDK. We have a cart and checkout API coming soon, and I didn't
want to build out a new behaviour which will soon be deprecated. This is
temporary compromise.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#98 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AC4x4MLeXU9LMLSSHYYxUO6K7B3inhZFks5qMWr8gaJpZM4IRUyb
.

from js-buy-sdk.

Thanks! This is a great option to have. I think we will stick with our redirect countdown and thank you page reset since for this particular application of the API we're required to stay within the same window.

Good to hear about the upcoming API, I looked at all your current webhooks to see if anything could send back something we could use but nothing was 100%.

from js-buy-sdk.

We tried putting the checkout link into an iFrame, so that we could get postMessages out of it to know when someone has checked out successfully. But it appears you have some sort of CSP protections against the checkout in an iFrame.

Seems like it should be easy for you guys to add a hasCheckedOut: true parameter to the CartModel right? Then we could just test the model on a setInterval() at the very least.

from js-buy-sdk.

+1 for building it into the SDK. Probably even have an event you can subscribe to.

Anyways, can you confirm you checked this out? If it still doesn't work, can you give some context into your environment/setup i.e browser etc?

from js-buy-sdk.

If anyone's interested, I ended up simply redirecting the user to a custom thank you page that clears the cart from local storage. Works well enough. To set it up just add a simple redirect to the 'Additional Scripts' box on the Settings > Checkout page.

<script>
window.location = <custom thank you page>
</script>

Then on the thank you page:

localStorage.removeItem('shopifyCart');

from js-buy-sdk.

@peteshilling thanks for this. But then how does the customer get to see the order completed page? I guess your thank you page is just replicating the Shopify page right?

from js-buy-sdk.

@drewbaker we couldn't think a way to securely show the order details on the custom thank you page (how do you verify the user is the one who purchased?), so we simply show a generic message for all users. Not ideal (the biggest trade-off of this solution), but we found it acceptable since they get emailed an order summary after checkout.

from js-buy-sdk.

We don't actually have an API to support something like hasCheckoutOut: true. Right now the cart is stored in local storage, and we have no way of indicating what checkout object it's tied to, or if the checkout has been completed. We are currently developing an API to support this, but it'll be a bit of time before we're able to switch over. Sorry for not being of more help.

from js-buy-sdk.

@minasmart has there been any update on the hasCheckedOut parameter? Would be great to have this in place going in to holiday sales.

from js-buy-sdk.

This feature relies on a checkout API that isn't yet built. It's in progress, and we'll be trying it out on some internal apps soon. Release, however, won't be until the new year. Sorry about that!

from js-buy-sdk.

Too bad. Can tell you this is a huge pain point for external integrations. We get a hefty handful of complaints about this per week.

If you know yet, does new year mean end of January or end of August?

from js-buy-sdk.

Cool, would love to join the beta. Glad to hear your team is working so hard on it.

from js-buy-sdk.

@strikerforce Thank for the idea. I will test it soon. That's a very ingenious solution.

from js-buy-sdk.

@strikerforce Finally I managed to test your solution, but it seems that shopify doesn't allow iframes to be loaded dynamically. This is the error I get:

Refused to display 'https://xxxxxxxxx.com/store/clear/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Did you run into this issue as well?

Thanks,

from js-buy-sdk.

X-frame-origin is set by the server providing the iframe. That's not a Shopify thing. Hope that helps :)

from js-buy-sdk.

@alfsaav Awesome to see you trying this approach out. Try changing X-Frame-Options from SAMEORIGIN to ALLOWALL (bad for security, not recommended, quick fix to see if works) or ALLOW-FROM https://checkout.shopify.com/ (not well supported, have fallback) on your web server.

For configuring X-Frame-Options, here is a good reference:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Examples

If you choose ALLOW-FROM (or ALLOWALL for that matter), then for your fallback (really should be main security overall), you may want to look at frame-ancestors within CSP(Content Security Policy).

Here is a good reference for CSP:
https://content-security-policy.com/

However, if all of the above is not possible, JSONP is your friend.

from js-buy-sdk.

I have tried the example, but I saw no messages being posted by the iframe.
This is easily solvable by adding a custom script to the order page, but shouldn't it be at least documented? Is there something I'm missing?

from js-buy-sdk.

@minasmart, is @strikerforce's idea being taken as the solution here, or is a fix still in the works for ~April from Shopify?

from js-buy-sdk.

I came up with an iframe solution as well, but it appears that the Shopify Thank You page has a security policy to limit child src's to the same domain. So I don't think an iframe can be put into the page (assuming browser complies). My only solution so far is a redirect by to the main site to clear the cart or to have the cart automatically expire after a period of time.

from js-buy-sdk.

@JonMcL if you are referring to the X-Frame-Options header, that says nothing about included iframe, only that the page itself cannot be in an iframe. An iframe can be indeed put into the order complete page, provided that the X-Frame-Options value of the URL you are trying to load allows it

from js-buy-sdk.

@agos There is actually a child-src CSP directive in the page. When I tried adding an iframe to the page (to empty the cart from my own domain), Chrome reported:
Refused to frame 'http://example.com/' because it violates the following Content Security Policy directive: "child-src 'self' https://* blob: data:".

However, I gave up too quickly and I am just now noticing that an iframe with an https src should actually work. I was doing tests with a non-secure iframe. I solved my cart issue with a redirect to my site, and then a redirect back to the checkout page (with a query parameter added to avoid repeats). I might try an iframe again once I have the site up and running on a secure domain.

from js-buy-sdk.

@minasmart back in November you mentioned April-ish might be a possibility on a fix here. We are still getting lots up upset and confused customers here. Any fix, even a beta in sight?

from js-buy-sdk.

This is resolved in the v1.0alpha.

The readme and branch are available here, and the node module can be installed with npm install shopify-buy@alpha.

The alpha part of this build isn't so much build quality, as it is interface stability. The API that drives this is stable, so the alpha should continue to work for quite some time. Full release of this build will happen once we've done more vetting that we've built the interface correctly, and not missed anything, but I'd definitely recommend hopping on board.

There's also a migration guide available to help you migrate your existing work.

This new version of the SDK is built on our Storefront API which can also be accessed directly without an SDK if that's your preference.

from js-buy-sdk.

Excellent, will test this out next week. Thanks for the work on this!

from js-buy-sdk.

Hi Mina,

I've done some digging here, but I can't find a flavor of the v1.0alpha that can be deployed standalone as a client side integration. All of the flavors I see are meant to be baked into a Node, React, etc. implementation.

For instance, how we use the JS Buy SDK currently is:

• We call: https://sdks.shopifycdn.com/js-buy-sdk/latest/shopify-buy.polyfilled.globals.min.js
• Then we call another file (addtocart.js) where we've nipped several methods from your current JS Buy SDK docs examples

The end result is that we can a nearly full-featured Shopify experience on our large Wordpress website.

Could you please point me to the correct v1.0alpha version of the resource which contains the library needed to leverage the new methods you linked to in the migration docs?

from js-buy-sdk.

Ah ha, I didn't grock that you've moved away from delivering a version of the SDK that allow standalone <script> includes, and that we must compile our own from the source.

For anyone else running in to this, webpack it up and you'll be away.

from js-buy-sdk.

@paulisloud I've installed npm install shopify-buy@alpha but don't know how to build. Can you outline instructions? Their docs leave this part out. Also is it safe to use this on the clientside in browser. The Storefront API key seems like it's supposed to be private.

from js-buy-sdk.

Sure, basically it takes getting acquainted with Webpack. It's a lot of setup to describe, so I just shot a screencast. Here's a dropbox link to the video: https://www.dropbox.com/s/ziew8qjh3j7bfeb/Shopify%20JS%20SDK.mp4?dl=0

As far as the Storefront API key being safe, yes, this API key has limited privileges and is meant to be exposed publicly to clients.

from js-buy-sdk.

@paulisloud thanks for sharing that 👍 Agreed we definitely need more documentation and instructions. That will come before this is officially released as the stable version and hopefully even before that.

from js-buy-sdk.

@paulisloud - Amazing! Thanks so much for the vid. Good work on figuring that all out.

from js-buy-sdk.

@swalkinshaw figured you all are pretty heads down right now. I can tell you as a user trying to rollout the update, this is a huge amount of research, requiring pretty fundamental rebuilds of our architecture, front and and back. The rebuild is not a complaint, as it's actually helping me get up to speed on a number of things (first time I've needed Webpack, and GraphQL) so I feel like one of the cool kids.

The only real concern is how much slogging through very sparsely documented required changes is taking. We'd be happy to wait, but not only are we still having the issue I wrote about initially here, but the 0.9 integration seems to be falling apart since the launch of the new hotness, as people's carts are broken like never before. In the last couple weeks we have gotten endless messages from people pretty hot under the collar about the cart having problems, and our sales are down as a result.

So, getting this rolled out is pretty important to us. We'll be cranking through things a bit each day. But what would be really helpful for people in the future would probably be to make clear that there have been massive changes to the system, front and back, and that they are going to have to do lots of study to be able to roll out the new changes, and then walk them through making them as much as possible.

from js-buy-sdk.

@jamiechong my pleasure

from js-buy-sdk.

We'd be happy to wait, but not only are we still having the issue I wrote about initially here, but the 0.9 integration seems to be falling apart since the launch of the new hotness, as people's carts are broken like never before.

This is surprising to hear. This alpha is built on a new API completely separate from the old one so it should be functioning as usual. Have you reached out to support about these issues? If not, you can email me ([email protected]) with more specifics.

Everything else I agree with 👍

I'm going to lock this thread since it's off topic now. Feel free to create new issues if need be.

from js-buy-sdk.