Payment webpage

Payment webpage⚓

Reach the webpage⚓

Stancer’s payment webpage can be reached via:

• A simple redirection
• An iframe

Regardless how you reach the payment webpage, its URL remains the same: the webpage automatically detects the used mode.

Use the payment webpage⚓

Create a valid payment object⚓

To use our webpage, you will need to create a payment object that contains the parameters listed below:

• Amount
• Object
• Redirect url

Please refer to the appropriate section to create a payment object.

Forge a valid payment page URL⚓

The generic webpage’s address is: https://payment.stancer.com/[public key]/[payment id]?lang=[lang].

To forge a valid URL, you will need to replace the following objects within the generic webpage’s adress:

• [public key]: Replace this field by your personal public key (either pprod or ptest depending whether your in live mode or not)
• [payment id]: replace this field by the valid payment object you created

Redirection⚓

Once you created a valid URL, simply redirect your users to the valid URL you just forged.

They will be automatically redirected to the return URL you provided.

Iframe integration⚓

Simply add your valid URL within the following code sample <iframe src="xxx"></iframe> to use the payment webpage as an iframe.

Using the iframe enables the payment page to communicate with your website thus allowing you to have some information about the payment being currently processed. For further details on messages handling, please refer to the MDN.

Please note that you will need to indicate the message’s origin to safely use the iframe. Here is a code example :

1
2
3
4
5
6
7
8
9

function receiveMessage(event)
{
  if (event.origin !== 'https://payment.stancer.com')
    return;

  // ...
}

window.addEventListener('message', receiveMessage, false);

Data sent to event.data are sent through a Javascript object.

Available keys for the iframe are the following:

height and width keys allow you to change the iframe’s size and therefore ensure a seamless integration into your website.

You will find below a code example of our iframe's integration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

window.addEventListener('message', function (event) {
  if (event.origin !== 'https://payment.stancer.com') {
    return;
  }

  var minHeight = 320;
  var props = {};

  if (event.data.width) {
    props.width = event.data.width;
  }

  if (event.data.height && event.data.height > minHeight) {
    props.height = event.data.height;
  }

  if (props) {
    $('.js-stancer-payment-iframe').animate(props, {
      duration: 200,
      easing: 'linear',
      queue: false,
    });
  }
});

Status & events⚓

Status field can take the following values :

The regular process can be summed up as: init > pending > finished.

If you do use authenticated payments (which we strongly recommend), the regular process becomes: init > pending > secure-auth-start > secure-auth-end > finished.

During redirects, the return URL is added so your user is seamlessy redirected through the different websites used to process the payment. Please note that our webpage automatically redirects after 3 seconds. You can use some status to shorten this duration and for instance decide to immediately redirect you user if our webpage indicates a status such as error or finished.

Languages⚓

Add lang parameter⚓

You can add an optional language parameter lang to the payment page URL. By doing so, the URL becomes: https://payment.stancer.com/[public key]/[payment id]?lang=[lang]. This parameter uses the BCP47 format (e.g: fr-fr, fr-be).

Please note that letter case is not considered and that the used delimiter can be either a dash or underscore.

Translation process⚓

The webpage will use your user’s browser language by default. If we do not support this language, the webpage will then switch to the lang parameter mentioned previously. Again, if this translation is not yet available, our webpage will then be displayed in English.

The lang parameter overrules the previous logic: when used, the payment page will use the parameter you set. If not available, the webpage will switch to broswer’s language and ultimately fall back to our default language (English) if we do not support the user browser’s language.

Example: an Italian user is using your website translated to Portuguese. You decide to redirect him using a lang parameter set to pt-pt. Our webpage then tests:

• Is a pt-pt translation available? Sadly not yet
• Is an it-it translation available? Again, unfortunately no

Therefore, the webpage will be displayed in English.