Skip to content

mmob-tech/react-mmob-marketplace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React MMOB Marketplace

Requirements

Before you install the MMOB Marketplace

Before you install the MMOB Marketplace, we will create a Customer Partner ID (refered as cp_id) to give you access to MMOB Dashboard production and MMOB Dashboard staging.

The Customer Partner ID will be used to access both production and staging dashboards.

Content

To install the MMOB marketplace, the following steps are required:

  1. Set up a CNAME on the domain your main website is operating from.
  2. Place MMOB JavaScript script in your header.
  3. Call the marketplace with your user information.

1. Set up a CNAME on the domain your main website is operating from

Due to the latest advancements in browser security and tracking prevention, MMOB Marketplace needs to be served under your domain. To do so, you need to add the following configuration to your DNS:

marketplace-staging.example.com   CNAME     marketplace-ingress.staging.mmob.com
marketplace.example.com           CNAME     marketplace-ingress.prod.mmob.com

2. Use the React Component to display the marketplace

First, you'll need to install the MMOB react component using NPM:

npm i @mmob/react-mmob-marketplace

Once installed, add the React Component on your application. The component will take all the space assigned to it and display the marketplace in a secure way.

/**
 * Note: If you are not passing customer data from your app/website
 *       you can pass an empty object to customerInfo:
 *
 *    eg: const customerInfo = {}
 **/

const Marketplace = () =>
   const customerInfo: MMOBCustomerInfo= {
     email: "sharon.jordan@example.com",
     first_name: "Sharon",
     surname: "Jordan",
     gender: "female",
     title: "Ms",
     building_number: "8",
     address_1: "Brandon Grove",
     town_city: "Newcastle Upon Tyne",
     postcode: "NE2 1PA",
     broadbandProvider: "Virgin Media",
     broadbandPpm: "28",
     broadbandDownSpeed: "110592",
     dob: "1978-12-06T12:27:41.201Z",
   };

   return (
      <MMOBMarketplace
        customerInfo={customerInfo}
        cpId="cp_xxxxx"
        page="broadband"
        locale="en_GB"
        marketplaceUrl="https://marketplace.mmobstars.com"
        signature="xxxxxxx"
      />
  )
}

Configuration

Prop name Description
customerInfo All the known information for the customer viewing the marketplace, stored as Record<string, string>.

Valid keys are
"email" (required)
"first_name"
"surname"
"gender"
"title"
"building_number"
"address_1"
"town_city"
"postcode"
"broadbandProvider"
"broadbandPpm"
"broadbandDownSpeed"
"dob"
cpId Your company MMOB identifier
page What page of the marketplace should the user see
marketplaceUrl The URL where the marketplace will be operated (defined on the CNAME section)
locale What is the preferred language of the user
signature For high secruity feature (if secure identity is configured)