Loopy Loyalty jQuery / HTML enrol

Sample code on how to build a custom landing page for enrolling into your Loopy Loyalty campaigns.

by pkosterman

HTML

<form id="enrol">
  <div>
    <label for="name">Name</label>
    <input type="name" id="name" name="name" />
  </div>
  <div>
    <label for="contactNumber">Contact Number</label>
    <input type="tel" id="contactNumber" name="contactNumber" />
  </div>
  <div>
    <label for=email>Email</label>
    <input type="email" id="email" name="name" />
  </div>
  <div>
    <input type="checkbox" id="dataConsent" name="dataConsent" checked/>I consent to my data being used for things.
  </div>
  <input type="submit" value="Create Card" />
</form>

JavaScript

// @todo: replace the value of cardId with your card-id
var cardId = '7qjK57rNrt30xwqnJYIAQ0';

$("#enrol").submit(function(event) {
  // make sure the form doesn't auto submit
  event.preventDefault();

  // build JSON payload
  // @todo: you might want to add validation here
  var payload = {};
  payload.timeZoneOffset = -480;
  payload.dataConsentOptIn = $("#dataConsent").is(':checked');

  // @todo: replace the below payload with your own field names as described in the blog post
  payload.customerData = {
    "First Name": $("#name").val(),
    "Mobile Number": $("#contactNumber").val(),
    "Email": $("#email").val()
  }

  // Log the payload for debug
  console.log(payload);

  // Execute ajax call with payload.
  // @todo: you might want to add in a loader whilst the ajax call runs
  $.ajax({
    url: 'https://api.loopyloyalty.com/enrol/' + cardId,
    data: JSON.stringify(payload),
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    success: function(data) {
      // @todo: if needed replace this with your success logic (for now it redirects to the card)
      alert('Success, the pass URL is ' + data.url + '. Press OK to redirect to the card.');
      window.location = data.url;
    },
    error: function(xhr) {
      // @todo: replace this with your error logic
      alert("Error, could not create card: " + xhr.responseJSON.error);
    }
  });
});