<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

Create a Sample App

You can create your own app with StoreHippo partners. You need to follow the steps described below: 
Go to the Partners registration page to register as a partner with StoreHippo.

  1. Login to the partnersadmin panel.
  2. Gothe Apps section.
  3. Click on Add New to add a new App.
  4. The page contains four tabs with the following fields:

Overview

The Overview tab contains the insight of the app. 

 

Name

Enter the name of the app which will be displayed on the storefront.

Logo

Update the logo for the app.

Category

Enter the category to which the app belongs.

App URL

This is the URL to which the user would be redirected when installing the app. The owner of the app should redirect the user to the Authorization Url specified in the OAuth Authentication Flow.

Demo URL

Provide demo URL depicting the functionality of the app on a website.

Redirection URL

Specify the URLs where the control will shift after the user has installed the app. This is the URL to which the user would be redirected after the installation flow is completed. You will get the authorization code in the query params using which you could get Auth Token. The token will allow you to call StoreHippo APIs from your server.

Embedded App

If your app needs to open your portal inside the StoreHippo Admin Panel, then checkbox needs to be checked.

App Info

The app info tab contains the general description of the app. 

Summary

Enter the summary for the app.

Description 

Enter a long description of the apps.

Images 

Provide the screenshots for the app to be shown on the app page.

Banner

Upload the banner that will be shown in the app grid in the app store.

Support Page 

Provide the support page if any exists.

Selling points

Insert the selling points for your app.

SAMPLE APP

Let us create a sample app that will add a product when it is installed. Specify the details of the app in the Overview and App info Tab according to you.

Client Id and Client Secret

When you add an app in the Partners panel, the client id and the client secret is assigned to the app which can be seen when editing the app.

Client ID:dummyclientidgenerated
Client Secret: dummyclientsecretgenerated 

App URL
Let us suppose we have given the App URL as https://www.myapp.com/startInstall

When the User installs the app he will be redirected to the App URL with the store name as a query parameter.
So the user would be redirected to https://www.myapp.com/startInstall?store=teststore

Now, when the user is redirected to the above URL, we will get the store name from the query params which is "teststore" and redirect the user to the Auth URL of StoreHippo with our parameters.

https://{store}.storehippo.com/admin/oauth/authorization?client_id={client_id}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}

With these substitutions made:

  • {store}: Substitute it with the name of the user’s store which we got from the query.
  • {client_id}: Substitute it with the app’s client_id.
  • {scopes}: Since we want to add a product, we want permission write_products. For the full list of the permission scopes, refer to https://help.storehippo.com/topic/oauth-authentication
  • {redirect_uri}: Substitute it with the URL where you want to redirect the users after they authorize the client. The complete URL specified here must be identical to one of the Application Redirect URLs which you specified when adding the app record in the partners panel. Let's take this as https://www.myapp.com/handlecallback
  • {nonce}: A randomly selected value provided by your application, which is unique for each authorization request.

So our URL becomes,

https://teststore.storehippo.com/admin/oauth/authorization?client_id=dummyclientidgenerated&scope=write_products&redirect_uri=https://www.myapp.com/handlecallback&state=dummystatevar

The user installs the app, and is redirected back to our redirect url with the Auth Code i.e.
https://www.myapp.com/handlecallback?code=testauthcode&state=dummystatevar


Now we will get the code from the query and call the token API of StoreHippo for the Access Token (This is a server to server call)

It will be a POST request to the URL
 https://{store}.storehippo.com/admin/oauth/token

With {store} substituted for the name of the user’s store and with the following parameters provided in the body of the request:
  1. client_id: The client_id for the app.
  2. client_secret: The client_secret for the app.
  3. code: The authorization code provided in the redirect described above.
  4. redirect_uri: Substitute this with the URL where you want to the access token to be provided.
  5. grant_type: - Must be authorization_code

If everything goes right and the request is successful, you’ll receive a 200 response containing a JSON body like this:

{
   "access_token":"f85632530bf277ec9ac6f649fc327f17",
   "refresh_token":"b6sh37412b7fg4c9ac6f649fc375gd5"
}

USING CURL

curl https://teststore.storehippo.com/admin/oauth/token -d 'grant_type=authorization_code&code={your_code}&client_id={your_client_id}&client_secret={your_client_secret}' -X POST


access_token is an API access token that can be used to access the store's data as long as the client is installed.
Clients should store the token somewhere to make authenticated requests for a store's data.

Step 4: Making authenticated requests

Now that the client has obtained an API access token, it can make authenticated requests to the REST API. The access token is a bearer token so these requests are accompanied with a header 

Authorization: Bearer {access_token} 

where {access_token} is replaced with the permanent token.

If you use NodeJS in your backend, then you can use storehippo-nodejs-sdk or use our API endpoint from https://help.storehippo.com/api

POST https://teststore.storehippo.com/api/1/entity/ms.products

Data: {"name":"My Product",sku:"my-product-sku",price:10}