Stripe, Failed to execute 'postMessage' - stripe-payments

Question

I am trying to submit a form with a ibanElement, locally it works perfectly but on my test environment : Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin (https://my.test.com)
any suggestion?
Thanks for the help
const ELEMENT_TYPE = 'card';
const PAYMENT_METHODS_CREDIT_CARD = "CREDIT_CARD";
const PAYMENT_METHODS_SEPA = "SEPA";
Vue.use(localeService);
const localeFromCookies = Vue.prototype.$getLocale(localeCookieName, null);
Vue.use(VeeValidate, { locale: localeFromCookies });
Vue.use(VueMask.VueMaskPlugin);
var paymentMethodsApp = new Vue({
el: '#app-payment-methods',
data() {
return {
wizardStepSize : 'md',
paymentMethod : PAYMENT_METHODS_CREDIT_CARD,
billingAddressStreet: null,
billingAddressLine2: null,
billingAddressCity: null,
billingAddressPostalCode : null,
billingAddressCountry: null,
billingEmail: null,
stripe: null,
elements: null,
cardElement: null,
isCardElementEmptyOrInvalid : true,
ibanElement : null,
isIbanElementEmptyOrInvalid : true,
paidCustomerId: null,
paidSubscriptionId : null,
stripeClientSecret : null,
stripePaymentConfirmation: false,
paymentMethodsSubmitting : false,
billingDataChecking : true,
alerts: []
}
},
methods: {
onCreditCardPaymentSelected() {
Vue.nextTick(function () {
paymentMethodsApp.mountStripeCardElement();
paymentMethodsApp.unmountStripeSepaIbanElement();
});
},
onInvoiceEBankingPaymentSelected() {
Vue.nextTick(function () {
paymentMethodsApp.unmountStripeCardElement();
paymentMethodsApp.unmountStripeSepaIbanElement();
});
},
onInvoicePhysicalPaymentSlipSelected() {
Vue.nextTick(function () {
paymentMethodsApp.unmountStripeCardElement();
paymentMethodsApp.unmountStripeSepaIbanElement();
});
},
onSEPAPaymentSelected(){
Vue.nextTick(function () {
paymentMethodsApp.unmountStripeCardElement();
paymentMethodsApp.mountSepaElement();
});
},
saveCustomer() {
const customerData = {
"paymentMethod" : this.paymentMethod,
"billingAddressStreet" : this.billingAddressStreet,
"billingAddressLine2" : this.billingAddressLine2,
"billingAddressCity" : this.billingAddressCity,
"billingAddressPostalCode" : this.billingAddressPostalCode,
"billingAddressCountry" : this.billingAddressCountry,
"billingEmail" : this.billingEmail,
}
return axios.post("/billings/customers", customerData)
.then(response => {
this.paidCustomerId = response.data.paidCustomerId;
})
.catch(error => {
if (error.response.status === 401 || error.response.status === 403) {
location.reload();
}
this.createAlert(saveBillingAddressErrorMsg);
});
},
saveSubscription() {
return axios.post("/billings/subscriptions")
.then(response => {
this.paidSubscriptionId = response.data.paidSubscriptionId;
this.stripeClientSecret = response.data.clientSecret;
this.stripePaymentConfirmation = response.data.paymentConfirmation;
})
.catch(error => {
if (error.response.status === 401 || error.response.status === 403) {
location.reload();
}
this.createAlert(saveBillingAddressErrorMsg);
});
},
loadBillingDetails() {
axios.get("/billings")
.then(response => {
const responseData = response.data;
if(responseData) {
this.paidCustomerId = responseData.paidCustomerId;
this.paidSubscriptionId = responseData.paidSubscriptionId;
this.billingAddressStreet = responseData.billingAddressStreet;
this.billingAddressLine2 = responseData.billingAddressLine2;
this.billingAddressCity = responseData.billingAddressCity;
this.billingAddressPostalCode = responseData.billingAddressPostalCode;
this.billingAddressCountry = responseData.billingAddressCountry;
this.billingEmail = responseData.billingEmail;
if(responseData.paymentMethod) {
this.paymentMethod = responseData.paymentMethod;
}
}
})
.catch(error => {
if(error.response) {
if(error.response.status === 401 || error.response.status === 403) {
location.replace("/");
}
}
})
.then(()=> {
this.billingDataChecking = false;
})
},
onProceedWithPaymentClicked() {
this.$validator.validateAll()
.then(isFormValid => {
if (isFormValid) {
this.doProceedWithPayment();
}
});
},
async doProceedWithPayment() {
this.paymentMethodsSubmitting = true;
this.disableStripeCardElement(true);
//this.disableStripeIbanElement(true);
await this.saveCustomer();
if(this.paidCustomerId) {
await this.saveSubscription();
if(this.paymentMethod === PAYMENT_METHODS_CREDIT_CARD) {
if (this.stripeClientSecret) {
if (this.stripePaymentConfirmation) {
await this.confirmCardPaymentWithStripe(this.stripeClientSecret);
} else {
await this.confirmCardSetupWithStripe(this.stripeClientSecret);
}
}
} else {
location.replace("/watchers");
}
if(this.paymentMethod === PAYMENT_METHODS_SEPA) {
if (this.stripeClientSecret) {
if (this.stripePaymentConfirmation) {
await this.confirmSepaDebitPayment(this.stripeClientSecret);
} else {
await this.confirmSepaDebitSetup(this.stripeClientSecret);
}
}
} else {
location.replace("/watchers");
}
}
this.paymentMethodsSubmitting = false;
this.disableStripeCardElement(false);
this.disableStripeIbanElement(false);
},
confirmCardPaymentWithStripe(stripeCustomerClientSecret) {
return this.stripe
.confirmCardPayment(stripeCustomerClientSecret, {
payment_method: {
card: this.cardElement,
// billing_details: {
// name: nameInput.value,
// },
}
})
.then((result) => {
if(result.error) {
this.$validator.errors.add({
field: 'creditCard',
msg: result.error.message
});
} else {
// Successful subscription payment
location.replace("/watchers"); //reload page and next step of activation wizard
}
});
},
confirmCardSetupWithStripe(stripeCustomerClientSecret) {
return this.stripe
.confirmCardSetup(stripeCustomerClientSecret, {
payment_method: {
card: this.cardElement,
// billing_details: {
// name: nameInput.value,
// },
}
})
.then((result) => {
if(result.error) {
this.$validator.errors.add({
field: 'creditCard',
msg: result.error.message
});
} else {
// Successful subscription payment
location.replace("/watchers"); //reload page and next step of activation wizard
}
})
},
confirmSepaDebitSetup(stripeCustomerClientSecret) {
return this.stripe
.confirmSepaDebitSetup(stripeCustomerClientSecret, {
payment_method: {
sepa_debit: this.ibanElement,
billing_details: {
name: 'test',
email: this.billingEmail,
},
},
})
.then(function (result) {
// Handle result.error or result.setupIntent
location.replace("/watchers"); //reload page and next step of activation wizard
})
},
confirmSepaDebitPayment(stripeCustomerClientSecret) {
return this.stripe
.confirmSepaDebitPayment(stripeCustomerClientSecret, {
payment_method: {
sepa_debit: this.ibanElement,
billing_details: {
name: 'test',
email: this.billingEmail,
},
},
})
.then(function (result) {
// Handle result.error or result.paymentIntent
location.replace("/watchers"); //reload page and next step of activation wizard
})
},
initStripe() {
this.stripe = Stripe(stripePublishableToken);
},
mountStripeCardElement() {
this.paymentMethod = PAYMENT_METHODS_CREDIT_CARD
const stripeOptions = {
// stripeAccount: this.stripeAccount,
// apiVersion: this.apiVersion,
locale: localeFromCookies ? localeFromCookies : "auto"
};
const style = {
invalid: {
color: "#a94442",
iconColor: "#a94442"
}
};
const createOptions = {
// classes: this.classes,
style: style,
// value: this.value,
hidePostalCode: true
// iconStyle: this.iconStyle,
// hideIcon: this.hideIcon,
// disabled: this.disabled,
};
this.elements = this.stripe.elements(stripeOptions);
this.cardElement = this.elements.create(ELEMENT_TYPE, createOptions);
this.cardElement.mount('#stripe-element-mount-point');
this.cardElement.on('change', this.onStripeCardElementChange);
},
mountSepaElement() {
this.paymentMethod = PAYMENT_METHODS_SEPA
const stripeOptions = {
// stripeAccount: this.stripeAccount,
// apiVersion: this.apiVersion,
locale: localeFromCookies ? localeFromCookies : "auto"
};
const style = {
invalid: {
color: "#a94442",
iconColor: "#a94442"
}
};
const createOptions = {
// classes: this.classes,
style: style,
// value: this.value,
supportedCountries : ['SEPA']
//hidePostalCode: true
// iconStyle: this.iconStyle,
// hideIcon: this.hideIcon,
// disabled: this.disabled
};
this.elements = this.stripe.elements(stripeOptions);
this.ibanElement= this.elements.create('iban', createOptions);
this.ibanElement.mount('#stripe-element-mount-point2');
this.ibanElement.on('change', this.onStripeSepaElementChange);
},
unmountStripeCardElement() {
this.$validator.errors.remove("creditCard");
this.cardElement.unmount();
},
unmountStripeSepaIbanElement() {
this.$validator.errors.remove("ibanSepa");
this.ibanElement.unmount();
},
onStripeCardElementChange(event) {
this.isCardElementEmptyOrInvalid = event.empty;
if (event.error) {
this.isCardElementEmptyOrInvalid = true;
this.$validator.errors.add({
field: 'creditCard',
msg: event.error.message
});
} else {
this.$validator.errors.remove("creditCard");
}
},
onStripeSepaElementChange(event) {
this.isIbanElementEmptyOrInvalid = event.empty;
if (event.error) {
this.isIbanElementEmptyOrInvalid = true;
this.$validator.errors.add({
field: 'ibanSepa',
msg: event.error.message
});
} else {
this.$validator.errors.remove("ibanSepa");
}
},
disableStripeCardElement(disabled) {
this.cardElement.update({disabled: disabled});
},
disableStripeIbanElement(disabled) {
this.ibanElement.update({disabled: disabled});
},
setActiveTab () {
const activeTab = this.$formWizard.attr("active-tab");
if(activeTab) {
const wizard = this.$refs.wizard;
if(wizard) {
const currentActiveTabIndex = wizard.activeTabIndex;
wizard.changeTab(currentActiveTabIndex,activeTab);
wizard.tabs.forEach((tab, index)=>{
if(index < activeTab)
tab.checked = true
});
}
}
},
createAlert(message) {
const alertItem = {
key: new Date().getTime(),
message: message,
type: "danger"
};
this.alerts.push(alertItem);
},
onPageResize() {
if (window.innerWidth > 992) { //media query value
this.wizardStepSize = 'md'
} else {
this.wizardStepSize = 'xs'
}
}
},
computed: {
$formWizard() {
return $("#payment-methods-form-wizard");
},
disabledForm() {
return this.paymentMethodsSubmitting
|| this.billingDataChecking
|| (this.paidCustomerId && this.paidSubscriptionId);
},
disabledPaymentMethod() {
return this.paymentMethodsSubmitting
|| this.billingDataChecking;
},
disableSubmitButton() {
return this.paymentMethodsSubmitting
|| this.billingDataChecking
|| (this.paymentMethod === PAYMENT_METHODS_CREDIT_CARD && this.isCardElementEmptyOrInvalid)
|| (this.paymentMethod === PAYMENT_METHODS_SEPA && this.isIbanElementEmptyOrInvalid)
|| this.errors.any();
},
showInvoiceEBankingPaymentMethod() {
return wearerCountry !== 'CH';
}
},
mounted() {
this.setActiveTab();
this.initStripe();
this.mountStripeCardElement();
this.loadBillingDetails();
},
created() {
window.addEventListener('resize', this.onPageResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.onPageResize)
}
});
<tab-content>
<div>
<div class="row" v-if="paymentMethod == PAYMENT_METHODS_CREDIT_CARD">
<div class="form-group col-xs-12 col-md-6 required" :class="{'has-error': errors.has('creditCard') }">
<label class="control-label">[[#{registration.payment.creditCard}]]</label>
<div class="form-control">
<form id="stripe-element-form" >
<div id="stripe-element-mount-point"></div>
<slot name="stripe-element-errors">
<div id="stripe-element-errors" role="alert"></div>
</slot>
<button ref="submitButtonRef" type="submit" class="hide" ></button>
</form>
</div>
<span v-if="errors.has('creditCard')" class="help-block">
{{ errors.first('creditCard') }}
</span>
</div>
</div>
<div class="row" v-if="paymentMethod == PAYMENT_METHODS_SEPA">
<div class="form-group col-xs-12 col-md-6 required" :class="{'has-error': errors.has('ibanSepa') }">
<label class="control-label">[[#{registration.payment.sepa}]]</label>
<div class="form-control">
<form id="stripe-element-form" >
<div id="stripe-element-mount-point2"></div>
<slot name="stripe-element-errors">
<div id="stripe-element-errors" role="alert"></div>
</slot>
<button ref="submitButtonRef" type="submit" class="hide" ></button>
</form>
</div>
<div id="mandate-acceptance">
By providing your payment information and confirming this payment, you
authorise (A) Smartwatcher Technologies AG and Stripe, our payment service provider
and/or PPRO, its local service provider, to send instructions to your
bank to debit your account and (B) your bank to debit your account in
accordance with those instructions. As part of your rights, you are
entitled to a refund from your bank under the terms and conditions of
your agreement with your bank. A refund must be claimed within 8 weeks
starting from the date on which your account was debited. Your rights
are explained in a statement that you can obtain from your bank. You
agree to receive notifications for future debits up to 2 days before
they occur.
</div>
<span v-if="errors.has('ibanSepa')" class="help-block">
{{ errors.first('ibanSepa') }}
</span>
</div>
</div>
</div>
</tab-content>