SolutionsSystem status
Documentation
Create accountContact

FastCheckout JavaScript integration

Suggest Edits

This technical manual is for embedding FastCheckout into your site using JavaScript.

1. Add the HTML elements

  1. Add FastCheckout's CSS to the <head> of your checkout page: 

    <link rel="stylesheet" href="https://testpay.multisafepay.com/sdk/fco/v1/fco.css">

  2. Add the FastCheckout script to the bottom of the <body> of your checkout page: 

    <script src="https://testpay.multisafepay.com/sdk/fco/v1/fco.js"></script>

  3. Add the DOM element for the FastCheckout UI in the <body> of your checkout page:

    <div id="FastCheckout"></div>

2. Create an order

  1. Create an order from your server:

    const createOrderResponse = createOrder()

  2. Pass the response to the client side.

3. Construct a FastCheckout object

const fastCheckout = new FastCheckout ({
    sessionId: createOrderResponse.data.session_id,
    locale: params.locale,
    brand: "fco"
});
Properties key
KeyRequiredValue
brandNoApplies the default FastCheckout styling
Set to fco
localeNoSets the language and country of the FastCheckout page
Format:
- ISO-639 language code
- ISO-3166-1 alpha-2 country code
Supported locales: de_DE, en_US, es_ES, fr_FR, it_IT, nl_NL
sessionIdYesThe identifier of the MultiSafepay session

4. Initialize FastCheckout

  1. Define the FastCheckout settings:

    const settings = {
    "fco": {   
        "redirect_mode": "modal",
        "coupons": {
            "disabled": false
        },
        "cart": {
            "disabled": false
        },
        "shipping": {
           "address": {
             "required": true
            }
        },
        "checkout": {
            "customer": {
                "enabled": true
            }
        },
        "issuers_display_mode": "radioList",
        "group_cards": true
    }
}
    Properties key

    All properties are optional.

    KeyValue
    cart.disabledWhether to display the shopping cart summary on the FastCheckout page:
    - true: Hides the shopping cart
    - false (default): Displays the shopping cart
    checkout.customer.enabledWhether to display the billing element on the FastCheckout page:
    - true: Displays billing element
    - false (default): Hides billing element
    coupons.disabledWhether to display available gift cards in the payment element:
    - true: Hides gift cards
    - false (default): Displays gift cards
    group_cardsWhether to bundle available card payments into a single gateway:
    - true (recommended): Displays a single card payment gateway
    - false (default): Displays all available card payments as separate options
    issuers_display_modeHow to display available issuers:
    - list: Displays issuers in a list with logos
    - select: Displays issuers in a dropdown list, without logos
    - select-button (default): Displays issuers as buttons with logos
    redirect_modeHow to redirect the customer to the issuer:
    - modal: Displays the issuer page as a modal window over the FastCheckout page
    - redirect (default): Redirects to the issuer page in the current browser tab
    shipping.address.requiredWhether to display the shipping element on the FastCheckout page:
    - true: Displays the shipping element
    - false (default): Hides the shipping element

  2. Initialize FastCheckout:

    fastCheckout .init('FastCheckout', {
    settings: settings,
    onError: function (state) {
        console.log('onError', state);
    },
    onLoad: function (state) {
        console.log('onLoad', state);
    },
    onSubmit: function (state) {
        console.log('onSubmit', state);
    }
});

  3. In the method call, create event handlers for the following events:

    EventEvent handler
    onErrorOccurs when there is an error in the FastCheckout page
    onLoadOccurs when the FastCheckout page is rendered
    onSubmitOccurs when the order is successfully submitted

  4. fastCheckout has one method:

    MethodDescription
    clear()Removes all elements in the library leaving the parent container empty

5. Test

To test the payment methods, see Testing payment methods - [(/docs/testing#test-payment-details).

6. Go live

When you're ready to process real payments, make the following changes:

  1. In Step 1: Add the HTML elements, replace the:

    • Test JavaScript library with the live JavaScript library:
    <script src="https://pay.multisafepay.com/sdk/fco/v1/fco.js"></script>
    • Test CSS file with the live CSS file:
    <link rel="stylesheet" href="https://pay.multisafepay.com/sdk/fco/v1/fco.css">

  2. In Step 2: Create an order, change the test endpoint to the live endpoint:

    https://api.multisafepay.com/v1/json/orders

šŸ’¬

Support

Email [email protected]

Top of page

Updated 9 months ago