@khawa/spree-storefront-api-v2-sdk

Spree Commerce Storefront API v2 JavaScript / TypeScript SDK

Node module to easily integrate your JavaScript or TypeScript application with Spree API. You can create an entirely custom Storefront in JS/TS with this package including one page checkout, Single Page Apps, PWAs and so on.

Developed and maintained by:

All-in-one platform for all your Marketplace and B2B eCommerce needs. Start your 30-day free trial

Сontents:

• Quick start
• Checkout Flow
• Response schema
  • Success schema
  • Error schema
• Tokens
  • Order token
  • Bearer token
• Endpoints
  • OAuth Authentication
    • getToken
    • refreshToken
    • revokeToken
  • Account
    • create
    • forgotPassword
    • resetPassword
    • update
    • accountInfo
    • creditCardsList
    • defaultCreditCard
    • removeCreditCard
    • completedOrdersList
    • completedOrder
    • addressesList
    • showAddress
    • createAddress
    • updateAddress
    • removeAddress
  • Order
    • status
  • Cart
    • create
    • remove
    • show
    • addItem
    • setQuantity
    • removeItem
    • emptyCart
    • applyCouponCode
    • removeCouponCode
    • removeAllCoupons
    • estimateShippingRates
    • associateGuestCart
    • changeCurrency
  • Checkout
    • orderUpdate
    • orderNext
    • advance
    • complete
    • addStoreCredits
    • removeStoreCredits
    • paymentMethods
    • shippingRates
    • selectShippingMethod
    • addPayment
  • Products
    • list
    • show
  • Taxons
    • list
    • show
  • Vendors
    • list
    • show
  • Wishlists
    • list
    • show
    • default
    • create
    • update
    • remove
    • addWishedItem
    • updateWishedItem
  • Pages
    • list
    • show
  • Countries
    • list
    • show
    • default
  • Digital Assets
    • download
  • Menus
    • list
    • show
  • Helpers
  • Alternative setups
  • Switching the fetcher
  • About Spark Solutions

Quick start

Install the NPM package:

npm install --save @spree/storefront-api-v2-sdk

Install the Axios HTTP client:

npm install --save axios

Create a client and use it to call Spree:

const createAxiosFetcher = require('@spree/storefront-api-v2-sdk/dist/server/createAxiosFetcher').default
const { makeClient } = require('@spree/storefront-api-v2-sdk')

const client = makeClient({
  host: 'http://localhost:3000',
  createFetcher: createAxiosFetcher
})

client.products
  .list({
    include: 'default_variant',
    page: 1
  })
  .then((spreeResponse) => {
    console.log(spreeResponse.success())
  })

Spree SDK can also be imported using import and <script> tags in the browser. Check the Alternative setups section for examples.

For details about HTTP clients, read the Switching the fetcher section.

Checkout Flow

const cartCreateResponse = await client.cart.create()

const orderToken = cartCreateResponse.success().data.attributes.token

await client.cart.addItem({
  order_token: orderToken,
  variant_id: '1'
})

// Step one - save email, billing and shipping addresses
await client.checkout.orderUpdate({
  order_token: orderToken,
  order: {
    email,
    bill_address_attributes: {...},
    ship_address_attributes: {...}
  }
})

await client.checkout.orderNext({ order_token: orderToken })

// Step two - pick a shipping method
const shipping = (await client.checkout.shippingRates({ order_token: orderToken })).success()

await client.checkout.orderUpdate({
  order_token: orderToken,
  order: {
    shipments_attributes: [{
      id: shipping.data[0].id,
      selected_shipping_rate_id: shipping.data[0].relationships.shipping_rates.data[0].id
    }]
  }
})

await client.checkout.orderNext({ order_token: orderToken })

// Step three - pick a payment method
const payment = (await client.checkout.paymentMethods({ order_token: orderToken })).success()

