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 |