Qrona
Contact

Qrona Payex Integration

The easiest way to add payements into your projects.

1
<div id="qrona-payex-root"></div>
Add the div above to your html where you want the user to make the payment.
2
<script src="/scripts/client.js"></script>
Add the script above after the div element.
3

  let config = {
      appId: '<<Your appId>>', //Provided by Qrona.
      container: 'qrona-payex-root', // The container which will include the payment form. You can have multiple containers with different ids.
      instrument: 'CreditCard | Swish', //Only CreditCard and Swish payments are supported for now.
      language: "sv-SE | nb-NO | en-US", //Supported languages.
      currency: 'SEK', //Settlement currency (e.g. SEK, NOK, EUR).
      amount: 6000000, //The amount including VAT in the lowest monetary unit of the currency. E.g. 6000000 equals 60 000.00 SEK.
      description: 'A cup of coffee.', //A textual description of maximum 40 characters of the purchase.
      onSuccess: function (details) {
         console.log('onSuccess', details); //The callback for successfull payment. The details param will include the paymentId.
      },
      onFail: function (details) {
          console.log('onFail', details); //The callback for failed payment.
      },
      onToS: function (details) {
        console.log('onToS'); //Will be executed when "Terms of Services" link is clicked. Details will include the container.
    }
  }; 
  
  qronaPayex.open(config);
Add the code block above into your javascript to start the payment form and listen to the payment events.
Styling

  let config = {
      appId: '<<Your appId>>', //Provided by Qrona.
      ...
      style: {
        body: {
            backgroundColor: "transparent",
        },
        button: {
            backgroundColor:'#e9524f',
            color: "#fff",
            borderRadius: "50px",
            font: "bold normal 16px/25px Montserrat, sans-serif"
        },
        input: {
            focus: { border: "solid 1px #24A0BF" },
            border: "solid 1px #cdcdcd"
        },
        secondaryButton: {
            backgroundColor: "#555",
            border: "solid 1px #cdcdcd"
        },   
        label: {
            color: "#cdcdcd"
        },
        link: {
            color: "#e9524f"
        }
    }
  }; 
  
  qronaPayex.open(config);
Payex provides the following tags/classes for stying.
body button input secondaryButton label link
You can add CSS properties using javascript syntax.
However, payex has some restrictions, for example, if you add backgroundImage: 'url("/image/url")', onFail will be executed with the error message saying "Configuration rejected. Invalid style configuration (property: backgroundImage). The CSS property values can only contain alpha numeric characters, slash ('/'), hash ('#'), comma (','), full stop ('.'), hyphen ('-') and space."
onSuccess

  // instrument = 'CreditCard'
  details = {
    container: "qrona-payex-root-credritcard", // The container provided by you in the config. Useful when you have multiple containers.
    status: 200, // Means all is good.
    paymentId: "/psp/paymentorders/b3729c5e-80e7-4503-aa7a-08d79351a302", // The payment Id provided by Payex.
    ref: "W7JhHcC7OS64GD4AfqGlEbiULhFJk", // Reference in Payex admin dashboard.
    cardDetails: { // User's Credit Card details
      brand: "Visa",
      expiryDate: "11/2022",
      maskedPan: "492500******0004"
    }
  }; 
  
  // instrument = 'Swish'
  details = {
    container: "qrona-payex-root-swish", // The container provided by you in the config. Useful when you have multiple containers.
    status: 200, // Means all is good.
    paymentId: "/psp/swish/payments/83de5685-52ce-4606-24bf-08d79352a872", // The payment Id provided by Payex.
    ref: "QKESoKzX9oCDKY5Pie2TUfbFFQo6s", // Reference in Payex admin dashboard.
    swishDetails: { 
      msisdn: "46777777777", //// User's Swish mobile number.
    }
  };