Integrate widget (option)

You should choose to implement the widget provided by Jackpot directly in your front interface (demo available here).

If you want to implement Jackpot API with your own UI/UX design, go to Integrate API and consult the swagger API

1. Build your token

You should build on your backend a jwt to use it to instantiate widget. This token will be used to authenticate voucher reservation. It should be signed with your apiSignature, available in your backoffice. It will only work one time.

Note: A list of JWT libraries is available here.

Token can be verified on https://jwt.io

Build your JWT token

PHP sample :

//composer require firebase/php-jwt
<?php
use \Firebase\JWT\JWT;

$signature = "monApiSignature";
$criteria=array(
      "amount" => 100,                // Amount to convert
      "userId" => "u-1234",                // User's unique ID (optional)
      "iat" => time(),                // Timestamp in seconds
      "notificationKey" => "12345"    // A key generate by you allowing to identify transaction
);
$jwt = JWT::encode($criteria, $signature);
?>

Ruby sample :

# sudo gem install jwt 

require 'jwt'

signature = "monApiSignature"

criteria = Hash.new
criteria["amount"] = 100                # Amount to convert
criteria["userId"] = "u-1234"     # User's unique ID (optional)
criteria["iat"] = Time.now.to_i         # Timestamp in seconds
criteria["notificationKey"] = "12345"   # A key generate by you allowing to identify transaction

token = JWT.encode criteria, signature, 'HS256'

Node.js sample :

/*
  npm install --save jsonwebtoken
*/
var jwt=require('jsonwebtoken');

var signature = "myApiSignature";
var criteria={
      amount: 100,                       // Amount to convert
      userId: "u-1234",                       // User's unique ID (optional)
      iat: Math.round(Date.now()/1000),  // Timestamp in seconds
      notificationKey: "12345"           // A key generate by you allowing to identify transaction
};

var token=jwt.sign(criteria,signature);

2. Display offers

Display widget on your page

Add a <div> to define where the widget will be displayed
```
<div id="widget-jackpot"></div>
```
Load widget's script

Staging:

<script src="https://static.test.jackpot-io.com/scripts/widget-jackpot.js"></script>

Production:

<script src="https://static.jackpot-io.com/scripts/widget-jackpot.js"></script>

Get your div container in a javascript object

var container = document.getElementById('widget-jackpot');

Get your JWT token
```
var token="myJWTToken";
```
Create a callback function. This will be called when your user will reserve a voucher.
```
var cb=function(voucher){
  console.log(voucher);
};
```

Add an options object

var options={
useBrowserHistory:true,
primaryColor:'#0d74a0',
fixedAmount:false,
};

Widget init

JckptWidget.init(container, token, null, cb, options);

For an asynchronous loading, your should use window.jckptAsyncInit function.

Complete code

<html>
  <head>
      <style>
        #jackpot{
            margin:auto;
        }
        @media screen and (max-width: 540px) {
            #jackpot{
                width:350px;
            }
        }
        @media screen and (min-width: 540px) {
            #jackpot{
                width:510px;
            }
        }
        @media screen and (min-width: 768px) {
            #jackpot{
                width:670px;
            }
        }
        @media screen and (max-width: 768px) {
            #jackpot .detail .informations {
                flex-direction: column-reverse;
                align-items: center;
            }
        }
        .nav>li>a.profile{
            display:none;
        }
    </style>
  </head>
  <body>
    <div id="widget-jackpot"></div>
    <script>
      // Function called on page loading
      window.jckptAsyncInit = function(){
        // Widget container element
        var container = document.getElementById('widget-jackpot');
        // token jwt
        var token="myJWTToken";
        // Callback called at voucher reservation
        var cb=function(voucher){
          console.log(voucher.id);
        };
        // Customization options
        var options={
          useBrowserHistory: false,
          primaryColor:'#0d74a0',
          fixedAmount:false,
        };
        // Instantiate widget
        JckptWidget.init(container, token, null, cb, options);
      }
    </script>
    <!-- Async loading -->
    <script src="https://static.test.jackpot-io.com/scripts/widget-jackpot.js" async defer></script>
  </body>
</html>

The callback function get as parameter voucher the confirmed coupon object

{
  "id": "d9708add-6307-418b-a3fc-8c82aa11c9a9",              // Voucher's id
  "state": "CONFIRMED",                                      // Voucher state
  "value": 110,                                              // Voucher value
  "price": 150,                                      // Voucher price
  "reservationDate": "2017-06-24T15:27:32.502Z",             // Reservation date
  "validityDate": "2018-01-31T00:00:00.000Z",                // Voucher's expiration date
  "resaExpireDate": "2017-06-26T15:27:37.502Z",              // Reservation's expiration date
  "couponId": "AGYPMNVXPJ",                                  // Human friendly id (for support)
  "confirmDate": "2017-06-25T00:36:04.014Z",                 // Voucher's confirmation date
  "sendDate": null,                                          // Voucher's send date
  "url": null                                                // PDF's url
}