NAV Navbar
shell

Introduction

DaisyJs is the JavaScript library that helps you facilitate Daisy integration on your front-end.

This documentation will explain how initialize and use the different features of this library.

Including DaisyJs

Including the library

<script src="https://js.sharewithdaisy.com/1.0.1/daisy-js.min.js"></script>

In order to use DaisyJs, you always need to include the library and set your application's Publishable key.

To include DaisyJs to your website, append a <script> tag to pages <body> tag with the following url https://js.sharewithdaisy.com/1.0.1/daisy-js.min.js.

Initializing the library

DaisyJs.publishableKey = '{YOUR_PUBLISHABLE_KEY}';
DaisyJs.locale = 'en';

Here is the list of all the attributes needed to initialize DaisyJs

Attributes

$nbsp;  
publishableKey
required
The publishable key linked to your application. This key authorizes all requests made from the clients browsers. You can find it on your applications's dashboard in the basic configuration section.
locale
optional
The locale that will be used to display error messages. The currently supported locales are : en, fr. The default value is en.

The DaisyJs object

DaisyJs functions signatures

DaisyJs.handleOrderCreation(container, clientToken [, options]);
DaisyJs.handleShareWidget(container, orderData [, options]);

The following table illustrates the set of functions that DaisyJs offers

Functions

$nbsp;  
handleOrderCreation Used to initiate Daisy orders and display the organizer's payment tunnel on your website.
handleShareWidget Used to create the payment link share widget on your order confirmation page.

Customization options

All of the DaisyJs object functions have one common options argument with can have the following attributes

Attributes

$nbsp;  
autoResize
boolean
optional
Defines whether the container's iframe height adjusts itself to its content height. The default value is true.
loader
string
optional
Defines the loading image URL (or base64 encoded image) that will be displayed while initializing the order creation and the iframe loading. The default value is the main Daisy loader URL.
loaderHeight
string
optional
Defines the loader height. The default value is 60px.
loaderWidth
string
optional
Defines the loader height. The default value is 60px.

DaisyJs.handleOrderCreation

<body>

  ...

  <div id="daisy-container"></div>

  ...

  <script>
    //Initialize library
    DaisyJs.publishableKey = '{YOUR_PUBLISHABLE_KEY}';
    DaisyJs.locale = 'en';

    var clientToken = "tok_kj7gsHGjsdhg6SHGhgshd54";

    DaisyJs.handleOrderCreation('daisy-container', clientToken, {autoResize: true});
  </script>
</body>

Creates an order with the given orderData and displays the payment tunnel in the container node element.

Function arguments

$nbsp;  
container
required
The ID of the container in which the Daisy payment tunnel will be displayed.
clientToken
required
The client token that has been generated after the server-side order creation. See more about orders creation.
options
optional
The Customization options

DaisyJs.handleShareWidget

<body>

  ...

  <div id="share-widget-container"></div>

  ...

  <script>
    //Initialize library
    DaisyJs.publishableKey = '{YOUR_PUBLISHABLE_KEY}';
    DaisyJs.locale = 'en';

    DaisyJs.handleShareWidget('share-widget-container', '6272814c-2ca5-421e-a7bc-e290db9d57e2', {autoResize: true});
  </script>
</body>

Creates an order with the given orderData and displays the payment tunnel in the container node element.

Function arguments

$nbsp;  
container
required
The ID of the container in which the Daisy share widget will be displayed.
orderId
required
The Daisy order ID. This is the same ID returned by Daisy API after the order creation. Also, Daisy sends back this ID in the query parameter daisy-id within the returnUrl after the order organizer finishes his payment.
options
optional
The Customization options