Customizing Store Component

Store Component is where users can download or remove stickers what you want among the stipop stickers to user ID and provides buttons for download and remove stickers. By adding a single line of code, you'll be able to add feature to your app, and customize the UI to make it better.

Before you begin

Make sure you went through all processes in Before You Begin to sign up for stipop dashborad and get API Key, which is reuiqred to complete development of the SDK.

Using Store Component

apikey : Stipop API key for your app.
userId : Unique value for every user to distinguish unique users. The userId can be a string of any format.

React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { StoreComponent } from 'stipop-react-sdk'

const App = () => {
  return (
    <StoreComponent 
      params={{
        apikey: 'apikey',
        userId: 'userId',
      }}
      downloadParams={{
          isPurchase= 'N',
      }}
    />
  )
}

export default App

Next.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import dynamic from 'next/dynamic'

const StoreComponent = dynamic(
  () => import('stipop-react-sdk/dist/StoreComponent'),
  {
    ssr: false,
  })
  
const App = () => {
  return (
    <StoreComponent 
      params={{
        apikey: 'apikey',
        userId: 'userId',
      }}
      downloadParams={{
        isPurchase= 'N',
      }}
    />
  )
}

export default App

Customizing Parameters

params
Name	Type	Description	Required
apikey	string	Stipop API Key for your app. Visit developer dashboard for new API Key.	Required
userId	string	Unique value for every user to distinguish unique users. The userId can be in any string format. Important: Using same userId for multiple users is not allowed.	Required
lang	string	Specify default language for regional stickers. Use a 2-letter ISO 639-1 language code. Default Value: en	Strongly Recommended
countryCode	string	Specify default country for local stickers. Use a 2-letter ISO 3166-1 country code. Default Value: US	Strongly Recommended
animated	string	Y : Look for animated stickers only N : Look for free stickers only Empty parameter : Look for all stickers	Optional
limit	int	The maximum number of stickers per page. Use pageNumber accordingly for optimized sticker view. Default Value: 20 (max: 50)	Optional
pageNumber	int	Specify pageNumber to show limit number of stickers per page.	Optional

downloadParams
Name	Type	Description	Required
isPurchase	string	N : Free Sticker Store Y : Paid Sticker Store S : Sticker Subscription	Required
lang	string	Specify default language for regional stickers. Use a 2-letter ISO 639-1 language code. Default Value: en	Optional
countryCode	string	Specify default country for local stickers. Use a 2-letter ISO 3166-1 country code. Default Value: US	Optional
price	string	if isPurchase is Y, the default price is set for stickers. Default Price : Still Stickers [$0.99], Animated Stickers [$1.99]	Optional

color
Name	Type	Description	Required
backgroundColor	string	Specify store component background color. Default Value: #fff	Optional
packageHoverColor	string	Specify store component package hover color. Default Value: #fff	Optional
downloadedColor	string	Specify store component downloaded package color. Default Value: #f5f6f6	Optional
downloadedHoverColor	string	Specify store component downloaded package hover color. Default Value: #f5f6f6	Optional
downloadBtn	string	Specify store component download button color. Default Value: #ff4500	Optional
downloadBtnHover	string	Specify store component download button hover color. Default Value: #ff4500	Optional
deleteBtn	string	Specify store component delete button color. Default Value: #b3b3b3	Optional
deleteBtnHover	string	Specify store component delete button hover color. Default Value: #b3b3b3	Optional
recoveryBtn	string	Specify store component recovery button color. Default Value: #ff4500	Optional
recoveryBtnHover	string	Specify store component recovery button hover color. Default Value: #ff4500	Optional
loadingColor	string	Specify the color of the loading spinner displayed while the sticker is loading. Default Value: #ff4500	Optional
scrollHover	string	Specify the color of the scroll when mouse hovered over the scroll. Default Value: #6d7072	Optional

size
Name	Type	Description	Required
width	int	Specify store component width. Default Value: 600(px)	Optional
height	int	Specify store component height. Default Value: 400(px)	Optional
previewImg	int	Specify store component package preview image size. Default Value: 75(%)	Optional
detailImg	int	Specify store component package detail image size. Default Value: 70(%)	Optional
mainImg	int	Specify store component package main image size. Default Value: 100(px)	Optional
packageListHeight	int	Specify store component package list height. Default Value: 33(%)	Optional

border
Name	Type	Description	Required
border	string	Specify store component border. Default Value: 1px solid lightgray	Optional
radius	object	Specify store component border radius. Default Value: {leftTop: 10, rightTop: 10, leftBottom: 10, rightBottom: 10} all : This parameter preferentially applies the same value to all of the corners at once.	Optional

scroll
Type	Description	Required
boolean	Specify whether scroll is shown or not. Default Value: true	Optional

onClose
Type	Description	Required
function	Return the boolean value when the X icon is clicked. - Function signature: onClose={(close) => console.log(close)} // true	Optional

shadow
Type	Description	Required
string	Specify store component shadow effect. Default Value: 0 10px 20px 6px rgba(0, 0, 0, 0.1)	Optional

Was this page helpful?

We’re here to help. Contact us.