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.

Installation

npm install @stripe/stripe-js solid-stripe

Minimal example

import{createSignal}from'solid-js';import{loadStripe}from'@stripe/stripe-js';import{PaymentElement,Elements,useStripe,useElements,}from'solid-stripe';constCheckoutForm=()=>{conststripe=useStripe();constelements=useElements();const[errorMessage,setErrorMessage]=createSignal(null);consthandleSubmit=async(event)=>{event.preventDefault();if(elements()===null){return;}// Trigger form validation and wallet collectionconst{error: submitError}=awaitelements().submit();if(submitError){// Show error to your customersetErrorMessage(submitError.message);return;}// Create the PaymentIntent and obtain clientSecret from your server endpointconstres=awaitfetch('/create-intent',{method: 'POST',});const{client_secret: clientSecret}=awaitres.json();const{ error }=awaitstripe().confirmPayment({//`Elements` instance that was used to create the Payment Elementelements: 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 payment// methods like iDEAL, your customer will be redirected to an intermediate// site first to authorize the payment, then redirected to the `return_url`.}};return(<formonSubmit={handleSubmit}><PaymentElement/><buttontype="submit"disabled={!stripe()||!elements()}>
Pay
</button>{/* Show error message to your customers */}{errorMessage()&&<div>{errorMessage()}</div>}</form>);};constoptions={mode: 'payment',amount: 1099,currency: 'usd',// Fully customizable with appearance API.appearance: {/*...*/},};constApp=()=>{const[stripe,setStripe]=createSignal(null);onMount(async()=>{const_stripe=awaitloadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');setStripe(_stripe);})return(<Elementsstripe={stripe()}options={options}><CheckoutForm/></Elements>)};exportdefaultApp;

License

MIT