Get started with BigCommerce

April 7, 2017
admin

Today, worldwide business owners choose BigCommerce because it is one of the best eCommerce platforms. This platform is complete, scalable, and effective and provides an extensive support to websites. It provides complete back-end assistance that makes it an obvious choice. Here we discuss some of the best features of BigCommerce:

Scalability

BigCommerce is a suitable store builder for both small and big stores. Additionally, if your online store project grows, BigCommerce will grow with you.

No transaction fees

BigCommerce doesn’t charge transaction fees with any of their plans. This can save quite a bit of money, especially for stores with low margins and a lot of transactions.

Solid SEO features

When it comes to SEO capabilities, BigCommerce is one of the best store builders we’ve ever tried.

Guest Checkout

Visitors are able to create accounts themselves. You can even assign store credit to them. Guest checkout is also possible without an existing customer account.

SSL Encryption

Your entire store can be SSL encrypted and include sitewide HTTPS.

Real-time Stats

BigCommerce provides extensive reporting (even including real-time sales stats). However, you should probably also add Google Analytics.

Responsive Themes

They offer some free responsive templates. However, if you want more choice, you can purchase one of their premium themes (up to $235).

Abandoned Cart Saver

The Plus, Pro and Enterprise plans come with an Abandoned Cart Saver functionality. This feature will allow you contact registered customers who did not complete their purchase, which is a very powerful tool.

Considering the huge amount of features, BigCommerce is fairly easy to use. However, the sheer volume of options can sometimes be a bit overwhelming.

Blueprint

Blueprint themes are built using a template system that enables designers and developers familiar with HTML and CSS to modify the presentation and structure of a BigCommerce storefront.

Here are the building blocks of Blueprint themes:

Layouts

Layout templates provide the base HTML structure that wraps storefront page content. Each layout file corresponds to a specific page, and typically contains references to individual panels to be shown on a page.

Panels

Panels provide reusable blocks of content. Panels are contained in div tags that generally define a page’s left, center, or right column. Panels can contain content, or can generate content dynamically.

Snippets

Snippets are templates containing a fragment of HTML that can be embedded multiple times on a page.

Styles

These are the theme’s primary layout stylesheets, with styles.css being the core file.

Stencil

Stencil is a new approach to theme and front-end development on the BigCommerce platform. This theming engine allows you to create beautiful, dynamic, and powerful storefronts.

You can offer merchants multiple variations on each theme. You can also provide options for merchants to customize their storefront’s look and feel, with no coding.
Stencil Framework and Components Stencil provides certain key components for both theme developers and merchants.

These key components are:

Stencil Framework and Developer Toolkit: The toolkit enables developers to design and iterate themes locally, with full access to all assets – but with no impact on the merchant’s live storefront.

Theme Marketplaces: Third-party marketplaces enable developers to distribute themes to multiple merchants. (The BigCommerce Marketplace will begin distributing partners’ Stencil themes in 2017.)

Theme Editor: This graphical, browser-based tool enables merchants to rapidly customize their themes’ look and feel – and their storefront’s function – with no coding. Theme developers’ configuration choices determine which theme aspects merchants can customize, with what range of choices.)

Storefront: Merchants acquire themes, apply them to their storefronts, and customize them – creating an elegant user experience that resonates with their brand, and makes it easy for customers to find and purchase the products they want.

Building Apps with OAuth

Public OAuth Apps (applications) can be listed in the App Marketplace for easy installation in all BigCommerce stores.

They use OAuth for token exchange during installation: The user installing the app will approve the scopes for your app to access and/or modify their store’s data.

Monetizing Your App

If you want to charge merchants for your app, please note that BigCommerce expects you to handle the billing aspects of the transaction. Your app needs to take care of collecting the fee from the merchant.

Under the standard contract, within 30 days of collecting this revenue, you must send BigCommerce 20% and retain the remaining 80% for yourself. Once your app is published, a mandatory revenue-share reporting form will be sent to the primary contact on your partner account, at the beginning of each month.

App Registration

Once you have a sandbox store, you must register your app to get your Client ID and Client Secret.

The Client ID value uniquely identifies your app and you will need to pass it in the header of all your requests to the Stores API.

The Client Secret value is a secret that your app and BigCommerce share. You do need to pass the Client Secret value once during the app installation sequence. Thereafter, BigCommerce uses it to sign payloads in load, uninstall, and remove user requests, and your app uses it to verify the signature to ensure that the request is coming from BigCommerce.

Technical Prerequisites

Before you register your app, consider the required and optional steps below.

Auth Callback and Load Callback URIs

You must have an Auth Callback URI and a Load Callback URI to register your app.

