Documentation
Support

Enable In Page Checkout option

Suggest Edits

This guide explains how to integrate Scalapay In Page Checkout into your eCommerce. It allows you to have a more user-friendly checkout flow that keeps customers on your website during the checkout experience.

🚧

Attention

This guide is based on the installation of Scalapay for custom solutions. Before proceeding you have to integrate it as described here .

❗️

ATTENTION !!

This integration is not compatible for WebView on IOS device!

Installation

Once Scalapay is installed on your website, please follow these steps:

1- Create an AJAX controller to manage the Scalapay Create Order API

Create an AJAX endpoint to manage the Scalapay Create Order API as described here. After you have integrated this API, edit your code to support the In Page Checkout mode following these steps:

  • The request payload of the Scalapay Create Order API requires two keys: redirectCancelUrl and redirectConfirmUrl. Add this prefix https://cdn.scalapay.com/in-page-checkout/popup.html?scalapayPopupOutputRedirect= to their values and pass them encoded in base64 like this PHP example:
[...]

// set the scalapay in page checkout popup cdn url
$scalapayPopupCdn = 'https://cdn.scalapay.com/in-page-checkout/popup.html';

// build redirect confirm or cancel url of your site
$redirectCancelUrl = 'https://{{MY_ECOMMERCE_HOST}}/cart-page';
$redirectConfirmUrl = 'https://{{MY_ECOMMERCE_HOST}}/thank-you-page-controller?param=1&param=2';

// set the merchant redirect confirm and cancel url payload
$payload['merchant']['redirectConfirmUrl'] = $redirectConfirmUrl;
$payload['merchant']['redirectCancelUrl'] = $redirectCancelUrl;

// override redirect url if in page checkout if enabled.
if ($config['inPageCheckoutEnabled']) {
	$payload['merchant']['redirectConfirmUrl'] = $scalapayPopupCdn .
		'?scalapayPopupOutputRedirect=' .
		base64_encode($payload['merchant']['redirectConfirmUrl']);

	$payload['merchant']['redirectCancelUrl'] = $scalapayPopupCdn .
		'?scalapayPopupOutputRedirect=' .
		base64_encode($payload['merchant']['redirectCancelUrl']);
}

[...]
  • The response of the controller must be a JSON like this:
    • result: Contains the outcome of the communication.
    • messages: Contains possible error messages.
    • redirect: Contains the URL of the Scalapay Merchant portal given by the Scalapay Create Order that will be opened into the popup.

Example:

// SUCCESS CASE
{
  "result": true,
  "messages": "",
  "redirect": "https://portal.scalapay.com/checkout/XXXXXXXXXXXX"
}

// FAILURE CASE
{
  "result": false,
  "messages": "Internal server error",
  "redirect": ""
}

2- Insert the Scalapay CDN script on the checkout page

Add this script to the head of the checkout page:

<script src="https://cdn.scalapay.com/in-page-checkout/popup.min.js" type="text/javascript"/>

3- Configure the Scalapay CDN script

Add this script before the closure of the body tag on your checkout page:

<script type="text/javascript">
        // instance Scalapay Checkout Popup class
        const scalapayCheckoutPopup = new ScalapayCheckoutPopup();

        /**
         * @class ScalapayPopup
         */
        class ScalapayPopup {
            /**
             * Initialize the Scalapay Popup configuration.
             *
             * @returns void
             */
            initConfiguration() {
                // set configurations
                scalapayCheckoutPopup.setConfig('paymentSelectors', []);
                scalapayCheckoutPopup.setConfig('placeOrderSelector', '');
                scalapayCheckoutPopup.setConfig('ajaxController', '');
                scalapayCheckoutPopup.setConfig('ajaxMode', '');
                scalapayCheckoutPopup.setConfig('ajaxContentTypeHeader', '');
                scalapayCheckoutPopup.setConfig('ajaxControllerPayload', '');
                scalapayCheckoutPopup.setConfig('agreementSelectors', []);
                scalapayCheckoutPopup.setConfig('placeOrderStyle', '');

                // run bootstrap
                scalapayCheckoutPopup.bootstrap();
            }
        }

        // start after the DOM has been loaded
        document.addEventListener('DOMContentLoaded', () => {
            // init scalapay popup class
            const scalapayPopup = new ScalapayPopup();

            // init the plugin process
            scalapayPopup.initConfiguration();
        });
    </script>

Now set the configuration keys on the initConfiguration() method as described below. You can also pass for each key a function instead of a fixed value.

KeyTypeRequiredDescriptionExample valueSupported value
paymentSelectorsarrayyesThis parameter defines the list of the Scalapay payment methods of the checkout page using an array of strings containing the input DOM selectors of it. This will permit the substitution of the original “Place Order” button with the “Scalapay Place Order” button when the user chooses a Scalapay payment method.[ "input[type='radio']#payment-method-scalapay-payin3", "input[type='radio']#payment-method-scalapay-payin4", "input[type='radio']#payment-method-scalapay-paylater" ]*
placeOrderSelectorstringyesThis parameter defines the DOM selector of the “Place Order” button which will be replaced with the Scalapay Place Order button used to open the popup."#place-order"*
ajaxControllerstringyesThis parameter defines the AJAX controller endpoint that manages the call to the “Scalapay Create Order API” described in the first step of this guide. It will permit to do an ajax call to this endpoint when the Scalapay Place Order button will be pressed."https://{{MY_ECOMMERCE_HOST}}/scalapay/order/create>"*
ajaxModestringyesThis parameter defines the method of the ajax call that will be done to the url defined by the ajaxController parameter."post"post or get
ajaxHeadersobjectnoThis parameter overrides the headers object of the AJAX call.{ "Accept": "application/json", "Content-Type": "application/json" }object
ajaxContentTypeHeaderstringnoThis parameter defines the optional content type of the ajaxControllerPayload parameter. It is used only in case you need to send a payload to your controller via the POST method. This parameter won't be considered if the parameter "ajaxHeaders" has been set."application/json"application/json or application/x-www-form-urlencoded
ajaxControllerPayloadmixednoThis parameter defines the optional payload that will be sent to the AJAX controller set in the ajaxController key. In the case of the ajaxMode parameter has been set as “post” it can be a JSON or what you want according to the ajaxContentTypeHeader. Instead, if the ajaxMode parameter is “get” it must be a query string.{ "orderId": 888, "token": "bc8y38ecg4b7tg35y8fbrcn78r3" }*
agreementSelectorsarraynoThis parameter defines the list of the checkboxes to be verified as checked when the Scalapay Place Order button is clicked. You can use this key to check the required agreement selectors before proceeding with the order.[ "input[name='required-agreement-1']", "#required-agreement-2" ]*
placeOrderStylestringnoThis parameter defines the optional css style that will be applied to the wrapper of the Scalapay Place Order Button."margin: 5px 0 5px 0; padding: 0"*
callbackfunctionnoThis parameter permits to define a callback function that will be executed at the end of the flow instead of doing a redirect to the redirectConfirmUrl specified in the first step of this documentation. It can be helpful to retrieve a payload containing the Scalapay Order Token and other additional data.(payload) => {console.log('Payload data: ', payload)}function

👍

Check the customer's flow with In Page Checkout

Check out this video to see the purchase experience here

Updated 7 months ago