await client.checkout.addPayment({
  order_token: orderToken,
  payment_method_id: payment.data[0].id,
  source_attributes: {
    gateway_payment_profile_id: "card_1JqvNB2eZvKYlo2C5OlqLV7S",
    cc_type: "visa",
    last_digits: "1111",
    month: "10",
    year: "2026",
    name: "John Snow"
  }
})

await client.checkout.orderNext({ order_token: orderToken })

// Place the order
await client.checkout.complete({ order_token: orderToken })

Response schema

Success schema

Client methods return a result object. When a request succeeds, the data received from Spree is retrievable using its success() method and provided in the JSON:API format. isSuccess() tells if a request succeeded.

Error schema

The SDK avoids throwing JavaScript Errors. Instead, any error is included in a result object.

To determine whether a call was successful, use isSuccess() or isFail() methods on the result. Details of a failed call can be retrieved using fail(). The method returns a SpreeSDKError instance, which is the primary type for all errors returned by the SDK and extends the native JavaScript Error type.

Available SpreeSDKError subtypes:

Class Name	Purpose
MisconfigurationError	Signifies the SDK's Client was created with improper options. Make sure the values of host and other options (if any) provided to Client have the correct format.
NoResponseError	Spree store could not be reached. Ensure it's running and available under the host address provided to the Client instance.
SpreeError	Spree responded with an error. To debug the issue, check the error's serverResponse field. It contains details about the response from Spree, such as the HTTP status code and headers.
BasicSpreeError	Extends SpreeError with a summary field provided by Spree and containing a summary of the issue.
ExpandedSpreeError	Extends BasicSpreeError with a errors field. errors contains a detailed explanation of the issue, ex. all the validation errors when trying to add shipping details to a Spree order. The getErrors method can be used to retrieve a concrete value inside errors, ex. expSpreeError.getErrors(['bill_address', 'firstname']).

The specific type of error returned by fail() can be determined using instanceof, ex. if(response.fail() instanceof BasicSpreeError){...}.

Tokens

Most endpoints require a token for authentication. It can be an Order Token, Bearer Token or a Confirmation Token.

Order token

Identifies a guest user's cart and order.

const response = await client.cart.create()

const orderToken: string = response.success().data.attributes.token

Bearer token

Identifies a logged in user.

const response = await client.authentication.getToken({
  username: '[e-mail]',
  password: 'spree123'
})

const bearerToken: string = response.success().access_token

Confirmation token

Identifies a user for a single operation. For example, to reset their account's password. Confirmation Tokens are single-use and may have an expiration date.

Endpoints

Spree Storefront API SDK contains each endpoint according to Spree Guides

OAuth Authentication

getToken

Creates a Bearer token required to authorize OAuth API calls.

Parameters schema:

{
  username: string
  password: string
}

Success response schema:

{
  access_token: string
  token_type: string = 'Bearer'
  expires_in: number
  refresh_token: string
  created_at: number
}

Failure response schema: Error schema

Example:

const token = await client.authentication.getToken({
  username: '[e-mail]',
  password: 'spree123'
})

refreshToken

Refreshes the Bearer token required to authorize OAuth API calls.

Parameters schema:

{
  refresh_token: string
}

Success response schema:

{
  access_token: string
  token_type: string = 'Bearer'
  expires_in: number
  refresh_token: string
  created_at: number
}

Failure response schema: Error schema

Example:

const token = await client.authentication.refreshToken({
  refresh_token: 'aebe2886d7dbba6f769e20043e40cfa3447e23ad9d8e82c632f60ed63a2f0df1'
})

revokeToken

Method revokeToken revokes a Bearer token (access token) or a refresh token.

Parameters schema:

