Integrating with our card registration widget

The Loyalty Now card registration widget is a JavaScript widget with a customisable UI that allows you to easily collect credit/debit card details, and link credit/debit cards with the rewards services from your platform. By using the Loyalty Now card registration widget, the card details are sent directly to the Loyalty Now API through a secure connection without exposing your servers to sensitive information.

PCI DSS Level 1 Certified

With Loyalty Now being PCI DSS Level 1 certified means that Loyalty Now can take care of all the PCI compliance requirements for you.

After successfully registering the card on the eftpos, Visa or Mastercard scheme, the Loyalty Now API returns the created card object with a unique id (token or card ID) that you must use to link each unique card and associated transactions to your user’s account.

All modern desktop and mobile browsers are supported, including Chrome, Firefox, Safari, Microsoft IE 11 and Edge.

Integrating the Loyalty Now Widget

To integrate Loyalty Now card registration widget on your website, add the script below in your website.

<script src="https://js.loyalty.one/v3.2/L1CRWidget.js"
        integrity="sha384-Gx+Bjzpa4+gkVxERv55AOCYN7S857ACZxzgd0V4N4e7PzR42t5WKbi3O+Z6HlDrP"
        crossorigin="anonymous"></script>
<script>
   (function (w, o) {
      w['L1CardRegistrationObject'] = o;
      w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
   }(window, '_L1CR'));

    _L1CR('init', {
        anchorId: 'anchor-id',
        memberNumber: '123456789',
        token: '1a2b.................3c4d',
        serviceBaseUrl: 'https://demo.loyaltynow.com',
        programName: 'Loyalty Now Demo',
        termsAndConditions: 'https://www.loyaltynow.com/legal',
    });
</script>

In the example above only the mandatory fields are passed at initialisation.

The integrity attribute on the script element gives you confidence that the script you load has not been changed in any way. Read more about Subresource Integrity.

The initialisation object parameters

The following table describes the required and optional fields of the initialisation object. All object keys are case-sensitive.

Key	Requirement	Description
anchorId	Required	The CSS of the html element that you'd like to insert the Loyalty Now Widget on to.
memberNumber	Required	The unique identifier your system uses for the member registering the credit card.
token	Required	The publishable API key that has been generated from within the program admin portal.
serviceBaseUrl	Required	The base Loyalty Now URL for your program.
programName	Required	The name you use for your loyalty program.
termsAndConditions	Required	The URL of your company's loyalty program terms and conditions page.
hideTermsAndConditions	Optional	Optionally hide the default Terms and Conditions text. This field accepts: true false undefined
useDateSelectBoxes	Optional	Use select boxes instead of free text input fields for month and year. This field accepts: true false undefined
onStatusChange	Optional	A JavaScript callback function that will be fired when the status of calling the Loyalty Now API has changed. The function is called with two arguments: the status and the response object when available. Example response object: ts { cardId: string; firstSix: string; lastFour: string; providers: string[]; errorMessage: string; status: RegistrationStatus; hasErrors: boolean; } Possible status values: 'Success' 'Error' 'Processing' 'HttpError' Possible RegistrationStatus values: 'NullRequest', 'CardDetailsInvalid', 'ExpiryInvalid', 'CardNumberNotValid', 'NoMemberNumber', 'MemberDataInvalid', 'AlreadyRegistered', 'RegistrationFailed', 'Registered', 'NotEligible', 'UnknownError', 'TermsNotAccepted'
logo	Optional	The URL of a logo that will be displayed above the form. The image should be of dimensions (x by y).
validSchemes	Optional	An array of accepted card schemes. If none supplied, defaults to Visa and Mastercard. Currently supported: Visa, Mastercard, Eftpos, Amex, JCB, and Paymark. Example: js ['Visa', 'Mastercard', 'Amex'] Array items are case-sensitive.
text	Optional	An object containing customised form text values. Example: ts { button: string; buttonLoading: string; successTitle: string; successBody: string; cardNumber: string; monthExpiry: string; yearExpiry: string; } All fields optional. You can provide only button, for example.
styles	Optional	An object containing customised form styles. Accepts CSS color values. Example: ts { buttonBackgroundColor: string; buttonFontColor: string; errorColor: string; } All values optional.
errorMessages	Optional	An object containing error messages to configure for member errors. Keys match possible RegistrationStatus values. Example: json { "CardNumberNotValid": "The card number you have entered are not valid. Please try again", "NotEligible": "The card number you have entered is not eligible for this program" } Possible keys: 'NullRequest', 'CardDetailsInvalid', 'ExpiryInvalid', 'CardNumberNotValid', 'NoMemberNumber', 'MemberDataInvalid', 'AlreadyRegistered', 'RegistrationFailed', 'Registered', 'NotEligible', 'UnknownError', 'TermsNotAccepted'

The onStatusChange callback function

To receive the callback after the form submission you must pass a javascript function name reference on the onStatusChange property that will return the status and response object. An example is shown below. If you return false from the callback here and the status is success, this will prevent the success page from being shown and the form will just reset. If you choose to do this, it is up to you to handle your users experience of success.

<script>
	function sampleCallback(status, response) {
		console.log('response object ', response);
	}
</script>