Implementation

To start using Checkout, the merchant needs to connect Valitor's Checkout script to a payment button. The script needs to be initialized using the window.valitor.checkout.init() function. After initialization, the function window.valitor.checkout.open() is used to open Checkout.

Fields

window.valitor.checkout.init()

Field	Type	Usage	Description
key	String	M	Merchant's public key, allocated by Valitor
merchant	String	M	Merchant / Company name that is displayed on the receipt sent to the customer
image	String	O	The URL directing to the company logo to be displayed in the header of the Valitor Checkout window If an URL is specified but no `css`, the company logo will be displayed with a look with a neutral / beige color theme as seen here If nothing is specified, the Valitor logo is displayed in the header along with the default look The optimal ratio for the logo's size is 3:1
currency	String	M	Three-letter ISO currency code
css	Object	O	It is possible to customize the colors for both the header of Valitor Checkout and the x button in the right corner that closes the window headerColor: The window header color is defined here headerCloseColor: The x (close) button color is defined here This attribute depends on the `image` attribute. If no `image` is specified, the `css` attribute is ignored and the default look is used instead
language	String	O	Possible languages are Icelandic and English Icelandic - language="is" English - language="en" The default language is Icelandic

window.valitor.checkout.open()

Field	Type	Usage	Description
amount	String	M	The amount that should be charged and displayed to the buyer
merchantReferenceId	String	M	Statistically unique value that identifies this payment request in the merchant system This value will be submitted back to the merchant in the Checkout response
digitalSignature	String	M	Unique SHA512 hash to validate the checkout request See Communication with Checkout for details

Please note

When sending in an amount with a fractional part, use decimal point as a decimal seperator. For example: 8.95

Implementation steps

Start by loading the script.

HTML

<script src="https://checkout.uat.valitor.is/checkout.js"></script>

JavaScript

const script = document.createElement('script'); 
script.src = "https://checkout.uat.valitor.is/checkout.js";

After the script has been loaded, the attributes key, image, language, merchant, currency and css should be added to it.

To add these attributes to the script, the built in function window.valitor.checkout.init() is used. The function can receive the fields chosen by the merchant or only the required fields.
This should only be done once.

Examples in JavaScript and React on how to load, initialize and add the script to the merchants website can be found below.

JavaScript

/* JavaScript example */
const css = { 
    headerColor: 'pink', 
    headerCloseColor: 'red', 
};

const script = document.createElement('script'); 
script.src = "https://checkout.uat.valitor.is/checkout.js"; 

script.onload = () => { 
    window.valitor.checkout.init({ 
        key: 'ApiKey.fcVvGwJ2hUC97igual//yXn1w1CwYl1qz5cCKbyXZrM=', 
        language: 'en', 
        merchant: 'Valitor Checkout Demo', 
        currency: 'ISK',
        image: 'https://specs.valitor.is/Acquiring/Checkout/en/images/valitor-logo-blue.png', 
        css, 
    }); 
};

document.head.appendChild(script);

React

/* React example */

useEffect(() => { 
    /* Load script */
    const script = document.createElement('script'); 
    script.src = "https://checkout.uat.valitor.is/checkout.js"; 

    /* Add attributes */
    script.onload = () => { 
        window.valitor.checkout.init({ 
            key: 'ApiKey.fcVvGwJ2hUC97igual//yXn1w1CwYl1qz5cCKbyXZrM=', 
            language: 'en', 
            merchant: 'Valitor Checkout Demo', 
            currency: 'ISK',
        }); 
    }; 

    /* Append script to head of document */
    document.head.append(script); 
}, []);

To add the amount of the sale to the script, the built in function window.valitor.checkout.open() should be used. This can be done if window.valitor.checkout.init() has run.

JavaScript

const requestData = {
    amount: 5460,
    merchantReferenceId: '48ad79ca-46f2-4e85-a491-024f4100872c',
    digitalSignature: 'b399fc9fb78013cb3a70d9d5a4602adcc0cac0fd96c0081fdc55a44d1f0b925b7eacc8f4f835941e8d934721423731dc902182f40353dc69e810b65e673cf0ef',
};

window.valitor.checkout.open(requestData)

The following implementation adds the amount of the sale with the window.valitor.checkout.open({ amount, merchantReferenceId, digitalSignature }) function so it sends the amount to the script only when the button is clicked. This also includes the merchantReferenceId parameter that allows the merchant to identify the transaction in the merchant's systems, as well as the digitalSignature parameter that allows Checkout to validate the payment request.

HTML

<form id="valitorCheckout" onSubmit={getResponseData}> 
    <button type="button" 
            onClick={() => window.valitor.checkout.open({ 
                amount: 5460, 
                merchantReferenceId: '48ad79ca-46f2-4e85-a491-024f4100872c', 
                digitalSignature: 'b399fc9fb78013cb3a70d9d5a4602adcc0cac0fd96c0081fdc55a44d1f0b925b7eacc8f4f835941e8d934721423731dc902182f40353dc69e810b65e673cf0ef' })}
            disabled={amount <= 0}> 
    Pay
    </button> 
</form>

If the payment is successful, Checkout sends the payment response to the form. In the above example the getResponseData would be triggered when the form receives the response data. Below is an example of how to get the checkout response data.

JavaScript

const getResponseData = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const checkoutResponse = JSON.parse(formData.get('response'));
};