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 ?
If I copy/paste the Minimal exemple section of the README, my linter is complaining.
Here's a quick (and dirty ?) fix :
What do you think ?