Zain Iraq

Checkout Two Click Integration with your Landing or Payment Page

The hosted button is a variation on checkout but instead of the MSISDN entry and pin entry screens being separate screens hosted by SLA these screens are presented within an Iframe. The screens are hosted by SLA.

Flow

A typical flow would be:

• User is directed to your landing page
• From the landing page an Iframe is opened
• Control is returned to the merchant page with a token via the slaCallback function
• Redirect to SLA using the token as a query param. SLA will make additional fraud detection checks and then subscribe the msisdn if the checks are succesful.

Include our javascript in the head section of your payment page.

<script src="http://checkout.sla-alacrity.com/sla.js"></script>

In your page where you would like the button to appear include the following empty div.

<div id="paymentButton"></div>

Include the following javascript immediately before the closing body tag of your page.

<script>
    function slaCallback(e) {
      if ( e.origin === 'http://checkout.sla-alacrity.com' ||
           e.origin === 'https://checkout.sla-alacrity.com' ) {
        var data = e.data;
        if (data['status'] === 'error') {
          //Add your custom error handling code
          //data['message'] will contain the error reason
        }
        if (data['status'] === 'success') {
          //data['token'] will contain the TOKEN that can be used with the subscription/create API
        }
      }
    }
    window.addEventListener('message', slaCallback, false);
    
    (function() {
      var credentials = {
        merchant: '<your partner uri>',
        service:  '<your campaign uri>'
      };
      var custom = {
        
      };
      const sla = new Sla(credentials, custom);
      sla.showButton();
    })();
  </script>

📘

Info

Make sure only to only inject one iFrame on a page. From the same payment page you should not inject multiple iFrames such as one for each service frequency, i.e. daily, weekly

Edit Javascript

Edit the credentials variable use your partner uri and campaign uri available via the Alacrity portal.

Add your own custom javascript code to handle success and error callbacks from SLA. If the status is success then the msisdn will be returned and the subscription will be created. You do not then need to call our subscription/create API as the subscription is already created.

If the status is error then message will contain the reason for the error. Some possible values for message can be seen here.

Customisation

You can customise certain css attributes of the button by passing them in the custom variable. This is a list of all available customisations (if you leave any of them out the default value will be used).

Below is an example of adding these customisation options to the custom variable.

var custom = {
  width: '200px',
  height: '60px',
  background_color: '#00BC01',
  font_color: '#FFFFFF',
  font_size: '22px',
  border_radius: '15px',
  instruction_font_color: '#000000'
};

Using the default values the button will appear like this.

❗️

Error

If you get an error button_integration_not_allowed then you need to contact SLA to enable this flow for your service.

❗️

Error

If you get an error message blocked then the fraud prevention mechanism has blocked access to the service from this MSISDN. This can occur, for example, if the phone is outside of the country.

Example flow

All HTTP request parameters should be passed in URL Query String - query_params.

1. Direct the user to your Landing or Payment Page
   On the Landing page display the Iframe as shown above.

2. A TOKEN is made available accessed via the slaCallback function - shown above.

📘

Info

A token is only valid for two minutes.

3. User submits form, redirect to: http://{API}/mcp_click_he/redirect?merchant={merchant_uri}&service={service_uri}&redirect_url={url}&correlator={string}&token={returned fraud token}

4. SLA handles fraud detection check and redirects back to Merchant using the provided redirect URL.
   Example: {redirect_url}?status=success&transaction_id={correlator}&msisdn={msisdn}
   Example: {redirect_url}?status=error&message{reason for failure}&transaction_id={correlator}&msisdn={msisdn}

5. If the redirect has status error, you should fall back to PIN SMS flow.

6. Welcome SMS

After a customer subscribes it is required that a merchant send a welcome SMS with the details of how to access a service. This reduces the likelihood of a customer losing access to the service thereby reducing customer complaints.

Please review the Send SMS API usage page for details.