Unitel Mongolia

Subscription Integration

Unitel Mongolia subscriptions generally follow the standard integration process as other Operators except for a couple of minor differences outlined below.

Typical Flow

The typical flow for Unitel Mongolia is as follows:

  1. User visits a landing page and selects to subscribe to the service
  2. Merchant redirects to SLA Digital Checkout
  3. Merchant calls subscription Create API with Token returned from Checkout
  4. Merchant grants or denies access to content based on the response from Create API call
  5. Welcome SMS should be sent using the SMS API with TOKI deep link

MO SMS

Each service has a unique shortcode. The following MO commands apply and are not configurable:

Daily subscriptions: ON
Monthly subscriptions: ON30
Unsubscribe: OFF

One Off Integration

Display checkout page in a iframe in your payment page.

📘

Note

Currently this integration only available with one-off payments in Unitel Mongolia

The hosted payment page is a variation on checkout and is similar to the hosted button integration, however instead of displaying a button and MSISDN and PIN entry fields, the screen will display Unitel's consent page within an iframe.

Typical Flow

  • User is directed to a landing page
  • From the landing page an iframe with consent is opened
  • Control is returned to the merchant page with a success or error payment response via js callback
  • Merchant receives a payment notification from SLA Digital

Within the iframe the user is:

  • prompted for their MSISDN
  • prompted for their PIN

Integration with your Landing or Payment Page

📘

Note

Normally the checkout returns a token that merchants would use to call the subscription or charge API but for hosted payment page, the flow is 100% handled by SLA Digital and Operator which is the final result of the payment which is returned by js callback.

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 flow to appear include the following empty div.

<div id="paymentIframe"></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') {
          //in this state you may check data['action'] either 'charged' or 'created'
        }
      }
    }
    window.addEventListener('message', slaCallback, false);
    
    (function() {
      var credentials = {
        merchant: '<your partner uri>',
        service:  '<your campaign uri>',
        tokiUserId: '<toki user id>', // optional
        tokiAuthToken: '<toki auth token>' // optional
      };
      var custom = {
        
      };
      const sla = new Sla(credentials, custom);
      sla.showIframe();
    })();
  </script>

🚧

Note

If the app is embedded in Unitel's TOKI app, you may provide the tokiUserId and tokiAuthToken. Check the TOKI section below.

📘

Note

Make sure 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 which are available via the Alacrity portal.

Add your own custom javascript code to handle success and error callbacks from SLA Digital. If the status is success then you may check whether the action param is either charged or created.

Action

Description

charged

the user is successfully processed and charged

created

either user is failed to charge or user click close button to cancel the payment

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

Message

Description

blocked

The customer has been blocked and the transaction cannot continue. This is due to fraud prevention measures.

Customisation

You can customise certain CSS attributes of the iFrame bypassing 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).

Name

Default

width

200px

height

60px

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

var custom = {
  width: '200px',
  height: '60px',
  background_color: '#00BC01'
};

Sample Unitel payment page

unitel default payment pageunitel default payment page

unitel default payment page

Toki eWallet (only for Unitel Mongolia)

If the service is embedded within Unitel's TOKI application then additional payment options may be available to the user and the tokiAuthToken and tokiUserId will be required.

The TOKI eWallet flow is outlined as follows:

  1. User clicks on the app and TOKI will make an API callback to the merchant's app which includes tokiAuthToken
  2. Merchant calls Get User Info API to fetch user info from TOKI. The response of the Get User Info API will provide an _id which is a tokiUserId
  3. Include the tokiAuthToken and tokiUserId in the js credential object

Within the iFrame:

  1. User will choose either to proceed with Toki eWallet or Unitel carrier billing
  2. If the user selects Unitel carrier billing then the user will go to the typical flow (refer above)
  3. If the user selects the Toki eWallet then the charge will automatically deduct from the user's eWallet
  4. User is redirected back to the merchant page
  5. js response will receive success/failure response status

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. The result of payment is made available via the slaCallback function - shown above

  3. Receive callback for payment information from the notification stated in the campaign configuration

  4. Deliver content to the user

Example flow (Toki User)

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

  1. User click on mini-app inside Toki app

  2. Toki will make a callback to your registered URL which includes tokiAuthtoken

  3. Merchant makes an API call to Toki to get user information - GetUserInfo API

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

  5. Receive callback for payment information from the URL notification stated in the campaign configuration

  6. Deliver content to the user

📘

Noted

For the Toki implementation please contact SLA Digital Integration team for documentation on the Toki APIs