PayzenJS

PayzenJS library

PayzenJS is a javascript library that allows you to integrate Payzen platform in your site easily.

    PayzenJS.go({								
        orderData: {
            vads_site_id: "12345678",
            vads_ctx_mode: "TEST",
            vads_amount: "100"
        },
        credentials : {
            source: "credential.php"
        }
    });   

See live demo here: http://www.profesorfalken.com/PayzenJSDemo

What can I do with it

With PayzenJS you can perform:

• Payment operations by form in browser.
• Payment operations by iframe.
• Payment operations using popups, transitions, etc (using external libs if necessary).

Your creativity and skills are your only limit!

Check Payzen documentation to see what operations you can accomplish.

Characteristics

• Tiny JavaScript File.
• Just download and use.
• Easy configuration
• No a single dependency. Pure JavaScript Vanilla that work in your browser out of the box.

Installation

• Download the PayzenJS.js file and place it in your project.
• Import it in your web:

    [...]
    <script type="text/javascript" src="/js/PayzenJS.js"></script>
    [...]

• Its DONE! you can go now to 'Basic Usage'

Optional (Node.js - browserify)

This is a client-side library but if you want to take advantage of Node.js npm package system and require it using solutions as browserify, you can perform a:

npm install PayzenJS

And/or add it to your project dependencies in package.json.

After that, you can use it anytime you want and it will be bundled in your solution:

   var PayzenJS = require("PayzenJS");

Basic Usage

Full form payment

    //Launch full form payment
    PayzenJS.go({								
        orderData: {
            vads_site_id: "12345678",
            vads_ctx_mode: "TEST",
            vads_amount: "100"
        },
        credentials : {
            source: "credential.php"
        }
    });   

Payment into canvas (iframe)

First, you have to set the 'canvas'. This can be an existing div element in your page or an already defined iframe.

    [your page]
    <div id="paymentCanvas"/>
    [your page]

Then you only have to set the right config.

    //Launch full form payment
    PayzenJS.go({			
        canvas: {
                    id: "paymentCanvas"
            },				
        orderData: {
            vads_site_id: "12345678",
            vads_ctx_mode: "TEST",
            vads_amount: "100"
        },
        credentials : {
            source: "credential.php"
        }
    });   

Target Platforms

When using Payzen platform, you can specify the main platform you want to target depending on your country/product.

By default it will use secure.payzen.eu (Payzen France)

Other possible values are:

• Payzen Germany: de.payzen.eu
• Payzen OSB: secure.osb.pf
• Payzen Inde: secure.payzen.co.in
• Payzen Brazil: secure.payzen.com.br

To use them you just have to insert a 'target' value in your config:

    //Launch full form payment
    PayzenJS.go({
                target: "de.payzen.eu",
        orderData: {
            vads_site_id: "12345678",
            vads_ctx_mode: "TEST",
            vads_amount: "100"
        },
        credentials : {
            source: "credential.php"
        }
    });   

Handle credentials

In order to authenticate the request it is necessary to sign the form data:

In order to authenticate using PayzenJS, you have to set one online resource which should calculate the signature.

    {
    [...]
        credentials : {
           source: "credential.php"
        }
    [...]
    }

In this case, this will call and endpoint called credential.php. This call will be:

• Made by POST
• With a content-type: application/json;charset=UTF-8
• With a JSON as payload containing all the form fields

    {vads_trans_id: "024366", vads_trans_date: "20161124193157", va...}

On server side you must sign the content using your private key as described in the official documentation:

https://payzen.io/en-EN/form-payment/standard-payment/computing-the-signature.html

And give a response from server that must be also JSON (application/json) encoded in UTF-8 and with this format:

{"signature": "606b369759fac4f0864144c803c73676cbe470ff"}

Examples of credential calculation implementation

• In PHP
• In Java (Servlet)

IMPORTANT SECURITY NOTE

Note that this credential calculation could carry security concerns if you do not secure your application properly.

For example, a smart attacker could forge a request using the 'source' enpoint and sign his requests without event knowing the merchant private key.

You sould be protected from this possible Cross Site Request Forgery (CSRF) attack using the common means:

• Restricting Access-Control-Allow-Origin policy
• Controlling the referer origin.
• Transmitting a session/request csrf token.
• Using all the controls provided by your infrastructure (proxy, server, etc)

More information here: https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet

Advanced Usage

For more complex payment operations (card registration, payment by id, etc), please check all the possible parameters / operations here:

https://payzen.io/en-EN/form-payment/standard-payment/generating-a-payment-form.html