https://github.com/wobsoriano/solid-stripe

Solid components for Stripe.js and Stripe Elements.
https://github.com/wobsoriano/solid-stripe

payment solid stripe

Last synced: 7 days ago
JSON representation

Solid components for Stripe.js and Stripe Elements.

• Host: GitHub
• URL: https://github.com/wobsoriano/solid-stripe
• Owner: wobsoriano
• License: mit
• Created: 2022-02-16T08:16:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-12T03:17:35.000Z (22 days ago)
• Last Synced: 2024-12-19T07:07:16.383Z (15 days ago)
• Topics: payment, solid, stripe
• Language: TypeScript
• Homepage: https://solid-stripe-demo.vercel.app
• Size: 758 KB
• Stars: 26
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  



# solid-stripe

Solid components for [Stripe.js and Elements](https://stripe.com/docs/stripe-js).

> [!NOTE]

> The aim of this module is to have [`@stripe/react-stripe-js`](https://github.com/stripe/react-stripe-js) for Solid with feature parity. You should be able to follow the [React docs](https://stripe.com/docs/stripe-js/react) and examples using this module.

## Installation

```bash

npm install @stripe/stripe-js solid-stripe

```

## Minimal example

```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 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 (

    

      

      

        Pay

      

      {/* Show error message to your customers */}

      {errorMessage() && 
{errorMessage()}
}

    

  );

};


const options = {

  mode: 'payment',

  amount: 1099,

  currency: 'usd',

  // Fully customizable with appearance API.

  appearance: {

    /*...*/

  },

};

const App = () => {

  const [stripe, setStripe] = createSignal(null);

  onMount(async () => {

    const _stripe = await loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

    setStripe(_stripe);

  })

  return (

    

      

    

  )

};

export default App;

```

## License

MIT