stripe-node
Tailwind CSS
stripe-node | Tailwind CSS | |
---|---|---|
39 | 1,287 | |
3,689 | 78,889 | |
1.2% | 1.6% | |
9.1 | 9.4 | |
5 days ago | 6 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
stripe-node
-
Build authenticated and paywall pages with Stripe and Xata
// File: src/pages/api/stripe/webhook.ts import Stripe from 'stripe'; import { getXataClient } from '@/xata'; import type { APIContext } from 'astro'; // Process rawBody from the request Object async function getRawBody(request: Request) { let chunks = []; let done = false; const reader = request.body.getReader(); while (!done) { const { value, done: isDone } = await reader.read(); if (value) { chunks.push(value); } done = isDone; } const bodyData = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0)); let offset = 0; for (const chunk of chunks) { bodyData.set(chunk, offset); offset += chunk.length; } return Buffer.from(bodyData); } // Stripe API Reference // https://stripe.com/docs/webhooks#webhook-endpoint-def export async function POST({ request }: APIContext) { try { const STRIPE_SECRET_KEY = import.meta.env.STRIPE_SECRET_KEY; const STRIPE_WEBHOOK_SIG = import.meta.env.STRIPE_WEBHOOK_SIG; if (!STRIPE_SECRET_KEY || !STRIPE_WEBHOOK_SIG) return new Response(null, { status: 500 }); const stripe = new Stripe(STRIPE_SECRET_KEY, { apiVersion: '2023-10-16' }); const rawBody = await getRawBody(request); let event = JSON.parse(rawBody.toString()); const sig = request.headers.get('stripe-signature'); try { event = stripe.webhooks.constructEvent(rawBody, sig, STRIPE_WEBHOOK_SIG); } catch (err) { console.log(err.message); return new Response(`Webhook Error: ${err.message}`, { status: 400 }); } if (event.type === 'checkout.session.completed' || event.type === 'payment_intent.succeeded') { const email = event.data.object?.customer_details?.email; if (email) { const xata = getXataClient(); const existingRecord = await xata.db.user.filter({ email }).getFirst(); if (existingRecord) { await xata.db.user.update(existingRecord.id, { paid: true }); } else { await xata.db.user.create({ email, paid: true }); } return new Response('marked the user as paid', { status: 200 }); } return new Response('no email of the user is found', { status: 200 }); } return new Response(JSON.stringify(event), { status: 404 }); } catch (e) { return new Response(e.message || e.toString(), { status: 500 }); } }
-
Setting Up Stripe Payments in React
Before you can start accepting payments with Stripe Checkout, you need to create a Stripe account. Visit the Stripe website and sign up for an account. Once you have created an account, you will receive an API key that you will use to authenticate your requests to the Stripe API.
-
Build and deploy a Next.js ecommerce website in 5 steps
Next, we will enable checkout and payment processing through Stripe. First, install the Stripe clients with the following command:
- Where the hell do I create these nice animations
-
Start Charging Customers with Django and DjStripe
Head to Stripe and register if you haven't already. We can use the Stripe API in Test Mode to build the e-commerce app. You can add a bank account and get verified later when you're ready to start collecting real payments.
-
Highlights from Stripe's annual 2023 letter
Stripe published its 2023 annual letter last week. Much like the previous edition it was filled with a lot of interesting nuggets. Stripe has a strong history of being fairly transparent with its practices. These range from engineering challenges through its blogs as well as thought leadership in the financial and entrepreneurship space. I personally like the writing style of this letter as it doesn’t seem corporate or stuffy. Instead it is filled with humorous anecdotes, quirky observations and intelligent historical narratives which make it a compelling read. You can read the letter here → Stripe Annual Letter: 2023
-
From Messy to Memorable: Shorten Your Links, Boost Your Brand
Stripe – payments
- Stripe Is Down
-
Hyper IDE, using No-Code and Low-Code to Generate Software
Imagine you want to create an API endpoint that allows users to register in your backend, while simultaneously making a payment towards Stripe. This could be for something that's a subscription-based service, where you charge people for access to something.
-
We made a tool to detect big signups to your SaaS app. Want to be a beta tester?
Our app – Upollo – connects with your app event data (like Segment) and payment data (like Stripe) to analyze your users and instantly figure out if someone is an important player in your industry. We also help you convert more users, reduce churn, and expand single seats to teams within a company. We're SOC 2 certified and we take data security very seriously.
Tailwind CSS
-
Essential Tools & Technologies for New Developers
Lastly, Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.
-
E-commerce checkout components built with Tailwind CSS and Flowbite
Tailwind CSS
-
Hanami and HTMX - progress bar
Sidekiq is already configured along with assets, tailwindsCSS.
- Qu'est-ce qu'un projet MERN Stack et comment créer une application CRUD avec? Partie 2/2, Tutoriel
-
How to Build Your Own ChatGPT Clone Using React & AWS Bedrock
Finally, for our front end, we’re going to be pairing Next.js with the great combination of TailwindCSS and shadcn/ui so we can focus on building the functionality of the app and let them handle making it look awesome!
-
Building an Email Assistant Application with Burr
You can use any frontend framework you want — react-based tooling, however, has a natural advantage as it models everything as a function of state, which can map 1:1 with the concept in Burr. In the demo app we use react, react-query, and tailwind, but we’ll be skipping over this largely (it is not central to the purpose of the post).
-
Shared Data-Layer Setup For Micro Frontend Application with Nx Workspace
Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
-
Preline UI + Gowebly CLI = ❤️
First, you need to make sure that you have a working Tailwind CSS project…
-
Customer service pages for e-commerce built with Tailwind CSS
Tailwind CSS
-
The best testing strategies for frontends
With better CSS approaches like TailwindCSS and Vanilla Extract (which we're heavily using) it's much easier to maintain the UI and make sure it doesn't change unexpectedly. No more conflicting CSS classes, much less CSS specificity issues and much less CSS code in general.
What are some alternatives?
sanity-next-stripe-starter - Barebones blog set-up with NextJS and Sanity. Comes with Sanity's inbuilt image handler.
flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS
stripe-node-cloudflare-worker-template - Use stripe-node in a Cloudflare Worker.
antd - An enterprise-class UI design language and React UI library
firebase-mobile-payments - Firebase Cloud Functions to create payments in native Android and iOS applications.
unocss - The instant on-demand atomic CSS engine.
react-stripe-js - React components for Stripe.js and Stripe Elements
windicss - Next generation utility-first CSS framework.
Stripe - PHP library for the Stripe API.
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
stripe-react-native - React Native library for Stripe.
Material UI - Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.