115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
// This is your test publishable API key.
|
|
const stripe = Stripe('pk_test_WuL7S3g73f4j9Y69pMF10r3k00G5IPCCSc')
|
|
|
|
// The items the customer wants to buy
|
|
const items = [{ id: 'xl-tshirt' }]
|
|
|
|
let elements
|
|
|
|
initialize()
|
|
checkStatus()
|
|
|
|
document
|
|
.querySelector('#payment-form')
|
|
.addEventListener('submit', handleSubmit)
|
|
|
|
// Fetches a payment intent and captures the client secret
|
|
async function initialize () {
|
|
const response = await fetch('/create-payment-intent', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ items })
|
|
})
|
|
const { clientSecret } = await response.json()
|
|
|
|
const appearance = {
|
|
theme: 'stripe'
|
|
}
|
|
elements = stripe.elements({ appearance, clientSecret })
|
|
|
|
const paymentElement = elements.create('payment')
|
|
paymentElement.mount('#payment-element')
|
|
}
|
|
|
|
async function handleSubmit (e) {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
|
|
const { error } = await stripe.confirmPayment({
|
|
elements,
|
|
confirmParams: {
|
|
// Make sure to change this to your payment completion page
|
|
return_url: 'http://localhost:4242/checkout.html'
|
|
}
|
|
})
|
|
|
|
// This point will only be reached if there is an immediate error when
|
|
// confirming the payment. Otherwise, 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`.
|
|
if (error.type === 'card_error' || error.type === 'validation_error') {
|
|
showMessage(error.message)
|
|
} else {
|
|
showMessage('An unexpected error occurred.')
|
|
}
|
|
|
|
setLoading(false)
|
|
}
|
|
|
|
// Fetches the payment intent status after payment submission
|
|
async function checkStatus () {
|
|
const clientSecret = new URLSearchParams(window.location.search).get(
|
|
'payment_intent_client_secret'
|
|
)
|
|
|
|
if (!clientSecret) {
|
|
return
|
|
}
|
|
|
|
const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret)
|
|
|
|
switch (paymentIntent.status) {
|
|
case 'succeeded':
|
|
showMessage('Payment succeeded!')
|
|
break
|
|
case 'processing':
|
|
showMessage('Your payment is processing.')
|
|
break
|
|
case 'requires_payment_method':
|
|
showMessage('Your payment was not successful, please try again.')
|
|
break
|
|
default:
|
|
showMessage('Something went wrong.')
|
|
break
|
|
}
|
|
}
|
|
|
|
// ------- UI helpers -------
|
|
|
|
function showMessage (messageText) {
|
|
const messageContainer = document.querySelector('#payment-message')
|
|
|
|
messageContainer.classList.remove('hidden')
|
|
messageContainer.textContent = messageText
|
|
|
|
setTimeout(function () {
|
|
messageContainer.classList.add('hidden')
|
|
messageText.textContent = ''
|
|
}, 4000)
|
|
}
|
|
|
|
// Show a spinner on payment submission
|
|
function setLoading (isLoading) {
|
|
if (isLoading) {
|
|
// Disable the button and show a spinner
|
|
document.querySelector('#submit').disabled = true
|
|
document.querySelector('#spinner').classList.remove('hidden')
|
|
document.querySelector('#button-text').classList.add('hidden')
|
|
} else {
|
|
document.querySelector('#submit').disabled = false
|
|
document.querySelector('#spinner').classList.add('hidden')
|
|
document.querySelector('#button-text').classList.remove('hidden')
|
|
}
|
|
}
|