chrisvdm / redwoodjs-stripe Goto Github PK

A Redwood/Stripe integration made easy

License: MIT License

JavaScript 78.77% CSS 6.72% TypeScript 13.93% Shell 0.59%

redwoodjs-stripe's Introduction

🌈 Hiya I'm Chris!

I enjoy using React and its friends for building stuff. I'm currently working on my first open source project redwoodjs-stripe, an integration package between Redwood and Stripe.

If you'd like to say hi you can email me at [email protected]

redwoodjs-stripe's People

Contributors

Stargazers

Watchers

Forkers

jaycedowns42 schybo gdfhhhh ageddesi emigal joshdotjs

redwoodjs-stripe's Issues

Enhancement: Use queryResult in Cells template

As of v5 Redwoodjs makes use of an object queryResult in Cells to display results of query.
V5 upgrade guide

Feature: testing

Use unit tests for functions
Integration tests with apps in /examples folder*
Test on push to remote branch
PR can only be merged if all tests pass

* To be created

Cleanup: ReadME

Add README to scoped packages, referring to main package readme

Feature: upgrade cli command

Create an upgrade cli command that will allow users to upgrade without having to run set up command

yarn @redwoodjs-stripe/cli@latest upgrade

upgrade api and web packages to latest versions

Feature: Add Stripe Webhook events to DB

Scaffold out code to help users add webhook event data to events because Stripe only stores that data for 30 days

demo app

create demo app for script

instructions
"clean" redwood app
use branding (if possible)

Repo: redwoodjs-stripe-demo

Add Paystack integration

Stripe is not supported much in Africa so to support users in Africa a Paystack integration will be helpful

Document API for setup (Proof of Concept)
Example store
Backwards engineer Paystack integration with similar API to Stripe (?)

Finesse: Use plugin in example-store

Feature: export services individually

export services individually so that they can be used separately by users wanting to build their own services inside their app

Feature: import services and sdls via scripts

Insert the following into api/src/functions/graphql.js

import { stripeSchemas, stripeServices } from 'redwoodjs-stripe/api'

Change the following lines in the createGraphQLHandler():

sdls,
services,

 sdls: { ...sdls, ...stripeSchemas },
  services: { ...services, ...stripeServices },

Typescript Support

Hello, I am trying to use this for a RedwoodJS Typescript project but I am running into a few errors.

The first issue was that the StripeItemsParamsInput type was unknown.

I copied the stripeItem.sdl.ts and customerPortal.sdl.ts and got that working.

But now my GraphQL query returns null for the query below.

export const QUERY = gql`
  query StripeItems($params: StripeItemsParamsInput) {
    stripeItems(params: $params) {
      id
      name
      description
      images
      price
      type
    }
  }
`

This only happens when in the Redwood Typescript app. When I try this in a Redwood Javascript app, it works fine with the same Stripe account.

One difference I noticed was that the Javascript app has the following in graphql.js while the Typescript app doesn't. I'm not sure if this is whats causing it. I did not do anything other than the installation instructions and adding the two SDL files above.

Thank you for your time.

Minor api improvements: Round 2

Change schema and services file names to include "stripe"
Use rw naming conventions for nouns(?) queries
example to retrieve a list of customers use stripeCustomers instead of listStripeCustomers

Feature: Linting

Add linting. Use the same config as RW. Inside the shared.js file in the redwood repo.

shared.js file

Example Store

Build an example Store to demonstrate the power of Stripe and Redwood together and also tackle the plugin from a different direction.

This task is being worked on in the following repo:
Example Store

Feature: Script to point to monorepo

Add a script to redwoodjs-stripe package.json that points users to monorepo post install. Should work something like this:
yarn add redwoodjs-stripe

runs npx @redwoodjs-stripe/cli@latest setup

Feature: Keep Schemas synced with StripeApi

Somehow (?) use StripeOpenApi to keep sdl files automatically maintained.

Current idea: Have a github action that updates an online sdl lib. Link to lib so that Stripe sdls are always current. User does not need to update plugin for latest schemas.

Feature: Subscriptions via checkout

infer the checkout session mode from cart. If any items in the cart has a type of "recurring" (subscription) then pass subscription as session mode(docs)
create Stripe Customer Portals (docs)
save customerId from session/retrieve customerId by Email or query(?)

enhance: Create new customer if not found

Update functionality inside provider so that a user can opt into creating a new Stripe customer if the customer is not found

api changes:

StripeProvider

 <StripeProvider customerQS={'email: [email protected]'}/>

-->

<StripeProvider customer={ {
     qs: 'email: [email protected]',
     newCustomerParams: {...}
    } }/>