{
  token: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.authentication.revokeToken({
  token: 'aebe2886d7dbba6f769e20043e40cfa3447e23ad9d8e82c632f60ed63a2f0df1'
})

Account

create

Creates new account and returns its attributes.

Parameters schema:

{
  user: {
    email: string
    password: string
    password_confirmation: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.create({
  user: {
    email: '[e-mail]',
    password: 'spree123',
    password_confirmation: 'spree123'
  }
})

confirm

Confirms new account e-mail and returns account registration status.

Parameters schema:

{
  confirmation_token: string
}

Success response schema:

{
  data: {
    state: string
  }
}

Failure response schema: Error schema

Example:

const response = await client.account.confirm({ confirmation_token: '2xssfC9Hzf8DJXyRZGmB' })

forgotPassword

Sends an account recovery link to the provided email address. The link allows resetting the password for the account.

Parameters schema:

{
  user: {
    email: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.forgotPassword({
  user: {
    email: '[e-mail]'
  }
})

resetPassword

Changes the password associated with the account using an account recovery token.

Parameters schema:

{
  reset_password_token: string
  user: {
    password: string
    password_confirmation: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.resetPassword({
  reset_password_token: '7381273269536713689562374856',
  user: {
    password: '123!@#asdASD',
    password_confirmation: '123!@#asdASD'
  }
})

update

Updates account and returns its attributes.

Parameters schema:

{
  user: {
    email: string
    password: string
    password_confirmation: string
  }
}

Required token: Bearer token

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.update({
  bearer_token: '7381273269536713689562374856',
  user: {
    email: '[e-mail]',
    password: 'new_spree123',
    password_confirmation: 'new_spree123'
  }
})

accountInfo

Returns current user information.

Required token: Bearer token

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.accountInfo({ bearer_token: '7381273269536713689562374856' })

creditCardsList

Returns a list of Credit Cards for the signed in User.

Required token: Bearer token

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.creditCardsList({ bearer_token: '7381273269536713689562374856' })

defaultCreditCard

Return the User's default Credit Card.

Required token: Bearer token

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.defaultCreditCard({ bearer_token: '7381273269536713689562374856' })

removeCreditCard

Remove a User's Credit Card.

Required token: Bearer token

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.removeCreditCard({
  bearer_token: '7381273269536713689562374856',
  id: '14'
})

completedOrdersList

Returns Orders placed by the User. Only completed ones.

Required token: Bearer token

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.completedOrdersList({
  bearer_token: '7381273269536713689562374856'
})

completedOrder

Return the User's completed Order.

Required token: Bearer token

Parameters schema:

{
  orderNumber: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.completedOrder({
  bearer_token: '7381273269536713689562374856',
  order_number: 'R653163382'
})

addressesList

Returns a list of Addresses for the signed in User

Required token: Bearer token

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.addressesList({
  bearer_token: '7381273269536713689562374856'
})

showAddress

Returns a single address for the signed in User.

Required token: Bearer token

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.showAddress({
  bearer_token: '7381273269536713689562374856',
  id: '1'
})

createAddress

Create a new Address for the signed in User.

Required token: Bearer token

Parameters schema:

{
  address: {
    firstname: string
    lastname: string
    address1: string
    address2?: string
    city: string
    phone?: string
    zipcode: string
    state_name: string // State Abbreviations
    country_iso: string // Country ISO (2-chars) or ISO3 (3-chars)
    company?: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.createAddress({
  bearer_token: '7381273269536713689562374856',
  address: {
    firstname: 'John',
    lastname: 'Snow',
    address1: '7735 Old Georgetown Road',
    address2: '2nd Floor',
    city: 'Bethesda',
    phone: '3014445002',
    zipcode: '20814',
    state_name: 'MD',
    country_iso: 'US',
    company: 'Spark'
  }
})

updateAddress

Update selected Address for the signed in User.

Required token: Bearer token

Parameters schema:

{
  id: string
  address: {
    firstname: string
    lastname: string
    address1: string
    address2?: string
    city: string
    phone?: string
    zipcode: string
    state_name: string // State Abbreviations
    country_iso: string // Country ISO (2-chars) or ISO3 (3-chars)
    company?: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.updateAddress({
  bearer_token: '7381273269536713689562374856',
  id: '1',
  address: {
    firstname: 'John',
    lastname: 'Snow',
    address1: '7735 Old Georgetown Road',
    address2: '2nd Floor',
    city: 'Bethesda',
    phone: '3014445002',
    zipcode: '20814',
    state_name: 'MD',
    country_iso: 'US',
    company: 'Spark'
  }
})

removeAddress

Removes selected Address for the signed in User.

Required token: Bearer token

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.account.removeAddress({
  bearer_token: '7381273269536713689562374856',
  id: '1'
})

Order

status

Returns a placed Order.

Required token: Order token

Parameters schema:

{
  order_number: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.order.status({
  order_token: '7381273269536713689562374856',
  order_number: 'R653163382'
})

Cart

create

Creates a new Cart and returns its attributes.

Required token: Bearer token if logged in user

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.create({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.cart.create()

show

Returns contents of the cart.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.show({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.cart.show({
  order_token: '7381273269536713689562374856'
})

addItem

Adds a Product Variant to the Cart.

Required token: Bearer token or Order token

Parameters schema:

{
  variant_id: string
  quantity: number
  options?: {
    [key: string]: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.addItem({
  bearer_token: '7381273269536713689562374856',
  variant_id: '1',
  quantity: 1
})

// or guest user
const response = await client.cart.addItem({
  order_token: '7381273269536713689562374856',
  variant_id: '1',
  quantity: 1
})

setQuantity

Sets the quantity of a given line item. It has to be a positive integer greater than 0.

Required token: Bearer token or Order token

Parameters schema:

{
  line_item_id: string
  quantity: number
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.setQuantity({
  bearer_token: '7381273269536713689562374856',
  line_item_id: '9',
  quantity: 100
})

// or guest user
const response = await client.cart.setQuantity({
  order_token: '7381273269536713689562374856',
  line_item_id: '9',
  quantity: 100
})

removeItem

Removes Line Item from Cart.

Required token: Bearer token or Order token

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.removeItem({
  bearer_token: '7381273269536713689562374856',
  id: '1'
})

// or guest user
const response = await client.cart.removeItem({
  order_token: '7381273269536713689562374856',
  id: '1'
})

emptyCart

Empties the Cart.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.emptyCart({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.cart.emptyCart({
  order_token: '7381273269536713689562374856'
})

remove

Removes the Cart.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.remove({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.cart.remove({
  order_token: '7381273269536713689562374856'
})

applyCouponCode

Applies a coupon code to the Cart.

Required token: Bearer token or Order token

Parameters schema:

{
  coupon_code: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.applyCouponCode({
  bearer_token: '7381273269536713689562374856',
  coupon_code: 'promo_test'
})

// or guest user
const response = await client.cart.applyCouponCode({
  order_token: '7381273269536713689562374856',
  coupon_code: 'promo_test'
})

removeCouponCode

Removes a coupon code from the Cart.

Required token: Bearer token or Order token

Parameters schema:

{
  code?: string
}

Success response schema: Success schema

Failed response schema: Error schema

Example:

// Logged in user
const response = await client.cart.removeCouponCode({
  bearer_token: '7381273269536713689562374856',
  code: 'promo_test'
})

// or guest user
const response = await client.cart.removeCouponCode({
  order_token: '7381273269536713689562374856',
  code: 'promo_test'
})

removeAllCoupons

Required token: Bearer token or Order token

Success response schema: Success schema

Failed response schema: Error schema

Example:

// Logged in user
const response = await client.cart.removeAllCoupons({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.cart.removeAllCoupons({
  order_token: '7381273269536713689562374856'
})

estimateShippingRates

Returns a list of Estimated Shipping Rates for Cart.

Required token: Bearer token or Order token

Parameters schema:

{
  country_iso: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.estimateShippingRates({
  bearer_token: '7381273269536713689562374856',
  country_iso: 'USA'
})

// or guest user
const response = await client.cart.estimateShippingRates({
  order_token: '7381273269536713689562374856',
  country_iso: 'USA'
})

associateGuestCart

Associates a guest cart with the currently signed in user.

Required token: Bearer token

Parameters schema:

{
  guest_order_token: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.associateGuestCart({
  bearer_token: '7381273269536713689562374856',
  guest_order_token: 'aebe2886d7dbba6f769e20043e40cfa3447e23ad9d8e82c632f60ed63a2f0df1'
})

changeCurrency

Changes the Cart's currency.

Required token: Bearer token or Order token

Parameters schema:

{
  new_currency: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.cart.changeCurrency({
  bearer_token: '7381273269536713689562374856',
  new_currency: 'CAD'
})

Checkout

orderUpdate

Updates the Checkout. You can run multiple Checkout updates with different data types.

Required token: Bearer token or Order token

Parameters schema:

{
  order: {
    email?: string
    special_instructions?: string
    bill_address_attributes?: {
      firstname: string
      lastname: string
      address1: string
      city: string
      phone: string
      zipcode: string
      state_name: string
      country_iso: string
    }
    ship_address_attributes?: {
      firstname: string
      lastname: string
      address1: string
      city: string
      phone: string
      zipcode: string
      state_name: string
      country_iso: string
    }
    shipments_attributes?: [
      {
        selected_shipping_rate_id: number
        id: number
      }
    ]
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.orderUpdate({
  bearer_token: '7381273269536713689562374856',
  order: {
    email: '[e-mail]'
  }
})

// or guest user
const response = await client.checkout.orderUpdate({
  order_token: '7381273269536713689562374856',
  order: {
    email: '[e-mail]'
  }
})

orderNext

Goes to the next Checkout step.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.orderNext({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.checkout.orderNext({
  order_token: '7381273269536713689562374856'
})

advance

Advances Checkout to the furthest Checkout step validation allows, until the Complete step.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.advance({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.checkout.advance({
  order_token: '7381273269536713689562374856'
})

complete

Completes the Checkout.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.complete({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.checkout.complete({
  order_token: '7381273269536713689562374856'
})

addStoreCredits

Adds Store Credit payments if a user has any.

Required token: Bearer token or Order token

Parameters schema:

{
  amount: number
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.addStoreCredits({
  bearer_token: '7381273269536713689562374856',
  amount: 100
})

// or guest user
const response = await client.checkout.addStoreCredits({
  order_token: '7381273269536713689562374856',
  amount: 100
})

removeStoreCredits

Remove Store Credit payments if any applied.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.removeStoreCredits({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.checkout.removeStoreCredits({
  order_token: '7381273269536713689562374856'
})

paymentMethods

Returns a list of available Payment Methods.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.paymentMethods({
  bearer_token: '7381273269536713689562374856'
})

// or guest user
const response = await client.checkout.paymentMethods({
  order_token: '7381273269536713689562374856'
})

shippingRates

Returns a list of available Shipping Rates for Checkout. Shipping Rates are grouped against Shipments. Each checkout cna have multiple Shipments eg. some products are available in stock and will be send out instantly and some needs to be backordered.

Required token: Bearer token or Order token

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user
const response = await client.checkout.shippingRates({
  bearer_token: '7381273269536713689562374856',
  include: 'shipping_rates,stock_location'
})

// or guest user
const response = await client.checkout.shippingRates({
  order_token: '7381273269536713689562374856',
  include: 'shipping_rates,stock_location'
})

selectShippingMethod

Selects a Shipping Method for Shipment(s).

Required token: Bearer token or Order token

Parameters schema:

{
  shipping_method_id: string
  shipment_id?: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.checkout.selectShippingMethod({
  bearer_token: '7381273269536713689562374856',
  shipping_method_id: '42'
})

addPayment

Creates new Payment for the current checkout.

Required token: Bearer token or Order token

Parameters schema:

{
  payment_method_id: string
  source_id?: string
  amount?: number
  source_attributes?: {
    gateway_payment_profile_id: string
    cc_type?: string
    last_digits?: string
    month?: string
    year?: string
    name: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

// Logged in user

// Create new credit card
const response = await client.checkout.addPayment({
  bearer_token: '7381273269536713689562374856',
  payment_method_id: '1',
  source_attributes: {
    gateway_payment_profile_id: 'card_1JqvNB2eZvKYlo2C5OlqLV7S',
    cc_type: 'visa',
    last_digits: '1111',
    month: '10',
    year: '2026',
    name: 'John Snow'
  }
})

// Use existing credit card
const response = await client.checkout.addPayment({
  bearer_token: '7381273269536713689562374856',
  payment_method_id: '1',
  source_id: '1'
})

// or guest user

// Create new credit card
const response = await client.checkout.addPayment({
  order_token: '7381273269536713689562374856',
  payment_method_id: '1',
  source_attributes: {
    gateway_payment_profile_id: 'card_1JqvNB2eZvKYlo2C5OlqLV7S',
    cc_type: 'visa',
    last_digits: '1111',
    month: '10',
    year: '2026',
    name: 'John Snow'
  }
})

Products

Returns a list of Products.

list

Required token: Bearer token if logged in user

Parameters schema:

{
  image_transformation?: {
    size?: string
    quality?: number
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.products.list({
  page: 1,
  per_page: 10
})

show

Required token: Bearer token if logged in user

Parameters schema:

{
  id: string
  image_transformation?: {
    size?: string
    quality?: number
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.products.show({
  id: '123',
  include: 'variants'
})

Taxons

list

Returns a list of Taxons.

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.taxons.list()

show

Returns a single Taxon.

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const products = await client.taxons.show({ id: '1' })

Vendors

The multi-vendor marketplace feature is only available via Vendo

list

Returns a list of Vendors in a Spree marketplace.

Success response schema: Success schema

Failure response schema: Error schema

Example:

const vendors = await client.vendors.list({
  include: 'products'
})

show

Returns a single Vendor in a Spree marketplace.

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const vendor = await client.vendors.show({ id: '123' })

Wishlists

list

Returns a list of Wishlists.

Required token: Bearer token

Parameters schema:

{
  is_variant_included?: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.list({
  bearer_token: '7381273269536713689562374856',
  is_variant_included: '456'
})

show

Returns a single Wishlist.

Required token: Bearer token

Parameters schema:

{
  wishlist_token: string
  is_variant_included?: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.show({
  bearer_token: '7381273269536713689562374856',
  wishlist_token: '123',
  is_variant_included: '456'
})

default

Returns the default Wishlist for the logged in user. It will be created, if the user does not have a default Wishlist for the current store.

Required token: Bearer token

Parameters schema:

{
  is_variant_included?: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.default({
  bearer_token: '7381273269536713689562374856',
  is_variant_included: '456'
})

create

Creates a new Wishlist for the logged in user.

Required token: Bearer token

Parameters schema:

{
  name: string
  is_private?: boolean
  is_default?: boolean
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.create({
  bearer_token: '7381273269536713689562374856',
  name: 'My wishlist'
})

update

Updates an existing Wishlist.

Required token: Bearer token

Parameters schema:

{
  wishlist_token: string
  name: string
  is_private?: boolean
  is_default?: boolean
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.update({
  bearer_token: '7381273269536713689562374856',
  wishlist_token: '123',
  name: 'My updated wishlist',
  is_private: true
})

remove

Removes a Wishlist.

Required token: Bearer token

Parameters schema:

{
  wishlist_token: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.remove({
  bearer_token: '7381273269536713689562374856',
  wishlist_token: '123'
})

addWishedItem

Adds a new Wished Item to a Wishlist for the logged in user.

Required token: Bearer token

Parameters schema:

{
  wishlist_token: string,
  variant_id: string
  quantity: number
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.addWishedItem({
  bearer_token: '7381273269536713689562374856',
  wishlist_token: 'WyZxWS2w3BdDRHcGgtN1LKiY',
  variant_id: '1',
  quantity: 10
})

updateWishedItem

Updates a Wished Item for the logged in user.

Required token: Bearer token

Parameters schema:

{
  wishlist_token: string,
  id: string
  quantity: number
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.updateWishedItem({
  bearer_token: '7381273269536713689562374856',
  wishlist_token: 'WyZxWS2w3BdDRHcGgtN1LKiY',
  id: '2',
  quantity: 13
})

removeWishedItem

Removes a Wished Item for the logged in user.

Required token: Bearer token

Parameters schema:

{
  wishlist_token: string,
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.wishlists.removeWishedItem({
  bearer_token: '7381273269536713689562374856',
  wishlist_token: 'WyZxWS2w3BdDRHcGgtN1LKiY',
  id: '2'
})

Pages

list

Returns a list of all CMS Pages available in the current store.

Success response schema: Success schema

Failure response schema: Error schema

Example:

const pages = await client.pages.list()

show

Returns a single CMS Page. You can use either a CMS Page slug or ID.

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const page = await client.pages.show({
  id: 'about-us'
})

Countries

list

Returns a list of all countries.

Success response schema: Success schema

Failure response schema: Error schema

Example:

const countries = await client.countries.list()

show

Returns the details of a specific country.

Parameters schema:

{
  iso: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const country = await client.countries.show({
  iso: 'USA'
})

default

Returns the default country for the current store. By default this will be the US.

Success response schema: Success schema

Failure response schema: Error schema

Example:

const countries = await client.countries.default()

Digital Assets

download

Returns a stream for downloading a purchased digital product.

Required token: Bearer token or Order token

Parameters schema:

{
  asset_token: string
}

Success response schema: ReadableStream

Failure response schema: Error schema

Example:

// Many NodeJS servers allow piping a stream as the response (`digitalAssetStream.pipe(serverResponse);`).

// The below example assumes a logged in user using SpreeSDK in the browser and downloading an image asset.

// A digital token can be retrieved from a digital link associated to a line item in a completed order.
const digitalToken = '1YjXK36ZRj2w4nxtMkJutTGX'

const response = await client.digitalAssets.download({
  bearer_token: '7381273269536713689562374856',
  asset_token: digitalToken
})

const digitalAssetStream = response.success()

// Append an <img> tag to the page to show the asset on the page.
const image = new Image()

document.body.appendChild(image)

// Convert a stream to a Blob for easier processing.
const digitalAssetBlob = await new Response(digitalAssetStream).blob()

image.src = URL.createObjectURL(digitalAssetBlob)

Menus

list

Returns a list of Menus.

Parameters schema:

{
  locale?: string
  filter?: {
    location?: string
  }
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.menus.list({
  locale: 'fr',
  filter: {
    location: 'header'
  }
})

show

Returns a single Menu.

Parameters schema:

{
  id: string
}

Success response schema: Success schema

Failure response schema: Error schema

Example:

const response = await client.menus.show({
  id: '2'
})

Helpers

The SDK comes with a number of helper functions making consuming responses from the Spree API easier.

extractSuccess() unwraps Spree responses and throws errors.

Example:

import { result } from '@spree/storefront-api-v2-sdk'

try {
  const cartResponse = await result.extractSuccess(client.cart.create())

  console.log('Created a new cart having token: ', cartResponse.data.attributes.token)
} catch (error) {
  console.error('Creating a cart failed. Reason: ', error)
}

findRelationshipDocuments() finds related records included in a response and findSingleRelationshipDocument() finds a single included record.

Example:

import { jsonApi } from '@spree/storefront-api-v2-sdk'

const productResult = await client.products.show({
  id: '1',
  include: 'primary_variant,variants,images'
})

const productResponse = productResult.success()

const primaryVariant = jsonApi.findSingleRelationshipDocument(productResponse, productResponse.data, 'primary_variant')

const variants = jsonApi.findRelationshipDocuments(productResponse, productResponse.data, 'variants')

const images = jsonApi.findRelationshipDocuments(productResponse, productResponse.data, 'images')

Alternative setups

TypeScript and import

In TypeScript, you can import Spree SDK as follows:

// Set `"esModuleInterop": true` in tsconfig.json

import createAxiosFetcher from '@spree/storefront-api-v2-sdk/dist/server/createAxiosFetcher'
import { makeClient } from '@spree/storefront-api-v2-sdk'

TypeScript definitions are included in the module and should be automatically used by any editor that supports them.

CDN-hosted Spree SDK

The SDK is hosted by the UNPKG CDN. Follow this link to download version 5.0.0 and this link to download the newest version. Include the SDK on a website like so:

<script src="https://unpkg.com/@spree/storefront-api-v2-sdk@5.0.0/dist/client/index.js"></script>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/@spree/storefront-api-v2-sdk@5.0.0/dist/client/createAxiosFetcher.js"></script>

<script>
  const client = SpreeSDK.makeClient({
    host: 'http://localhost:3000',
    createFetcher: SpreeSDK.createAxiosFetcher.default
  })
  // ...
</script>

Switching the fetcher

Spree SDK does not come bundled with a HTTP client. A HTTP client may have to be installed before using the library. Out of the box, Spree SDK supports using Axios and fetch HTTP clients to communicate with Spree.

Option A - RECOMMENDED: Spree SDK in NodeJS using Axios

To use Spree SDK with Axios in NodeJS, install Axios using NPM:

npm install axios

Set the fetcher to axios when creating the Spree SDK client:

const createAxiosFetcher = require('@spree/storefront-api-v2-sdk/dist/server/createAxiosFetcher').default
const { makeClient } = require('@spree/storefront-api-v2-sdk')

const client = makeClient({
  host: 'http://localhost:3000',
  createFetcher: createAxiosFetcher
})

Option B - Spree SDK in the browser using Axios

To use Spree SDK with Axios in the browser, include axios as a <script> tag before using the SDK:

<script src="https://unpkg.com/@spree/storefront-api-v2-sdk@5.0.0/dist/client/index.js"></script>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/@spree/storefront-api-v2-sdk@5.0.0/dist/client/createAxiosFetcher.js"></script>

<script>
  const client = SpreeSDK.makeClient({
    host: 'http://localhost:3000',
    createFetcher: SpreeSDK.createAxiosFetcher.default
  })
</script>

Again, Spree SDK will automatically detect that Axios is available and use it to make requests to Spree.

Option C - Spree SDK in NodeJS using fetch

Another supported HTTP client is fetch. It can be setup in NodeJS as follows:

npm install node-fetch

Set the fetcher to fetch:

const createFetchFetcher = require('@spree/storefront-api-v2-sdk/dist/server/createFetchFetcher').default
const { makeClient } = require('@spree/storefront-api-v2-sdk')

const client = makeClient({
  host: 'http://localhost:3000',
  createFetcher: createFetchFetcher
})

Option D - Spree SDK in the browser using fetch

Modern web browsers include fetch natively. To use Spree SDK with native fetch, it's enough to set fetcherType to 'fetch' when creating the Spree SDK Client:

<script src="https://unpkg.com/@spree/storefront-api-v2-sdk@5.0.0/dist/client/index.js"></script>
<script src="https://unpkg.com/@spree/storefront-api-v2-sdk@5.0.0/dist/client/createFetchFetcher.js"></script>

<script>
  const client = SpreeSDK.makeClient({
    host: 'http://localhost:3000',
    createFetcher: SpreeSDK.createFetchFetcher.default
  })
</script>

Option E - ADVANCED: Supply a custom HTTP client.

To have full control over requests and responses, a custom fetcher can be supplied during the creation of the Spree SDK client:

makeClient({ createFetcher: ... })

If you want to use a fetch-compatible interface, use the createCustomizedFetchFetcher function.

About Vendo

Vendo is a great fit for marketplaces of all sizes - either with own fulfillment and multiple warehouses or in a dropshipping model. Vendo automates everything from vendor onboarding, accepting buyer payments in over 135 currencies, to supplier payouts in 50 countries.

Vendo ensures excellent buyer experience with smooth product discovery and search, a multitude of payment methods and optimal shipping cost calculation. Vendo keeps suppliers happy with easy onboarding, automated products sync using their preferred method and easy payouts.

Start your 30-day free trial