I would advise following stripes directions, also check and see if they have other styles you can use.
Mar 15, 2021
6
Level 2
Replace Stripe's credit card form with inputs
I would like to know instead of using the classic Stripe form, how to unpack it in separate inputs. What should be the "name" of the respective inputs?
<div id="card-element" class="form-control"></div>
Also, need to change anything in the original javascript code?
const stripe = Stripe('{{ config('cashier.key') }}')
const elements = stripe.elements()
const cardElement = elements.create('card')
cardElement.mount('#card-element')
const form = document.getElementById('payment-form')
const cardBtn = document.getElementById('card-button')
form.addEventListener('submit', async (e) => {
e.preventDefault()
// Disable the submit button to prevent repeated clicks
document.getElementById('card-button').disabled = true
const { setupIntent, error } = await stripe.confirmCardSetup(
cardBtn.dataset.secret, {
payment_method: {
card: cardElement,
billing_details: {
name: document.getElementById('name').value
}
}
}
)
if(error) {
document.getElementById('card-button').disabled = false
} else {
let token = document.createElement('input')
token.setAttribute('type', 'hidden')
token.setAttribute('name', 'token')
token.setAttribute('value', setupIntent.payment_method)
form.appendChild(token)
form.submit();
}
})
Please or to participate in this conversation.