#Tjopsta
ancient mango
Hello! What's up?
What is paymentElements in your code above? Where does it come from?
willow helm
paymentElements is the elements created from elements.create
(in my init function)
const elements = stripe.elements(options);
paymentElements = elements.create('payment', { style: style });
ancient mango
You need to pass in elements, not paymentElements.
willow helm
ooh..... let me check
weird..... new error: Invalid value for stripe.confirmSetup(): elements should have a mounted Payment Element.
which tells me that paymentElements is what I should pass as that's my var I use for the mount
full code:
let stripe, paymentElements;
stripe = window.Stripe('*************************************');
let elements = stripe.elements();
let style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
let startcard = true;
function stripeInitiate(paymentMethodCreateToken) {
const options = {
clientSecret: paymentMethodCreateToken,
// Fully customizable with appearance API.
appearance: {/.../ },
};
if (startcard) {
const elements = stripe.elements(options);
paymentElements = elements.create('payment', { style: style });
startcard = false;
}
paymentElements.mount('#payment-element');
paymentElements.on('change', function (event) {
displayError(event);
});
}
function displayError(event) {
let displayError = document.getElementById('error-message');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
}
function createPaymentMethod(dotnetHelper, paymentElements) {
return stripe
.confirmSetup({
elements
})
.then((result) => {
if (result.error) {
displayError(result);
} else {
createSubscription(dotnetHelper, result);
}
});
}
ancient mango
Are you sure paymentElements.mount('#payment-element'); is running before the code that's throwing the error is running?
Also, I'm 100% sure you need to pass in elements and not paymentElements. Here's the documentation: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-elements
The Elements instance that was used to create the Payment Element.
willow helm
yup. I get the payment elements rendered, fill in the card details, and this error comes when I submit, which is calling the createPaymentMethod function
ancient mango
Are you certain elements is the same elements instance you used to create and mount the Payment Element?
willow helm
let me double check
ancient mango
It looks like you've got a couple different elements floating around in there.
willow helm
ok... closer....
let stripe, paymentElement;
stripe = window.Stripe('*');
let elements = stripe.elements();
let style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
let startcard = true;
function stripeInitiate(paymentMethodCreateToken) {
const options = {
clientSecret: paymentMethodCreateToken,
// Fully customizable with appearance API.
appearance: {/.../ },
};
if (startcard) {
const elements = stripe.elements(options);
paymentElement = elements.create('payment', { style: style });
startcard = false;
}
paymentElement.mount('#payment-element');
paymentElement.on('change', function (event) {
displayError(event);
});
}
function displayError(event) {
let displayError = document.getElementById('error-message');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
}
function createPaymentMethod(dotnetHelper) {
return stripe
.confirmSetup({
elements
})
.then((result) => {
if (result.error) {
displayError(result);
} else {
createSubscription(dotnetHelper, result);
}
});
}
function createPaymentMethodServer(dotnetHelper, paymentElement) {
createPaymentMethod(dotnetHelper, paymentElement);
}
ancient mango
You've still got two different elements in there.
There's the let elements = stripe.elements(); at the top and the const elements = stripe.elements(options); later.
willow helm
yeah you were right. just had to set the current instance to the elements with options (I intend using it again in other functions so setting the instance rather
function stripeInitiate(paymentMethodCreateToken) {
const options = {
clientSecret: paymentMethodCreateToken,
// Fully customizable with appearance API.
appearance: {/.../ },
};
if (startcard) {
elements = stripe.elements(options);
payment = elements.create('payment', { style: style });
startcard = false;
}
payment.mount('#payment-element');
payment.on('change', function (event) {
displayError(event);
});
}
function displayError(event) {
let displayError = document.getElementById('error-message');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
}
function createPaymentMethod(dotnetHelper) {
return stripe
.confirmSetup({
elements: elements,
redirect: 'if_required'
})
.then((result) => {
if (result.error) {
displayError(result);
} else {
createSubscription(dotnetHelper, result);
}
});
}
one more question... when confirming the setupintent... why is there a default / required param of the redirecturl? seeing this is just in code. is the idea that the return url hits a controller on my app to action any next steps? my app is a blazor server spa so don't really want redirection to happen
rain flame
👋 Stepping in and give me some times to catchup
rain flame
Checking the SetupIntent confirmation method. Btw I don't see it in above code. Do you have it elsewhere?
willow helm
it's right above:
return stripe
.confirmSetup({
rain flame
Ah soryyy overlooked it
But don't see the confirmParams . That's why you are receiving an error of needing a return_url?
willow helm
yea i dont specify the return url because i am specifying the redirect ifrequired parameter. i was more asking what the benefit is of using the redirect url if my app is a spa
rain flame
We have a bit of explanation here https://stripe.com/docs/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect
Note: Setting if_required requires that you handle successful confirmations for redirect-based and non-redirect based payment methods separately. When a non-redirect based payment method is successfully confirmed, stripe.confirmSetup will resolve with a {setupIntent} object.
willow helm
alright, thanks for your help
rain flame
So there are redirect-based and non-redirect based PaymentMethods. In case of redirect-based PaymentMethods, stripe.js still need somewhere to redirect your customer back. That's why return_url is required