Skip to content

POS Checkout v.1 - DropPay Checkout JS

The POS Checkout Javascript library reference

DropPay Checkout can be activated on your page in a standard fashion, making it take fully care of user's payment experience or you can custom its behaviour to fit your needings.

Here below we get through Checkout JS advanced features. For basic usage please refer the Init Page Code document page.

Init form

A form like the following one must be added to your page. Checkout JS is loaded from https://checkout.drop-pay.com/js/droppay-checkout.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<form action="your-server-address" method="POST" >
    <script class="droppay-button" type="text/javascript" 
    id="droppay-checkout-boostrap"
    src="https://checkout.drop-pay.com/js/droppay-checkout.js"
        data-checkout-key="72655e85806c4cb194fc108e846ed7b0"

        data-amount="2000.00"
        data-date-start="2016-07-16T19:20:30+01:00"
        data-date-end="2016-07-16T19:20:30+01:00"
        data-policy="CHARGEABLE"
        data-max-charges="1"
        data-product-description="Maglev turntable for mars sounds explorations"
        data-custom-id="123122e"
        data-custom-label="label"
        data-loopback-uri="https://merchant.server.com/?a=1&b=2&..."
        data-webhook="https://credenA:credenB@merchant.server.com/listener"

    >
    </script>
</form>

Once the form has been initialized javascript fires the event

droppay-checkout-init-complete

and a global object is available to be referred in your javascript code:

DroppayCheckout

Default flow

1️⃣ When Checkout has been initialized, a button is shown where you placed the form in the page.

2️⃣ User then may click the button and a modal window appears in overlay asking user to authorize the payment.

3️⃣ When user will have authorized the payment (capturing the QR code with DropPay mobile app and confirming it) the modal window should show a successful event animation and the form is submitted to your server.

Sometimes you may want a finer control and be able to :

  1. keep the button hidden until something else occurs in the page
  2. show the button and immediately fire up the modal with QR code
  3. keep the button hidden and showing the authorization modal when an event you trap occurs
  4. capture the modal exit event avoiding the browser to submit the form, and perforing some other actions

DropPay Checkout JS put you in control of the flow

  • with special form arguments
  • with two public functions

DropPay Checkout flow control form arguments

Attribute Policy Default Description
data‑auto‑show‑button optional true If set to false DropPay button is not shown and developer will have to call the showButton() function to turn it on
data‑auto‑show‑authorize‑payment optional false If set to true DropPay Checkout won't wait for user to click the button and the authorize-payment modal is immediately opened. This will happen also when showButton() is invoked when data-auto-show-button was set to false
data‑exit‑handler optional If defined, the form is not submitted and the success or failure modal closing event is diverted to it

DropPay Checkout flow control public functions

Both the functions return a javascript Promise object.

showButton()

This function shows the button when the form has been initialized with data-auto-show-button="false" and, if data-auto-show-authorize-payment="true", the authorize-payment modal is also activated.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    // register a window listener to received CheckoutKit initialization complete.
    addEventListener('droppay-checkout-init-complete', (event)=>{
        console.log('DropPay Checkout init broadcast event received');

        // Work with Checkout object
        if ( DroppayCheckout ) {
            // showButton returns a Promise
            DroppayCheckout.showButton()
                .then(()=>{
                    // do something special
                })
                .catch((_E)=>{
                    console.log('show button exception:');
                    console.log(_E);
                });
        }
    });
authorizePayment()

This function opens the authorize-payment modal window if the form has been initialized with data-auto-show-button="false" and, if data-auto-show-authorize-payment="false" (default).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    // register a window listener to received CheckoutKit initialization complete.
    addEventListener('droppay-checkout-init-complete', (event)=>{
        console.log('DropPay Checkout init broadcast event received');

        // Work with Checkout object
        if ( DroppayCheckout ) {
            // authorizePayment returns a Promise
            DroppayCheckout.authorizePayment()
                .then((res)=>{
                    console.log('authorize payment success result:')
                    console.log(res);
                })
                .catch((err)=>{
                    console.log('authorize payment failure result:')
                    console.log(err);
                });
        }
    });

Verify Checkout initialization

Please remember that Checkout JS public functions won't work before the droppay-checkout-init-complete library bootstrap event hasn't been fired. Please sincronize your flow listening to it before invoke showButton or authorizePayment. The <script> attribute id="droppay-checkout" is optional but can be useful when using a framework that manages page assets preloading procedures.

Custom exit handler

Function defined by the developer and called on authorize-payment modal closing event (success/failure). Checkout container form is not submitted. Result contains payment info to be collected and/or processed by the developer.

1
2
3
4
    function onPaymentComplete(result) {
        console.log('droppay operation complete with data:');
        console.log(result);
    }