On this page, you'll find all the necessary information on how to embed the Pay Frame.

Environment-specific URLs for Javascript bundles:

Stage/Test: https://pay-frame.stage.avarda.com/cdn/pay-frame.js (opens in a new tab)

Production: https://pay-frame.avarda.com/cdn/pay-frame.js (opens in a new tab)

Embedding the Pay Frame

Create a placeholder div

To display the Pay Frame, add a <div> element to your page to serve as a placeholder for the Pay Frame. This <div> will be passed to the Pay Frame upon initialization.

<div id="pay-frame"></div>

Include Pay Frame script in your code

Include one script with all the necessary JS code for Pay Frame in your source code:

<script>
  (function (e, t, n, a, o, i) {
    e[a] =
      e[a] ||
      function () {
        (e[a].q = e[a].q || []).push(arguments);
      };
    i = t.createElement(n);
    i.async = 1;
    i.type = 'module';
    i.src = o + '?ts=' + Date.now();
    t.body.prepend(i);
  })(
    window,
    document,
    'script',
    'avardaPayFrameInit',
    // For integration with production environment change this url to:
    // 'https://pay-frame.avarda.com/cdn/pay-frame.js',
    'https://pay-frame.stage.avarda.com/cdn/pay-frame.js',
  );
</script>

This script will attach avardaPayFrameInit function onto the window object.

Initialize the Pay Frame

To initialize the Pay Frame, call the avardaPayFrameInit function from the window object. During initialization, you must pass required flags to set up the Pay Frame properly, along with optional flags to further customize its behavior. See the list of options below:

Further details about each flag can be found here - Init flags.

Example of initialiazing the Pay Frame

window.avardaPayFrameInit({
  rootNode: document.getElementById('placeholder_div'),
  siteKey: 'your_siteKey',
  language: 'sv',
});

Pay Frame Instance

Pay Frame instance is a javascript object created after calling window.avardaPayFrameInit(). After the init function is called, it is attached to the window as avardaPayFrameInstance. This object contains functions for interacting with the Pay Frame.

type PayFrameInstance = {
  unmount: () => void;
  changeLanguage: (language: string) => void;
};

Changing language

To change language of the Pay Frame, call the changeLanguage function on the avardaPayFrameInstance object with one of the supported languages as a string argument.

window.avardaPayFrameInstance.changeLanguage('da');

Supported languages

Removing from a page

To remove the Pay Frame from your website, call the unmount function.

window.avardaPayFrameInstance.unmount();

This ensures that the application is properly deleted from memory, the avardaPayFrameInstance is removed from the window, and the <avarda-pay-frame> custom element is also removed from the DOM.

URL Query Parameters

The Pay Frame may dynamically add query parameters to the URL, such as identifiers for transactions or user identification, to ensure proper functionality. These parameters are temporary and removed after their use (after Pay Frame is initialized).

Styling

The Pay Frame uses the same styles as Avarda's MyPages. This means that any style changes made to MyPages will also apply to the Pay Frame, and the two can't be styled separately. If you'd like to make some style changes to the Pay Frame, please contact Avarda for help.

React integration example

Disclaimer: This code example is for demo purposes only. The provided code covers basic and simple integration of Pay Frame in React + typescript.

import { useEffect, useRef } from 'react';
 
declare const window: {
  avardaPayFrameInit?: ((initFlags: PayFrameInitFlags) => void) & {
    q?: [PayFrameInitFlags][];
  };
  avardaPayFrameInstance?: PayFrameInstance;
};
 
type Language = 'sv' | 'fi' | 'da' | 'no' | 'de' | 'en';
 
type PayFrameInitFlags = {
  rootNode: HTMLElement;
  siteKey: string;
  language?: Language;
};
 
type PayFrameInstance = {
  unmount: () => void;
  changeLanguage: (language: Language) => void;
};
 
const PAY_FRAME_ROOT_ELEMENT_ID = 'pay-frame';
const PAY_FRAME_SCRIPT_ID = 'pay-frame-script';
 
export function PayFrame() {
  const payFrameDivRef = useRef<HTMLDivElement | null>(null);
 
  useEffect(() => {
    if (!payFrameDivRef.current) return;
 
    loadPayFrameScript();
    initPayFrame(payFrameDivRef.current);
    return () => {
      window.avardaPayFrameInstance?.unmount();
      document.getElementById(PAY_FRAME_SCRIPT_ID)?.remove();
    };
  }, []);
 
  return <div id={PAY_FRAME_ROOT_ELEMENT_ID} ref={payFrameDivRef} />;
}
 
const initPayFrame = (rootNode: HTMLDivElement | null) => {
  try {
    if (!window.avardaPayFrameInit)
      throw new Error('avardaPayFrameInit function not found on the window');
 
    window.avardaPayFrameInit({
      rootNode,
      siteKey: 'siteKey',
      language: 'sv',
    });
  } catch (error) {
    console.error(error);
  }
};
 
const loadPayFrameScript = () => {
  if (document.getElementById(PAY_FRAME_SCRIPT_ID)) return;
 
  const script = document.createElement('script');
  script.id = PAY_FRAME_SCRIPT_ID;
  script.async = true;
  script.type = 'module';
  script.src =
    'https://pay-frame.stage.avarda.com/cdn/pay-frame.js?ts=' + Date.now();
 
  window.avardaPayFrameInit =
    window.avardaPayFrameInit ||
    function (...args: [PayFrameInitFlags]) {
      (window.avardaPayFrameInit!.q = window.avardaPayFrameInit!.q || []).push(
        args,
      );
    };
 
  document.body.prepend(script);
};