Because the Auth Callback URI and Load Callback URI requests originate from the browser and not from BigCommerce, you can use non–publicly-available URIs and a self-signed certificate for a quick start. However, you must switch to – and test your app with – a publicly available Auth Callback URI and Load Callback URI before submitting your app for consideration in the App Store.

Uninstall Callback (Optional)

If you want to receive a callback when the store owner uninstalls your app, you can provide an Uninstall Callback URI.

Requesting OAuth Scopes

If you know the OAuth scopes that your app requires, you should select these. If you do not yet know the scopes that you need, you can just request minimal permissions (such as Information: Read-Only) to get started. However, once you determine the scopes you need, you must:

  • Modify the scopes of your app in My Apps and save the changes.
  • Obtain the new OAuth token during the App Installation or Update flow.
  • Retest your app to make sure it still functions properly with the new token.

App installation and update sequence

Big commerce app installation

  • Receiving the GET Request
  • Responding to the GET Request
  • Making the POST Request
  • Receiving the POST Response
Receiving the GET Request

The GET request to your Auth Callback URI contains a temporary code that you can exchange for a permanent OAuth token. It also includes a unique value that identifies the store installing or updating your app, as well as other values.

Parameters
Let’s discuss in details about the full list of parameters and values included in the GET request from BigCommerce to your Auth Callback URI. BigCommerce passes these within the URI itself as query parameters.

Code: Temporary code to exchange for a permanent OAuth token. See Making the POST request below for more information about this exchange.

Scope: List of scopes authorized by the user. As a best practice, your app should validate this list to ensure that it matches the app’s needs, and fail if it does not. However, at this time, the user does not have any opportunity to pick and choose between scopes. The dialog presented to the user requires the user to approve all scopes or none.

Context: The store hash: a unique value that identifies the store on which a logged-in user has clicked to install or your app. BigCommerce passes this along with a context path, as follows: stores/{store_hash}. Save the store hash value, because you will need to pass it in all your requests to the Stores API.

Example – Initial Installation
This example initiates the token exchange, with a requested scope of store_v2_orders:

GET /auth?code=qr6h3thvbvag2ffq&scope=store_v2_orders&context=stores/g5cd38 HTTP/1.1 
Host: app.example.com

(Note that when your app receives a new token, any previously issued token is invalidated.)

Responding to the GET Request

Upon receiving the GET request at your Auth Callback URI, your app should return some HTML to the merchant browser.
BigCommerce renders this in an iframe inside of the control panel. It could be a form that collects further information from the user, or you could redirect the user to your app’s main page.

Making the POST Request

The POST request’s primary purpose is to exchange the temporary access code for a permanent OAuth token. However, your app must pass a number of additional values to accomplish the exchange. Pass the parameters and their values inside the request body, using query parameters and URL-encoding. To achieve this, you must include the following HTTP header:

Content-Type: application/x-www-form-urlencoded

Make the POST request to the following address:
https://login.bigcommerce.com/oauth2/token

Parameters

Include values for each of the following parameters.

client_id: The Client ID for your app, obtained during registration.
client_secret: The Client Secret for your app, obtained during registration.
code: Temporary access code received in the GET request discussed above.
scope: List of OAuth scopes received in the GET request discussed above.
grant_type: Always use the following: authorization_code.
redirect_uri: Must be identical to your registered Auth Callback URI.
context: The store hash received in the GET request, in the format: stores/{_store_hash_}

POST /oauth2/token HTTP/1.1
Host: login.bigcommerce.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 186

client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}&code=qr6h3thvbvag2ffq&scope=store_v2_orders&grant_type=authorization_code&redirect_uri=https://app.example.com/oauth&context=stores/{STORE_HASH}
Receiving the POST Response

The POST response will include a JSON object containing the permanent OAuth token, user information, and other values. Upon receiving the permanent OAuth token, store it securely. You should also store the user and store hash values, to identify the user and store at load and uninstall. The following sections detail the contents of the JSON body.

access_token: The permanent OAuth token that your app can use to make requests to the Stores API on behalf of the user. Store this value securely.
scope: List of authorization scopes.
id: Unique identifier for the user. Store this value to identify the user at load and uninstall.
email: The user’s email address. Store this value to identify the user at load and uninstall.
context: The store hash, as well as a base path: stores/{_store_hash_}

API Request Example(Ruby on Rails)
connection = Bigcommerce::Connection.build(
 Bigcommerce::Config.new(
 store_hash: ENV['BC_STORE_HASH'],
 client_id: ENV['BC_CLIENT_ID'],
 access_token: ENV['BC_ACCESS_TOKEN']
 )
)
Bigcommerce::System.time(connection: connection)
=> #<Bigcommerce::System time=1466546702>
Reference:

https://developer.bigcommerce.com/api/

Contributor: Jumayel Islam, Nascenia

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.