Solid components for Stripe.js and Stripe Elements
npm install solid-stripe
Solid components for Stripe.js and Elements.
> [!NOTE]
> The aim of this module is to have @stripe/react-stripe-js for Solid with feature parity. You should be able to follow the React docs and examples using this module.
``bash`
npm install @stripe/stripe-js solid-stripe
`tsx
import { createSignal } from 'solid-js';
import { loadStripe } from '@stripe/stripe-js';
import {
PaymentElement,
Elements,
useStripe,
useElements,
} from 'solid-stripe';
const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = createSignal(null);
const handleSubmit = async (event) => {
event.preventDefault();
if (elements() === null) {
return;
}
// Trigger form validation and wallet collection
const { error: submitError } = await elements().submit();
if (submitError) {
// Show error to your customer
setErrorMessage(submitError.message);
return;
}
// Create the PaymentIntent and obtain clientSecret from your server endpoint
const res = await fetch('/create-intent', {
method: 'POST',
});
const { client_secret: clientSecret } = await res.json();
const { error } = await stripe().confirmPayment({
//Elements instance that was used to create the Payment Element
elements: elements(),
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
setErrorMessage(error.message);
} else {
// Your customer will be redirected to your return_url. For some paymentreturn_url
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the .
}
};
return (
const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {
/.../
},
};
const App = () => {
const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
return (
)
};
export default App;
``
MIT