Issue
I'm using Stripe elements to load a payment form, but sometimes it takes 5-10 seconds for the form to load completely.
Is there a way to detect when the form is completely finished loading, so I can display a loading animation/image until then?
console.log('Stripe API Script loaded'); this.stripe = Stripe('..........');
const create_customer_response = JSON.parse(localStorage.getItem("create_customer_response"));
const client_secret = create_customer_response["intent"]["client_secret"]
const options = {
clientSecret: client_secret,
};
elements = this.stripe.elements(options);
const payment = elements.create('payment');
const paymentElement = document.getElementById('payment-element');
if (paymentElement) {
payment.mount(paymentElement);
this.isPaymentElementMounted = true; // Set the flag to true when the payment element is mounted
console.log('Payment element mounted successfully.');
console.log("this.stripe ", this.stripe);
console.log(elements);
this.spinner.hide();
} else {
console.error('#payment-element not found in the DOM. Make sure your template is correct.');
}
}
scriptElementStripe.onerror = () => {
// console.log('Could not load the Google API Script!');
}
Solution
this is working solution. :)
this.stripe = Stripe('.......');
const create_customer_response = JSON.parse(localStorage.getItem("create_customer_response"));
const client_secret = create_customer_response["intent"]["client_secret"]
const options = {
clientSecret: client_secret,
};
elements = this.stripe.elements(options);
const payment = elements.create('payment');
const paymentElement = document.getElementById('payment-element');
if (paymentElement) {
payment.mount(paymentElement);
// Listen for the 'ready' event
payment.on('ready', () => {
this.isPaymentElementMounted = true; // Set the flag to true when the payment element is ready
console.log('Payment element is ready.');
console.log("this.stripe ", this.stripe);
console.log(elements);
this.spinner.hide();
});
} else {
console.error('#payment-element not found in the DOM. Make sure your template is correct.');
}
}
scriptElementStripe.onerror = () => {
// console.log('Could not load the Google API Script!');
}
Answered By - shahnawaz raza
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.