SagepayCheckout's destroy() method fails to detach events properly, leaving them still attached

Currently, I am in the process of integrating SagePay using the drop-in checkout feature. Our website allows users to choose paying with SagePay, which initializes the drop-in checkout. However, there may be instances where the user decides to switch to another payment method before finalizing the transaction. In such cases, we need to remove or destroy the existing checkout without refreshing the page. I followed the documentation provided for this process:

sp = sagepayCheckout({
  merchantSessionKey: sagepaySessionKey
});
sp.form();    

// and

sp.destroy();

Nevertheless, when attempting to submit the checkout form after calling the destroy method, an error occurs within the sagepay-dropin.js file (as shown below). Even though the documentation states that destroy() "Removes the iFrame from the container and unregisters any events that may have been registered," it appears that some events still linger during the form submission.

Could you please provide guidance on resolving this issue so that we can successfully submit our checkout form even if a user initially selects SagePay but later switches to a different payment method? Thank you.

sagepay-dropin.js:11 Uncaught TypeError: Cannot read property 'postMessage' of null
    at Object.a [as sendMessage] (sagepay-dropin.js:11)
    at v (sagepay-dropin.js:11)
    at T (sagepay-dropin.js:11)
    at HTMLFormElement.<anonymous> (sagepay-dropin.js:11)

javascriptopayo

Answer №1

After some trial and error, I finally found a solution to this issue. The event listeners attached by the dropin checkout cannot be directly removed due to being added through an anonymous function. To work around this, I implemented an additional event listener on the submit event. This new listener checks the payment method selected and stops the Sagepay event from triggering if it is not the intended method.

paymentForm.addEventListener("submit", function(e) {
    if($("#paymenttype").val() != 9) {
        e.stopImmediatePropagation();
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Three.js Collada Loader struggles to load a small scene with multiple objects

While I am new to Three.js, the question I have is quite complex. I am working with a Collada scene in DAE format, which actually includes references to other DAE files. The structure of this "parent" file looks something like this: <library_visual_sc ...

javascriptthree.jsloadercollada

Error 404 encountered while trying to access a website with parameters using Vue.js

Currently, I am in the process of building a website using VueJS and recently discovered how to use url parameters. Everything was working perfectly on my local machine - I could easily navigate to different pages by including parameters in the URL. For e ...

javascriptvue.jsrouteshttp-status-code-404web-hosting

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2

Altering the appearance of the xy axis on a line chart in Chart.js version 4 by either removing it entirely or adjusting its color

I am facing an issue with my chart.js code where I am trying to remove both the axis lines from the graph but still display the grids (NOTE) ` const MAINCHARTCANVAS = document.querySelector(".main-chart") new Chart(MAINCHARTCANVAS, { type: 'line&apo ...

javascripthtmlcsschartschart.js

Understanding ReactJS's process of batching all DOM updates within a single event loop, ultimately minimizing the number of repaints needed

While perusing an article on DOM updates in ReactJS, I came across the concept of React updating all changes within a single event loop. Having a background in understanding event loops in JavaScript and how they function in core JavaScript, I am curious ...

javascriptreactjsdomlayoutevent-loop

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

I've been dedicated to developing a Single Page Web App (SPA) recently. The frontend is built with BackboneJS/Marionette, while the backend is powered by Java Spring :(. However, I've noticed that the application's start time could be sluggi ...

javascriptajaxperformancebackbone.jssingle-page-application

What will the relationships be like between the models using Sequelize?

Hello there, I'm seeking assistance in establishing the correct associations between models using Sequelize. In my project, I have three types of products, each with unique attributes as well as shared attributes. ...

javascriptnode.jsmodelsequelize.jsnode-modules

Variations in the module pattern in JavaScript

Can someone help me understand the differences in these methods of creating a javascript "module"? I'm just looking for some clarification. A) var foo = function() { var bar = function() { console.log('test'); }; retur ...

javascriptmodule

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

javascripthtmlangularjsglyphicons

Can the front end acquire JSON data from a URL, save it as a JSON file with a unique name, and store it in a designated location?

I'm facing a straightforward problem with my React Native project. I am attempting to create a script that will be executed during the build process to fetch JSON data from a URL and then store it as a JSON file with a unique name in a specific direct ...

javascriptjsonreact-native

Why does the React input value keep its value when the modal is re-rendered, despite the state being updated correctly?

Take a look at this sandbox link for the code snippet: Sandbox Showcased below is a table structure: https://i.sstatic.net/3F3Mc.png By clicking on the 'edit' button, a modal window opens up as shown below allowing you to edit input fields (onC ...

javascriptreactjsreact-hooksmodal-dialogbootstrap-5

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

ReactJS component state fails to update accurately

Let's say I have a component named Test import {useEffect, useState} from "react"; const Test = (props) => { const [Amount, setAmount] = useState(1); useEffect(()=>{ if(props.defaultAmount){ setAmount(prop ...

javascriptreactjsnext.js

Determining if an event is already associated with a marker in Google Maps API v3

I've set up a marker with a click event listener attached to it. However, I want to check if the click event has already been added to the marker, and if not, add the click event listener. // Add click event listener if it doesn't already exist ...

javascriptgoogle-mapsgoogle-maps-api-3

Comparing Inline SVG to CSS Background Sprite

As I work on developing multiple pages for my app (currently utilizing Angular on the front-end), I find myself including numerous logos. In an effort to maintain code readability, I have begun creating directives for each SVG logo by embedding the inline ...

javascripthtmlcssangularjssvg

Exploring ways to enhance the appearance of a Sidebar Widget Navigation using JQuery

When creating navigational items with submenus, such as 'Primary Fees', I added an arrow for visual indication. To enhance user experience, I included an animation that rotates the arrow and highlights the Main Menu item in red upon hovering. Thi ...

javascriptjqueryhtmlcss

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

javascriptjqueryhtmlmultiple-select

Ways to prevent scrolling or switching to the next tab when my javascript function yields a false result

//HTML Code <div id="navigation1"> <ul> <li><a href="#"><input type="submit" value="Next" onClick="return checkfhname()" /></a></li> </ul> </div> Whenever my Javascript function checkfhname() r ...

phpjavascriptjqueryhtmlcss

The toggler button is sliding down the list, but unfortunately, it's not causing the list to collapse

I have successfully copied all the necessary links and implemented the toggler code from bootstrap v5.1. The menu opens when I click on the toggler, but it does not collapse when I click on it again. This code works fine in the bootstrap document but enc ...

javascripthtmlcssbootstrap-5

Conditions in Java Script - Understanding the Basics

Can you identify the issue with this function and explain why it isn't functioning correctly? The goal was to create a function that performs the following tasks: 1. Define a function named "divide" that accepts one parameter, which is a number. 2. If ...

javascript