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]
A Redwood/Stripe integration made easy
License: MIT License
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]
Create an upgrade cli command that will allow users to upgrade without having to run set up command
yarn @redwoodjs-stripe/cli@latest upgrade
As of v5 Redwoodjs makes use of an object queryResult
in Cells to display results of query.
V5 upgrade guide
Add README to scoped packages, referring to main package readme
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
Features concerning the installation/setting up of the integration
yarn rw-stripe setup
--one-time
or --subscription
or no flags
--subscription
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
When using the setup command have an option to opt in to having a Demo page generated
stripeCustomers
instead of listStripeCustomers
Create a StripePricesCell that fetches a list of stripe Prices.
Update: only thing really neccesary are services and sdld
const { checkout } = useStripeCheckout()
const { redirectToStripeCustomerPortal, configureStripeCustomerPortal } = useStripeCustomerPortal()
products
to stripeItems
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
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
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)
Investigate services for creating docs for the plugin. Once setup docs with following sections:
Build a Proof of Concept to demonstrate Developer Experience
This task is being worked on in the following repo:
Payments
Create a CLI command to save STRIPE_PK
,STRIPE_SK
and STRIPE_WEBHOOK_SK
to .env
file
create demo app for script
Repo: redwoodjs-stripe-demo
๐ 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.
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.
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,
to
sdls: { ...sdls, ...stripeSchemas },
services: { ...services, ...stripeServices },
.env
fileNote: This is a tracking for the current setup script as seen in version 0.1.0-alpha.5
Change Title to "Stripe Demo"
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 customerQS={'email: [email protected]'}/>
-->
<StripeProvider customer={ {
qs: 'email: [email protected]',
newCustomerParams: {...}
} }/>
useStripeCustomerSearch(qs)
--> useStripeLoggedCustomerSearch({ qs, newCustomerParams })
Add a script to redwoodjs-stripe package.json that points users to monorepo post install. Should work something like this:
yarn add redwoodjs-stripe
npx @redwoodjs-stripe/cli@latest setup
Stripe is not supported much in Africa so to support users in Africa a Paystack integration will be helpful
Have users navigate to /stripe-demo
after setup script has run
Rename variables, functions, schemas etc to include Stripe and better describe their purpose
useCheckoutHandler
--> useStripeCheckoutHandler
Prices
--> StripePrices
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
For the demo page when user returns from a successful checkout, then clearCart
const { clearCart } = useStripeCart()
// ...
if(params.success) {
clearCart()
}
Version 1 ETA: 30 July 2022
Disclaimer: Dates are generous estimates
graphql.js
See #57 for other planned improvements
export services
individually so that they can be used separately by users wanting to build their own services inside their app
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.
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.
Supporting both builds might make more people happy than just supporting one and not the other
Create separate react hook for logic involving authenticated users/customers
suggested api:
const { currentCustomer } = useStripeCustomer()
Notes
Open to suggestions on the name
Add cart support, maybe linked to stripe paymentIntent (?) and logged in Customer.
Use example-store as example for not logged in users... just needs to be linked to StripeCustomers
api
const [addToCart, removeFromCart, clearCart, updateCartItem ] = useStripeCart()
no ui
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
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
Retrieve session information on successful checkout.
For demo, display email of user?
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
Add Webhook functionality
Optimise StripeProvider code to prevent unnecessary re-renders.
Add linting. Use the same config as RW. Inside the shared.js
file in the redwood repo.
Create StripeSessionCell which fetches session data
yarn redwoodjs-stripe add cell session
Scripts need to record in .env
STRIPE_PK
STRIPE_SK
API Wishlist:
yarn rw plugin setup stripe
Scaffold out code to help users add webhook event data to events because Stripe only stores that data for 30 days
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.