Integrate

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 you apiSignature, available in your backoffice. It will only work one time.

Note: A list of jwt librabry is avaivalable 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
      "cp" => "75000",                // User's zipcode
      "age" => 40,                    // User's age
      "gender" => "M",                // User's gender (M ou F)
      "userId" => "u-1234",                // User's unique ID
      "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["cp"] = "75000"                # User's zipcode
criteria["age"] = 40                    # User's age
criteria["gender"] = "M"                # User's gender (M ou F)
criteria["userId"] = "u-1234"     # User's unique ID
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
      cp: "75000",                       // User's zipcode
      age: 40,                           // User's age
      gender: "M",                       // User's gender (M ou F)
      userId: "u-1234",                       // User's unique ID
      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

<script src="https://static.test.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's state
  "value":110,                                              // Majored amount
  "initialAmount":150,                                      // Initial amount
  "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
  "paymentState":"DUE",                                     // Voucher's payment state
  "customTransactionId":"monIdDeTransaction",               // Platform's transaction id
  "backUrl":"'https://api.plateforme.com/notifications",    // notification's url
  "walletOperationId":"Transfer.Id",                        // Wallet operation ID to Jackpot's wallet
  "sendDate":null,                                          // Voucher's send date
  "url":null                                                // PDF's url
}

Use public API

We've released a public API to allow our partners build their own interface to display our offers.

You can find a full description here

3. Manual voucher confirmatioon (Optionnal)

If your platform want to manually confirm voucher for security checks purpose, we offer your possibility to manual validate vouchers.

Through our API, please contact our team to set up this feature.
Through our admin interface in "Coupon en attente" section.