The offical Javascript SDK for the Ordercloud ecommerce API
npm install @mksby/ordercloud-javascript-sdk
shell
npm install ordercloud-javascript-sdk --save
`
or
with yarn:
`shell
yarn add ordercloud-javascript-sdk
`
➕ Adding it to your project
$3
This is the preferred method of importing the sdk for browser projects as it allows modern bundlers like webpack to tree shake the parts of the SDK that you aren't using, making your project more lean.
`javascript
import { Products } from 'ordercloud-javascript-sdk';
`
$3
`javascript
import * as OrderCloudSDK from 'ordercloud-javascript-sdk';
`
$3
`javascript
const OrderCloudSDK = require('ordercloud-javascript-sdk');
`
🔐 Authentication
We'll need to get a token before we can make any API calls. The SDK offers five different ways of getting a token as part of the Auth class.
We'll use the login method for this example.
`javascript
import { Auth, Tokens } from 'ordercloud-javascript-sdk';
const username = 'YOUR_USERNAME'; //username of the user logging in
const password = 'YOUR_PASSWORD'; //password of the user logging in
const clientID = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'; //clientID of the application the user is logging in to (sign up for free
const scope = ['FullAccess']; //string array of roles the application has access to
Auth.Login(username, password, clientID, scope)
.then(response => {
//store token, now any subsequent calls will automatically set this token in the headers for you
const token = response.access_token;
Tokens.SetAccessToken(token)
})
.catch(err => console.log(err));
`
🔍 Filtering
All of the filtering options you love from the API are available through the SDK as well. Simply build an object that matches the model of the item you're filtering on where the value is the value you'd like to filter on.
Let's run through a couple scenarios and what the call will look like with the SDK:
My products where xp.Featured is true
`javascript
Me.ListProducts({ filters: { 'xp.Featured': true } })
.then(productList => console.log(productList));
`
My orders submitted after April 20th, 2018
`javascript
Me.ListOrders({ filters: { DateSubmitted: '>2020-04-20' } })
.then(orderList => console.log(orderList))
`
Users with the last name starting with Smith:
`javascript
Users.List('my-mock-buyerid', { filters: { LastName: 'Smith*' } })
.then(userList => console.log(userList));
`
Users with the last name starting with Smith or users with the last name ending with Jones
`javascript
Users.List('my-mock-buyerid', { filters: { LastName: 'Smith|Jones' } })
.then(userList => console.log(userList));
`
Products where xp.Color is not red and not blue
`javascript
Products.List({ filters: { 'xp.Color': ['!red', '!blue'] } })
.then(productList => console.log(productList));
`
And of course you can mix and match filters to your heart's content.
👬 Impersonation
Impersonation allows a seller user to make an API call on behalf of another user. The SDK enables this in two ways, each tackling different use cases.
The first method we'll talk about is best suited when you need to toggle between just two users during a session. You'll simply get an impersonation token, set it and then use the As() method available on every service to flag the SDK that you want to use the the stored token for that call.
`javascript
import { Tokens, Me } from 'ordercloud-javascript-sdk';
// set regular token
const myToken = 'YOUR_TOKEN';
Tokens.SetAccessToken(myToken);
// set impersonation token
const myImpersonationToken = 'YOUR_IMPERSONATED_TOKEN'
Tokens.SetImpersonationToken(myImpersonationToken);
// Get products for regular user
Me.ListProducts()
.then(productList => console.log(productList))
// Get products for the impersonated user
Me.As().ListProducts()
.then(impersonatedProductList => console.log(impersonatedProductList))
`
As you can see this method makes it very easy to toggle between impersonated calls and non-impersonated calls. But what if you have more than two tokens to toggle between? To address that scenario we recommend using the optional requestOptions.accessToken parameter. requestOptions is available as the last parameter on all sdk methods.
`javascript
import { Me } from 'ordercloud-javascript-sdk';
var token1 = 'USER1_TOKEN';
var token2 = 'USER2_TOKEN';
var token3 = 'USER3_TOKEN';
// Get products for user 1
Me.ListProducts(null, { accessToken: token1 })
.then(user1ProductList => console.log(user1ProductList))
// Get products for user 2
Me.ListProducts(null, { accessToken: token2 })
.then(user2ProductList => console.log(user2ProductList))
// Get products for user 3
Me.ListProducts(null, { accessToken: token3 })
.then(user3ProductList => console.log(user3ProductList))
`
Configuration
The Configuration service can be used to set sdk level options.
Simply set the options you need to override and the SDK will merge it with the default options object.
`javascript
import { Configuration } from 'ordercloud-javascript-sdk';
Configuration.Set({
baseApiUrl: 'https://sandboxapi.ordercloud.io',
timeoutInMilliseconds: 20 * 1000
})
`
Similarly, you can see what the current options are by using the getter.
`javascript
import { Configuration } from 'ordercloud-javascript-sdk';
const configuration = Configuration.Get();
console.log(configuration); // the current sdk configuration
`
Handling Errors 🐛
The SDK uses a custom error (OrderCloudError) to provide rich and useful information in the case of an error.
`javascript
Products.Get('my-product')
.catch(error => {
if(error.isOrderCloudError) {
// the request was made and the API responded with a status code
// that falls outside of the range of 2xx, the error will be of type OrderCloudError
// https://ordercloud-api.github.io/ordercloud-javascript-sdk/classes/orderclouderror
console.log(error.message);
console.log(JSON.stringify(error.errors, null, 4));
} else if (error.request) {
// the request was made but no response received
// error.request is an instance of XMLHttpRequest in the browser and an instance of http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
})
`
Interceptors
You can use axios interceptors to intercept a request before it goes out to the API or to intercept a response before it gets handled by the SDK. This enables you to log, rewrite, or even retry calls.
The SDK does not use a custom axios instance, so you can set up your interceptors right off of axios.
`javascript
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
`
Cancelling Requests
In addition to requestOptions.accessToken the sdk provides requestOptions.cancelToken which enables axios request cancellation. This option is useful for cleaning up outstanding requests when changes in your user experience no longer require the data requested. For instance, you could use the cancel token to clean up outstanding requests when your react component unmounts.
`javascript
import axios from 'axios';
import { Products } from 'ordercloud-javascript-sdk';
const signal = axios.CancelToken.source();
Products.List({search: 'Tennis balls'}, {cancelToken: signal.token})
.catch(ex => {
if (axios.isCancel(ex)) {
console.log(ex) // 'This request was cancelled!'
} else {
console.log(ex) // Normal ordercloud exception
}
})
// Oops! I don't want to resolve this request anymore
signal.cancel('This request was cancelled!')
`
Async/Await
Async/Await is a special syntax to work with promises in a more comfortable fashion. Because the SDK is built with promises the syntax works right out of the box - simply add the async keyword to your outer function method.
`javascript
// with normal promises
(() => {
Auth.Login('myusername', 'mypassword', 'myclientID', ['FullAccess'])
.then(authResponse => {
Tokens.SetAccessToken(authResponse.access_token)
Me.ListOrders().then(orderList => {
const firstOrder = orderList.Items[0]
console.log(firstOrder.Total)
})
})
.catch(err => {
console.log(err)
})
})()
`
`javascript
// with async/await
(async () => {
try {
const authResponse = await Auth.Login('myusername', 'mypassword', 'myclientID', ['FullAccess'])
Tokens.SetAccessToken(authResponse.access_token)
const myOrders = await Me.ListOrders()
const firstOrder = myOrders.Items[0]
} catch (err) {
console.error(err)
}
})()
`
> NOTE: async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers without first transpiling to ES5 so use with caution.
Typescript Support
While Typescript is not required to use this project (we compile it down to ES5 javascript for you), it does mean there are some added benefits for our Typescript users. You will need a minimum of typescript version 3.5 for all features to work correctly.
$3
By default, properties of ordercloud models are required if their Create or Save operation requires them. For example the LineItem model has the properties ProductID and Quantity required. This is important to know if you need to define an object by type before using it.
`typescript
import { LineItems, LineItem } from 'ordercloud-javascript-sdk';
const lineItem: LineItem = {
ProductID: 'my-awesome-product', // if this field is missing you get a type error!
Quantity: 2 // if this field is missing you get a type error!
}
LineItems.Create('Outgoing', 'my-order-id', lineItem)
`
This works as expected and ensures a create or save always has the correct required parameters. However, if for example you need to perform a Patch operation (partial update), then you want all of the fields to be optional. To accomplish this you should use Typescript's built-in utility type Partial
`typescript
import { LineItems, LineItem } from 'ordercloud-javascript-sdk';
const lineItem: Partial = {
// no type errors even though Quantity and ProductID are missing
ShippingAddressID: 'my-shipping-address-id'
}
LineItems.Patch('Outgoing', 'my-order-id', 'my-lineitem-id', lineItem)
`
$3
Extended properties, or xp, is a platform feature that allows you to extend the OrderCloud data model. This is modeled in the SDK using (by default) a Typescript any type:
`typescript
const category: Category = {};
category.xp.Featured = true;
`
Even though Featured does not exist on the native model, the above code will compile and work just fine with the API. But you don't get any compile-time type-checking.
Alternatively, the SDK provides generic versions of all models that allow you to provide a custom xp type:
`typescript
interface MyCategoryXp {
Featured?: boolean;
}
const category: Category = {};
category.xp.Featured = true; // strongly typed!
`
These custom models can then be used when calling any method in the SDK
`typescript
Categories.List>('mock-catalog-id')
.then(categoryList => {
const firstCategory = categoryList.Items[0];
const isFeatured = firstCategory.xp.Featured; // strongly typed!
})
`
A common alternative to the above example is to first define a custom interface that extends Category
`typescript
interface MyCategoryXp {
Featured?: boolean;
}
interface MyCategory extends Category {
}
Categories.List('mock-catalog-id')
.then(categoryList => {
const firstCategory = categoryList.Items[0];
const isFeatured = firstCategory.xp.Featured; // strongly typed!
})
`
This is nicer and especially preferable for models like Order which have many nested models each with their own xp fields that must be defined at the top level. For example: Order. Declaring those 3 xp types once on a custom MyOrder interface is far cleaner than declaring them on every call to Orders.Get or Orders.List.
$3
The sdk ships with various helpers and utilities that you may find useful. We also recommend using Typescript's built-in utilities when possible.
| Utility | Description |
|-----------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ListPage | Takes in a type for the item in the list. For example ListPage will be the type for an order list page. |
| ListPageWithFacets | Similar to ListPage but for premium search models. For example ListPageWithFacets will be the type for a product list page. |
| Searchable | Takes in a SearchableEndpoint and returns the type for a valid searchOn field on list calls. For example Searchable<'Orders.List'>. |
| Sortable | Takes in a SortableEndpoint and returns the type for a valid sortBy field on list calls. For example Sortable<'Orders.List'>. |
| Filters | Takes in an ordercloud model and returns the type for a valid filter field on list calls. For example Filters. This also works for any custom models that extend an OrderCloud model, for example Filters. |
| PartialDeep | Similar to Typescript's Partial except works on nested properties as well. |
| RequiredDeep | Similar to Typescript's Required except works on nested properties as well. |
| DecodedToken | A type representing a decoded OrderCloud token | |
| MessageSenderPayloads` | Takes in a type argument for the message type and resolves to the type for the message sender payload |