Phase 2 - Discussion

So far things have been great! What I believe should be the goal of Phase 2 is to make this library better support backend use cases of shopping cart libraries.

Event trigger functions:

This means stuff like on and off methods for almost every interaction with the cart:

• onAddItem()
• onIncrementItem()
• onDecrementItem()
• onSetItemQuantity()
• onRemoveItem()
• onClearCart()
• onRedirectToCheckout() (Should we have this??)

This will allow any developer who needs to update a back end to send the appropriate data to the database if the user is logged in.

Is there anything missing from here? Would love input especially from @thorsten-stripe

This issue is to decide on what needs to be done, after we have an agreed-upon list of to-dos, I will create issues for each task and add them to the road map. We should also open up another issue on the implementation details on this after.

[thorsten-stripe]

I wish I could take credit for this, but I’m just stealing validated concepts from others: https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document 😉 I’ll cite my sources going forward 👍

[andria-dev]

Updating getCheckoutData to get your options for your service’s API

https://github.com/dayhaysoos/use-shopping-cart/blob/199ca808a203ea9c976ab3500f65ccc4601e5c22/use-shopping-cart/src/util.js#L46

The idea behind this abstraction is that you can make a function in util.js’s getCheckoutData object that will take in the cart and produce most if not all of the options that the service, such as Stripe, will need to go to or do a checkout. This function you create will need to match the name of your service as it is on the cart object, for stripe it’ll be stripe(cart) {/* your code */}

Updating checkoutHandler to recognize your service’s API

Then, inside of checkoutHandler you’ll need to modify it to recognize your provider. Right now we only have one, Stripe, so it looks like this:

https://github.com/dayhaysoos/use-shopping-cart/blob/199ca808a203ea9c976ab3500f65ccc4601e5c22/use-shopping-cart/src/util.js#L75

When you write yours it might look like this:

if (cart.stripe) serviceProperty = 'stripe'
else if (cart.paypal) serviceProperty = 'paypal'

My oops, necessary fix before it’ll work:

Then, as I forgot to do this in development myself, you’ll need to change this line: https://github.com/dayhaysoos/use-shopping-cart/blob/199ca808a203ea9c976ab3500f65ccc4601e5c22/use-shopping-cart/src/util.js#L97

To say:

if (needsCheckoutData) options = getCheckoutData[serviceProperty](cart)

Updating a “checkout handler” with your service’s API

By this, I mean updating or creating a call to checkoutHandler() with the appropriate options and function for your service. In this instance, you’ll likely just be updating redirectToCheckout() and checkoutSingleItem(). The format is as follows:

https://github.com/dayhaysoos/use-shopping-cart/blob/199ca808a203ea9c976ab3500f65ccc4601e5c22/use-shopping-cart/src/index.js#L126-L131

It needs the cart as the first as the first argument, then we can get to the options.

In the options, the mode property determines what modes should be allowed for use with this function, therefore, if a mode not in this list is used, an error will be thrown. Note: this might be better refactored to be specific to each service but we’ll cross that bridge if we get there.

Then below that, you can define a method/function that matches the serviceProperty name for your service, paypal most likely. The parameters for this function are serviceObject, options, parameters:

• serviceObject - your service itself that you would use to do the checkout (stripe.redirectToCheckout())
• options - you created this via getCheckoutData and if you’re in checkout-session mode you’ll have a sessionId on it as well.
• parameters - this is any extra options that you might need from the developer before you can go to the checkout, example below:

https://github.com/dayhaysoos/use-shopping-cart/blob/199ca808a203ea9c976ab3500f65ccc4601e5c22/use-shopping-cart/src/index.js#L133-L139

Other things to do:

• Allow the developer to pass in the service object. It can be either the object itself or a promise resolving to that object.
• Update TypeScript type definitions in the .d.ts file.
• Update the documentation to explain how to use the added service with this library.

And don’t forget to make a Draft PR while you’re working on all this so it’s easier to track the progress 👍