Creating a Shopping Cart with the Data Store Component

[dmbe11]

Not sure, it does not look anything like my code. Here is mine perhaps that will give a clue

I am not sure if I am placing the datastore values in the correct place versus the values to be inserted into the table I call

[ben]

You have not supplied a value for all of the input fields. The value is obtained from the cart.data repeat and should look similar to dmx-bind:value="quantity"

[dmbe11]

Thank you Ben. I’ll give it a go today.

Daniel Bell, PhD
CMoN Gourmet Treats
Founder and CEO

[brad]

So, I am going to bed now but it is my mission to tackle this tutorial again in the morning. One issue I can see popping up is that using local storage it is possible that items that should no longer be available because the date of the show has passed.

So I think this is where I need to compare the cart to the database? How is that done?

[sitestreet]

Also keep in mind that it’s easy for the visitor to edit the values in their local storage so you should never take those values as accurate. They could change the price, for example.

What I do is pass just the product ID and the quantity to my checkout script. I then do another query using those IDs to get the prices and do the calculation again with the quantities. So even if the local storage says a product is 99p, my checkout will look it up and use the real value of £99 (for example). It would also mean that if a product is no longer available, it won’t be in the query and so the checkout won’t proceed with it.

The other values in the local storage I generally ignore. They are just used to populate the cart every time it’s viewed.

Hope that helps.

[brad]

Thanks for the input, guys. I am about to embark on this scary journey. My next question is that should I be able to get a working cart using this tutorial will it then be still compatible with the tutorial that @max_gb put out on Stripe Checkout integration?

Stripe Checkout Tutorial

The easiest way to integrate with Stripe is to use their hosted Checkout. It’s SCA compliant and regularly update with new features. It supports Apple and Google pay for compatible browsers. 1. Create Checkout Session For one time payments we need to create a checkout session. To do this create a server action folder called stripe and then a new action file within called checkout. This will assume that you already have a way setup to insert details of the order to the database. (For example …

[max_gb]

Yes, that Stripe tutorial was based on this data store tutorial. Check the comments section on how to get the data into your server action.

[sitestreet]

And @max_gb’s Stripe tutorial is excellent. It’s what I used for the cart I built recently

[brad]

Do you have a link to yours, @sitestreet? Would love to see it in action.

[sitestreet]

Yep, it’s in the showcases - ukpaint.co.uk. Select a category, then a product, then choose a colour and size so you can add it to the cart. The cart count updates in the top-right automatically.

[brad]

Ah, that one. Yes, I have seen it. Nice job.

[sitestreet]

That uses the technique I’ve mentioned and also @max_gb’s Stripe method.

[brad]

Has anyone who followed this tutorial been able to hook up to a payment gateway? Paypal?

I tried following the Stripe Integration tutorial but can’t even get started. I now have a wonderful shopping cart thanks to this tutorial but it’s all for not if I can’t hook it up to a payment gateway.

We need a step by step follow up tutorial for this one. Stripe or Paypal doesn’t matter. Just need some sort of step by step guide.

[sitestreet]

The tutorial @max_gb created should give you all you need to integrate Stripe. That’s exactly what I used to build mine. I’d previously got Stripe up and running using another technique but much prefer Max’s method so I would say go with that.

[TomD]

I’ve integrated payment systems with WorldPay and a few banks in the past (not with Wappler), but have no experience with Stripe. @Hyperbytes, @Antony and @max_gb have all kindly contributed very detailed tutorials on Stripe Integration. I’m not sure what the difference between them is.

I think the one by @Hyperbytes covers a more detailed type of integration. @Antony’s is for ‘SCA Compatible Payment’. Is @max_gb’s different to this - ie not SCA compatible - or is it just a different approach?

I would be grateful for any clarification. I might well consider using Stripe at some point.

[max_gb]

As far as I’m aware Brian’s tutorial is based upon the Charges API which is now no longer SCA compliant, but still usable in countries outside of the EU for the time being. Antony’s tutorial is based on Stripe Elements which is basically the embeddable card detail collection form (on-domain way of taking payment) which is SCA compliant.

Mine was based on Stripe Checkout which is a redirect to Stripe’s hosted checkout page which is SCA compliant and they are constantly adding new features to it, i.e Apple/Google Pay etc.

[TomD]

Many thanks for explaining this - it was very helpful.

[Hyperbytes]

@max_gb

As far as I’m aware Brian’s tutorial is based upon the Charges API

Yes that is correct, it is an old tutorial. I have not actually used stripe since so can’t offer and alternative at this timer. I will go back to it one day but not for a while

[Cosmo]

I am having an issue when adding a product to the data store with the quantity. I have tried different variations and after 2 days I surrender! The quantity +1 with ticks as outlined in the tutorial does not work. See attached picture. Without ticks random quantities appear, usually adding one to the previous selection. Any help to finish this would be most appreciated!

[Teodor]

@Cosmo

The quantity +1 with ticks as outlined in the tutorial does not work. See attached picture. Without ticks random quantities appear, usually adding one to the previous selection

Not quite sure i understand what you mean.
Please provide a screenshot of the code which is not working or paste it here.