Introduction

The document is for 3rd party vendor that wants to vend transport tickets on our platform.

Vendors will be given MerchantKey and MerchantCode to access the trips web booking widget.

The document is for 3rd party vendor that wants to vend transport tickets on our platform.

Vendors will be given MerchantKey and MerchantCode to access the trips web booking widget.

The Api requires bearer token for authentication which is SHA512 endcoded MerchantKey:MerchantCode (https://passwordsgenerator.net/sha512-hash-generator/)

Widget base url: https://widget.staging.trips.ng

Request Headers:

Authorization: bearer + SHA512(MerchantKey:MerchantCode)
MerchantKey: {merchantkey}
MerchantCode: {merchantcode}
Content-Type: application/json
Request Headers Sample:
Authorization: Bearer abc123
Content-Type: application/json
MerchantCode: merchant code provided

Method A: Using URL Parameters Structure

https://widget.staging.trips.ng/{MerchantCode}/{MerchantHash}

Example: https://widget.staging.trips.ng/GH773-2977...8jha31/457b25...5afd

How to Use:

• Replace {MerchantCode} and {MerchantHash} with your actual credentials.

• Open the link in a browser or embed it in an iframe

Method B: Using Local Storage

See code snippet for React Native below:

 <WebView
        ref={webViewRef}
        source={{
          uri: MERCHANT_URL,
        }}
        onNavigationStateChange={(event) => {
          console.log("Navigation State Change:", event);
           
        }}
        injectedJavaScript={`
          try {
            localStorage.setItem("dxz", "${TEST_MERCHANT_CODE}");
            localStorage.setItem("xdg", "${TEST_MERCHANT_HASH}");
            localStorage.setItem("CustomerName", "${TEST_CUSTOMER_NAME}");
            localStorage.setItem("CustomerId", "${TEST_CUSTOMER_ID}");
            console.log("Credentials auto-injected successfully");
          } catch (error) {
            console.error("Error auto-injecting credentials:", error);
          }
          true;
        `}
        startInLoadingState={true}
        onLoadStart={handleLoadStart}
        onLoadEnd={handleLoadEnd}
        onError={handleError}
        // renderLoading={() => <ActivityIndicator size="large" color="#CF9D61" />}
        onMessage={(message) => {
          console.log("Message received:", message.nativeEvent.data);
          setResponse(message.nativeEvent.data);
          handleOpen();
        }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        style={styles.webView}
      />

To Get The Token

Get Token API: https://api.staging.trips.ng/api/account/gettoken

TOKEN REQUEST AND RESPONSE SAMPLE

The Api used to login to get hash token for using the trips web boking widget, see sample request model and response.

Sample Request

Authorization: Bearer abc123
Content-Type: application/json
MerchantCode: merchant code provided

{
"CustomerName": "John Doe", //Required
"CustomerIdentifier": "" //could be customer Id or as given from the bank
}

Sample response 
{ 
	"Token": 
	"9d08ec3b5b8008f117671011069cf79f220e81a3b164627588887c2f5e10d3a04fd24693cd772149e0 
	4f06 20e03f3217567e74b26410a804c812a031219b1cb4", 
	"MerchantName": "{merchant name}", 
	"MerchantCode": {merchant code}, 
	"MerchantId": 1, 
	"Hash": null, 
	"ExtraData": { 
		"CustomerName": "John Doe", 
		"CustomerIdentifier": "" 
	}
}