Skip to content

improve README.md #26

@ComicScrip

Description

@ComicScrip

If I copy/paste the Minimal exemple section of the README, my linter is complaining.

Here's a quick (and dirty ?) fix :

// onMount import was missing
import { createSignal, onMount } from 'solid-js';
import { loadStripe } from '@stripe/stripe-js';
import { PaymentElement, Elements, useStripe, useElements } from 'solid-stripe';

// options below were not typed
type ElementsOptions = Parameters<typeof Elements>[0]["options"];

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 (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type='submit' disabled={!stripe() || !elements()}>
        Pay
      </button>
      {/* Show error message to your customers */}
      {errorMessage() && <div>{errorMessage()}</div>}
    </form>
  );
};

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /*...*/
  }
} as ElementsOptions;

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

  onMount(async () => {
    const _stripe = await loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
    setStripe(_stripe);
  });

  return (
    <Elements stripe={stripe()} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

export default App;

What do you think ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions