ef4874b9a0
This PR adds an ecommerce plugin package with both a Payload plugin and React UI utilities for the frontend. It also adds a new ecommerce template and new ecommerce test suite. It also makes a change to the `cpa` package to accept a `--version` flag to install a specific version of Payload defaulting to the latest.
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'
|
|
|
|
export const CheckoutStripe = () => {
|
|
const stripe = useStripe()
|
|
const elements = useElements()
|
|
|
|
const handleSubmit = async (event: any) => {
|
|
// We don't want to let default form submission happen here,
|
|
// which would refresh the page.
|
|
event.preventDefault()
|
|
|
|
if (!stripe || !elements) {
|
|
// Stripe.js hasn't yet loaded.
|
|
// Make sure to disable form submission until Stripe.js has loaded.
|
|
return
|
|
}
|
|
|
|
const result = await stripe.confirmPayment({
|
|
//`Elements` instance that was used to create the Payment Element
|
|
elements,
|
|
confirmParams: {
|
|
return_url: 'http://localhost:3000/shop/confirm-order',
|
|
},
|
|
})
|
|
|
|
if (result.error) {
|
|
// Show error to your customer (for example, payment details incomplete)
|
|
console.log(result.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 disabled={!stripe}>Submit</button>
|
|
</form>
|
|
)
|
|
}
|