I have encountered two separate issues while trying to integrate the new version of Stripe into my Ionic v3 app. (Please refrain from suggesting an upgrade to Ionic v5, as it is currently not feasible for our team at this time!)
Within my ionDidLoad function, I have the following code:
var stripe = Stripe('pk_test_OwV8RfgF7JQp1FEW3OfqmPpz');
var elements = stripe.elements();
var style = {
base: {
color: "#32325d",
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.addEventListener('change', ({error}) => {
const displayError = document.getElementById('card-errors');
if (error) {
displayError.textContent = error.message;
} else {
displayError.textContent = '';
}
});
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(ev) {
ev.preventDefault();
stripe.confirmCardPayment( this.clientSecret, {
payment_method: {
card: card,
billing_details: {
name: 'Jenny Rosen'
}
}
}).then(function(result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
/**** this.postOrder(); */
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
}
}
});
});
Issue #1: var stripe = Stripe('pk_test_*******************') I am seeing a red squiggly line under "Stripe('pk_test...)" in VSCode. The error message states "Value of type 'typeof Stripe' is not callable. Did you mean to include 'new'?ts(2348)". Despite searching online, I haven't been able to resolve this issue. I attempted declaring "Stripe" but it did not alleviate the problem. I understand that Stripe is a reference in StripeJS.
Issue #2: stripe.confirmCardPayment( this.clientSecret, {... Once again, a red squiggly line appears, this time under "this.clientSecret". The value of this.clientSecret is set in my app based on the return of the paymentIntents call to my server as shown below:
this.inStockService.paymentIntentRoutine(this.ot).subscribe(res => {
this.clientSecret = res;
});
The error from VSCode reads "Property 'clientSecret' does not exist on type 'HTMLElement'.ts(2339)". I am still learning and struggling to grasp why this error is occurring.
If anyone can provide assistance in resolving these issues, I would greatly appreciate it.