Best Practices

This section provides best practise tips for your Javascript client-side integration.

You can link to the Deko Javascript file at: https://assets.dekopay.com/wallet/index.js

This link should be placed in the Header section of your HTML checkout files, as explained in the Quick Start section.

Events listeners

An event listener is a procedure in JavaScript that waits for an event to occur. Often an event listener is registered with the object that generates the event. When the event occurs, the object iterates through all listeners registered with it informing them of the event. For a small number of elements, you can add individual event handlers. However, as you add more and more event handlers, the browser's performance begins to degrade, since listening for events is memory intensive.

We therefore recommend you use event delegation to listen to a group of event handlers instead of the specific element.

Setup and Tear down

Setup is commonly used for instantiating variables and objects. Teardown is used for reinitializing objects or any variables that don't automatically fall out of scope between tests.

To instantiate the same object in different specs so you can test it in different ways, you can use use beforeEach() blocks for setup and afterEach() blocks for teardown.

Closures

A closure is when an inner function has access to members of the outer function (lexical scope) even when executing outside the scope of the outer function. Invoking an inner function outside of its enclosing function while maintaining access to variables in its enclosing function (lexical scope) creates a JavaScript Closure.

When you initialise Deko Wallet via the Window object, this should be done in a closure to protect the scope.

Running a Cleanup at the end of a function

See the example below.

function Foo() {

  let varThatRequiresCleanup = //something

  // Define your "actual" Foo logic in an inner function
  // where you can define your flow and return logic as 
  // needed.
  function InnerFoo() {

    // You can access variables in the Foo closure, like so
    console.log(varThatRequiresCleanup);

    if(condition1) {
      return Error1;
    }

    if(condition2) {
      return Error2;
    }

    if(condition3) {
      return Error3;
    }

    //etc.. more ifs and important code.
    return Success;
  }

  // Now call your inner function like so
  var result = InnerFoo();

  // Now you can cleanup resourced in scope of Foo as
  // in this way, because this line will be hit
  varThatRequiresCleanup.CleanUp();

  // Return the result from InnerFoo()
  return result;
}