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.

<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

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

Default flow¶

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

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

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¶

DropPay Checkout flow control public functions¶

Both the functions return a javascript Promise object.

    // 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);
                });
        }
    });

    // 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);
                });
        }
    });

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.

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