useStripeCustomerSearch(qs) --> useStripeLoggedCustomerSearch({ qs, newCustomerParams })
Modify the hook to specifically look for logged in Stripe Customers and also create new Stripe customers if a newCustomerParams object is passed

Feature: Seed Products and Prices

When setting up plugin via cli the user has the option to add a --seed flag which runs a seeding script that populates their stripe account with dummy products and prices.

If no flag is provided then user needs to be asked whether they would like to create dummy data.

Seeding should also have a separate command.
yarn rw-stripe seed

Docs: investigate and setup documentation

Investigate services for creating docs for the plugin. Once setup docs with following sections:

Quick start
Current progress
Planned Features (section goes into detail about what's coming)
Contributing
Useful Links

Feature: StripeSessionCell

Create StripeSessionCell which fetches session data

create schemas and services
create template folder to copy over
a script for adding cells/feature individually
yarn redwoodjs-stripe add cell session

Features in detail: Setup

Setup

Features concerning the installation/setting up of the integration
yarn rw-stripe setup

--one-time or --subscription or no flags

--subscription

create db tbl for Users 🍬
hooks including api code
- useCustomerPortal

Disclaimer:
Names for functions and stuff subject to change. Also features will be added and removed as neccesary. 🍬 is used as a nice-to-have feature

Edit:
Removed setup for dbAuth

Enhancement: Optimise StripeProvider

Optimise StripeProvider code to prevent unnecessary re-renders.

Improve: setup script

insert env vars instead of replacing .env file
insert schemas and services instead if replacing file (Or discuss better api for sharing schemas and services)
TS support (At very least not break)
#126

Note: This is a tracking for the current setup script as seen in version 0.1.0-alpha.5

API wishlist: Setup plugin from app

Be able to install and setup a plugin via rw commands.
Something like

yarn rw setup plugin stripe

Searches registry for package prefixed with redwoodjs- and ending with stripe, i.e. redwoodjs-stripe
then searches for a setup script or a some file with setup instructions( register functions, add schemas, add services etc)

Feature: Webhook functionality

Add Webhook functionality

Add "stripeWebhook" function to setup script

Feature: StripePricesCell

Create a StripePricesCell that fetches a list of stripe Prices.

user should be able to filter the list
user should be able to select which fields to use
user should be able to give components for each of the cell states i.e. failure, loading and success

Update: only thing really neccesary are services and sdld

Cleanup: separate hooks into separate files

Cleanup the 'web/hooks' dir so that each (react) hook has its own file

web
   hooks
      index.js

becomes ...

web
  hooks
    useStripeCheckout.js
    useStripeCustomerSearch.js
    ...
    index.js

Feature: dev setup

Add dev script to make contributing easier
Add Contributors documentation

Better way to export services

At the moment the exporting of services to use in rw app feels a bit hacky.

inside plugin
redwoodjs-stripe/src/api/services/index.js

import { checkout, createStripeCheckoutSession }  from './checkouts/checkouts'
import * as stripeItems from './stripeItems/stripeItems'
import { stripeCustomerSearch, retrieveStripeCustomer, createStripeCustomer, searchLatestStripeCustomer} from './customers/customers'
import * as customerPortal from './customerPortal/customerPortal'

// shape services object
export const stripeServices = {
    checkouts_checkouts: { checkout, createStripeCheckoutSession },
    customers_customers: {
        stripeCustomerSearch, retrieveStripeCustomer, createStripeCustomer, searchLatestStripeCustomer
    },
    customerPortal_customerPortal: customerPortal,
    stripeItems_stripeItems: stripeItems
}

in an app

rw-app/src/api/functions/graphql.js

import { stripeSchemas, stripeServices } from 'redwoodjs-stripe/api'
...
export const handler = createGraphQLHandler({
  loggerConfig: { logger, options: {} },
  directives,
  sdls: { ...sdls, ...stripeSchemas },
  services: { ...services, ...stripeServices },
  onException: () => {
    // Disconnect from your database with an unhandled exception.
    db.$disconnect()
  },
})

Surely theres a better way... makeSchemas? better package setup? idk

Setup: Navigate to demo page

Have users navigate to /stripe-demo after setup script has run

Feature: Basic CLI setup process

This setup would most likely be temporary and subject to change on feedback

Cleanup: Rename

Rename variables, functions, schemas etc to include Stripe and better describe their purpose

useCheckoutHandler --> useStripeCheckoutHandler
Prices --> StripePrices

Webhook Function Limit Reached on Netlify Deploy

👋 Firstly, thanks so much for creating this repository! It's been super helpful.

After integrating, running setup and creating the StripeWebhook function I'm getting errors due to file size limits when deploying to Netlify. Specifically:

The function "STRIPEWEBHOOK" is larger than the 50MB limit. Please consider reducing it.
The function "GRAPHQL" is larger than the 50MB limit. Please consider reducing it.

Both of those pull in 'redwoodjs-stripe/api', and after using cost-of-modules to check the size of the imports ( cost-of-modules --no-install --yarn) it showed that:

name                            │ children     │ size   |
redwoodjs-stripe                │ 155          │ 33.18M │
stripe                          │ 10           │ 10.13M │

(I import stripe to access the user's profile after receiving their customerId via await stripe.customers.retrieve(checkoutData.customer))

Is there anyway you could look into reducing the size of the module; or have any ideas on reducing the size? It's a hard limit from AWS that restricts Netlify and I've tried their potential solutions of not including certain dependencies - but it still doesn't seem to cut the size down enough:

[functions]
included_files = ["!node_modules/cypress/**/*", "!node_modules/react-spring/**/*", "!node_modules/@heroicons/react/**/*", "!node_modules/@apollo/react-hooks/**/*", "!node_modules/react-html-parser/**/*", "!node_modules/quill/**/*", "!node_modules/mailchimp-api-v3/**/*", "!node_modules/compromise/**/*", "!node_modules/@headlessui/react/**/*", "!node_modules/quill-magic-url/**/*", "!node_modules/wikipedia/**/*", "!node_modules/react-loading-icons/**/*", "!node_modules/@tailwindcss/typography/**/*"]

I'll also be reaching out to Netlify's support since if it is truly removing all those other un-needed imports, it should be around ~45MB and less than the 50MB limit. But figured I'd reach out here as well, since redwoodjs-stripe is by and far my largest import and could continue to cause issues in the future.

Feature: Clear Cart on successful checkout

For the demo page when user returns from a successful checkout, then clearCart

const { clearCart } = useStripeCart()
// ...
if(params.success) {
  clearCart()
}

Improv: Convert StripeCartProvider to StripeProvider

Convert StripeCartProvider to StripeProvider that will not only handle cart functionality but also to store the current user email that will be used once to query the customerId from Stripe using Stripe's Customer Search api (in case moving over from an old storefront that used metadata for customer references)

example api/pseudo-code

const {user} = useSomeAuthTool()
<StripeProvider user = {{email: user.email}}>
  <App>
</StripeProvider>

...
const App = () => {
  const { customerId, cart } = useStripe()
}

or something like that

Proof of Concept

Build a Proof of Concept to demonstrate Developer Experience

This task is being worked on in the following repo:
Payments

Feature: Setup script to get api keys

Scripts need to record in .env

STRIPE_PK
STRIPE_SK

API Wishlist:

be able to make Redwood App aware of plugin scripts so something like this can happen
yarn rw plugin setup stripe

Improve: setup script for MVP

support for TS projects
not overwrite graphql.js

See #57 for other planned improvements

Improvement: allow custom url

Allow users to enter success and failure urls when using useCheckoutHandler

const checkout = useCheckoutHandler()
...
await checkout({
  cart: cart, 
  successUrl: 'your.domain/checkout-success',
  cancelUrl: 'your.domain/checkout-failure'
})

defaults to localhost:8910/stripe-demo?success=true&sessionId={CHECKOUT_SESSION_ID} and localhost:8910/stripe-demo?success=false

Note: Remember to make changes in templates as well

Enhancements: minor API changes

Future-proof react hooks by having them all return an object

const { checkout } = useStripeCheckout()
const { redirectToStripeCustomerPortal, configureStripeCustomerPortal } = useStripeCustomerPortal()

Rename products to stripeItems
Fix Mutations and queries that require objects to avoid unnecessary syntax

Roadmap v1

Create Readme/Proposal for package
#3 (Dec 2021)
- Gather Feedback
- Fine tune
#4 (March 2021)
- Purpose is to demonstrate the power of Stripe and Redwoodjs together
- Example store roadmap
- Share with communities
Use feedback and findings from POC to build package Version 1
- Features
  - Subscription payments via Stripe Checkout
    Includes:
    - Customer Portal creation
  - Once-off payments via Stripe Checkout
  - Simplified use of webhooks for Stripe events
  - Simplified cart
- Create example store using plugin (Jun 2022)
- Open to Stripe and Redwood communities to test before releasing V1 (Jun 2022)
  - Twitter
  - Community forums
  - Github Discussions
Share with Redwood and Stripe community

Version 1 ETA: 30 July 2022

Disclaimer: Dates are generous estimates

Feature: session retrieval

Retrieve session information on successful checkout.

For demo, display email of user?

Feature- create separate hook for logged in customers

Create separate react hook for logic involving authenticated users/customers

suggested api:

const { currentCustomer } = useStripeCustomer()

Notes
Open to suggestions on the name