solid-stripe
Solid wrapper for Stripe.js
Installation
To configure your project add these packages:
pnpm add @stripe/stripe-js solid-stripe
In your server-side app, add the official server-side/node version of Stripe too:
pnpm add stripe
We will use solid-start in all of the examples.
Docs
Set up Stripe
Add your private and public keys to your environment:
VITE_STRIPE_PUBLIC_KEY=pk_test_...
VITE_STRIPE_SECRET_KEY=sk_test_...
In your payment page, initialize Stripe and add a <StripeProvider> component:
import { createSignal, onMount, Show } from 'solid-js';
const App = () => {
const [stripe, setStripe] = createSignal<Stripe | null>(null);
onMount(async () => {
const result = await loadStripe(import.meta.env.VITE_STRIPE_PUBLIC_KEY);
setStripe(result);
});
return (
<Show when={stripe()} fallback={<div>Loading stripe...</div>}>
<StripeProvider stripe={stripe()}>
{/* this is where your Stripe components go */}
</StripeProvider>
</Show>
);
};
Creating a payment intent
Before making a charge, Stripe should be notified by creating a payment intent. This must happen server-side to avoid anyone tampering with the amount.
Let's add a src/lib/create-payment-intent.js to our solid-start project to create a payment intent:
import Stripe from 'stripe';
const stripe = new Stripe(import.meta.env.VITE_STRIPE_SECRET_KEY);
export default function createPaymentIntent() {
return stripe.paymentIntents.create({
amount: 1069,
currency: 'eur',
automatic_payment_methods: { enabled: true },
});
}
Accepting payments
There are several types of payment you can accept:
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
12 Sep 15, 2022
66 Dec 19, 2022
26 Nov 14, 2022
25 Dec 7, 2022
11 Dec 29, 2022
151 Oct 24, 2022