The Rubiq Web Components are a collection of Web Components which can be dropped into an HTML page to provide pre-configured Rubiq API functionality.
Authentication
Rubiq Web Components are authenticated using Rubiq API Public authentication, and therefore require a PublicID
. Contact a Fluid Account Manager for assistance with creating a PublicID
.
The PublicID
is expected to be included in the page has an HTML META
tag with name rs-api-public-id
, in the HTML HEAD
section:
Code Block | ||
---|---|---|
| ||
<meta name="rs-api-public-id" content="17293429-b6f4-4225-9d4a-523385141284"> |
The components know where the Rubiq API is, but if the components should run against a different API location, for example the test API, this is also configured using a META
tag, named rs-api-url
:
Code Block | ||
---|---|---|
| ||
<!-- Remove in production: -->
<meta name="rs-api-url" content="https://testapi.dialogportal.com/v1"> |
Adding components to a page
Web Components are added to HTML as custom elements which look like regular HTML tags, e.g.:
Code Block |
---|
<rs-countdown>Loading...</rs-countdown> |
Any text or HTML inside the tags is rendered as usual, until the component custom elements have been defined, at which point their content is replaced with the correct web component body.
Component elements are defined by adding a single web component package script to the page. This should be added at the bottom of the page, just before the </body>
tag, to ensure that the page loads quickly:
Code Block | ||
---|---|---|
| ||
<body>
<!-- Page body, including Rubiq Web Components, go here -->
<rs-countdown loading-message="Please wait...">
Please wait...
</rs-countdown>
<!-- Load/activate Web Components -->
<script defer src="https://testapi.dialogportal.com/v1/components/lottery-online.js"></script>
</body> |
Web Components
The web components are unstyled or minimally styled, so they can easily be integrated into a website style. HTML Elements contained in the component bodies are give class names prefixed with rs-
, e.g. class="rs-autocomplete-items"
, unless they are extremely generic, e.g. highlighted
.
The components can have inputs and outputs, where inputs are HTML attributes, and outputs are events which may be listened for.
Input set on element directly in HTML:
Code Block | ||
---|---|---|
| ||
<rs-countdown loading-message="henter aktiv lotteriet..."></rs-countdown> |
Input set on element dynamically using JavaScript:
Code Block |
---|
function reserve(packageSize) {
var cmpNumbers = document.querySelector('rs-package-numbers');
cmpNumbers.setAttribute('package-size', packageSize);
} |
Attaching to output events:
Code Block |
---|
function onLottery(lotteryEvent) {
console.log(lotteryEvent.detail.name);
}
var cmpCountdown = document.querySelector('rs-countdown');
cmpCountdown.addEventListener('lottery', onLottery); |
Standard Lottery Events
lottery
: All Lottery web components except <rs-purchase-failure>
have a lottery
event, which contains an object describing the active Lottery, or (in the case of <rs-puchase-success>
) the Lottery that has just been purchased. The event contains these properties:
name
: Lottery namedrawDate
quickdrawDeadline
quickdrawPrize
noActiveLottery
: This event is emitted when no active Lottery is available.
<rs-countdown>
Fetches the currently active Lottery and displays a self-updating countdown:
Slutter om 56 dage, 11 timer og 30 minutter
When there is no active Lottery available, this message is displayed (in addition to the standard noActiveLottery
event being raised:
Der findes ingen aktiv lotteri
Inputs:
loading-message
: The message displayed while the active Lottery is being fetched from the API
<rs-quickdraw>
Fetches the currently active Lottery and if the quickdraw deadline has not passed, displays a message, e.g.:
“Hvis du spiller med inden d. 23/5 deltager du også i Hurtigtrækning om en ekstrapræmie på 1000”
<rs-package-numbers>
Requests a “package” of Lottery numbers and displays them. This component also has a button used to refresh the numbers.
The package is reserved for a limited time, and the component displays a running countdown to the reservation expiry.
Inputs:
packageSize
: Reservation package size, used to determine which package is being reserved. Setting this value triggers the reservation. Setting it to 0 cancels the current reservation.
reservation
: This “input” is actually used to programatically read the reservation details from this component:
Code Block | ||
---|---|---|
| ||
var cmpNumbers = document.querySelector('rs-package-numbers');
console.log("ReservationID: " + cmpNumbers.reservation.id); |
Outputs:
expired
: Emitted with the reservation expires
<rs-purchase-details>
Presents a form for users to enter their details, in order to complete the purchase. Some of the inputs for this component are required; if any of reservationID
, successUrl
or failureUrl
are missing, an error message will be displayed instead of the form.
Once this component is initialized with a valid reservationID
, the reservation expiry time is extended.
Once the form is validated and submitted, the browser will be redirected to a payment portal site. The successUrl
and failureUrl
properties are used to tell the payment portal where to go on successful/unsuccessful completion of the payment.
Inputs:
confirmLabel
: The text displayed on the “submit” button
reservationID
: The ID of the reserved package that is being purchased. This should be retrieved from the <rs-package-numbers>
component.
successUrl
: The URL that the user should be redirected to after a successful purchase (should contain an <rs-purchase-success>
component).
failureUrl
: The URL that the user should be redirected to after they cancel a purchase (should contain an <rs-purchase-failure>
component).
Outputs:
lotteryExpired
: Emitted when a user attempts to purchase an expired package reservation.
lotteryPreApproved
: Emitted after the reservationID
input has been verified and the package has been “pre-approved” for purchase. The form will not be displayed until this event has been emitted.
statusChanges
: Emitted when the form validation state changes.
<rs-purchase-success>
To be used in a “success” page, the result of a purchase callback. The component reads the purchase order ID from the URL and completes the purchase. It also outputs the lottery and reservation details in events, allowing the details to be displayed.
This component does not display anything.
Outputs:
lottery
: Similar to the lottery
standard lottery event, this event contains the details of the lottery that has just been purchased. The event contains the following properties:
name
: Lottery namedrawDate
: Lottery draw datequickdrawDeadline
: Deadline for the Lottery quickdraw
reservation
: Emits the details of the purchase reservation, with the following properties:
size
: Number of tickets purchasedprice
: Amount paid
<rs-purchase-failure>
To be used in a “failure” page, the result of an unsuccessful purchase callback. The component reads the purchase order ID from the URL and cancels the purchase.
This component does not display anything, and has no output events.