🛠



Support

︎

E-commerce



This article will walk you through the steps of adding Shopping functionality to a Cargo site. For a comprehensive overview, please watch the video:



In this Video:
Logging into Stripe via Cargo
Adding products
Connecting a product page to Stripe
Creating an ‘Add to Cart’ button
Adding a product with multiple versions
Adding a ‘Shopping Cart’ button
Making a purchase


In this article, we will be showing how to add two types of products to a Cargo site: a t-shirt (a product with multiple versions) and a book (a unique product). To get started, make sure you’ve created a Stripe account, and are logged in.



A single, second-hand book

A t-shirt in two colors and two sizes


Instructions on setting up a Stripe account and information regarding the management of product inventory are included in the lower portion of this article.


Connect to Stripe

In the Design tab of your Cargo Site, open the Shopping Cart menu and click Connect to Stripe.

This will open a pop-up window where we’ll enter our Stripe Credentials.



Add the Book

The page containing our book can be constructed to one’s taste; layout and formatting work the same as any other page on Cargo.

There are two ways to connect a product from a Stripe Inventory — in this case, since our book is a unique item, we’ll manually enter the price and the “Add to Cart” link. Select the “Add To Cart” text, click on the Link icon in the Formatting Toolbar, choose Internal Link, and then “Add to Cart...” This is where we choose which product to link from our Stripe inventory.

Save, and done.






Add the T-Shirt

As with our book, we’ll add our text and images. In this case, there are multiple versions of our product — the t-shirt has two colors: Natural and Brown, and two sizes: medium and large.

For products with multiple versions click the Dollar Sign icon in the Formatting Toolbar. By selecting the T-Shirt, a “widget” will be added to our page — it displays the price, a dropdown menu with the different versions (price will update if applicable) and an “Add to Cart” button (this text can be modified).

The dropdown menu in the widget contains the different versions of our t-shirt. These versions correspond to the ones we have entered in our Stripe Inventory (also known as “SKUs,” or “Stock Keeping Units”).

(More about setting up your Stripe Inventory below.)








Add a “Cart” button

In the Shopping Cart menu in the Design Tab, toggle the “Cart Button” to On.

One can choose different icons, or use a text button, which can be customized. You can also upload your own icon, and adjust the look and positioning with as much precision as wanted.

Any text or image can be used as a Cart button — simply select it, click the Link icon in the Formatting Toolbar, choose Internal Link, and then “View Cart.”






Making a Purchase

Once products have been added to our Cart, we can Check Out.

Let’s enter our shipping information, review the Order Summary and enter our Credit Card details — a receipt and shipping notification will be emailed to the address entered here.

Now let’s take a look at E-commerce from the Stripe perspective.









Adding products to your Stripe Account

To manage your inventory go to the Products section of Stripe’s Dashboard. Here, inventory is managed by SKUs. If there are multiple versions of an item (S, M, L, Black, White, etc.) a product will have multiple SKUs.


Let’s add the Cargo T-shirt to our Stripe inventory, on the Create a Product page.

Use the Attributes field to enter the different versions of the shirt (color and size). If a product only has one version (like a unique print, or a vintage book) just leave the Attributes field empty.

Note: Cargo only requires that the Name and the Attributes fields be filled out. The Attributes field can be left blank when the product is unique. It is not necessary to fill out the other fields.



Adding SKUs to products

A product cannot be sold without adding at least one SKU. A SKU can connect to a unique product or to a particular variant (S, M, L, etc.). SKUs also indicate the stock available.


To add a SKU, click a product from the Products section of your Stripe account. Locate the Add SKU button, then click and fill out the fields highlighted in yellow.

Note: If you would like to automatically calculate shipping costs, a third party shipping manager will be needed — Stripe recommends Shippo. Sign up for an account and follow the prompts. The final package dimensions and weight are necessary for this step. If this information is not present, automated shipping cannot be calculated.

Note: There is a layout bug in Stripe’s dashboard — the Height, Length and Weight fields of the SKU Editor cannot be clicked. Please use your tab key to navigate these fields.



Fulfillment

To see a detailed list of your orders go to Stripe’s Products page and click the Orders tab. There are five types of order status: Created, Paid, Fulfilled, Canceled and Returned. Right now we are focusing on Created and Paid.


Created orders are orders still in the checkout process and not ready for fulfillment.

Paid orders have been completed and are ready for fulfillment. Click on a specific order for a detailed view. Click on the pencil icon to update order status. Here you can mark your item as Fulfilled or Cancelled as well as share tracking info. An automatic shipping notification will be sent after the order has been set to fulfilled. Make sure tracking information has been entered.


Shipping

Stripe offers a few ways to handle shipping calculations. In Stripes’s Relay settings you can choose Free, Flat-rate, Callback or Provider. Use Free if you do not require a customer to pay for shipping.


The Flat-rate option allows you to set up to three shipping options, using fixed price tiers. Customers can make their selection at checkout.

The Provider option allows you to use either Shippo or Easypost for automatically calculating shipping costs. Stripe offers support articles explaining both of these options (connect to Shippo and connect to EasyPost).


Callback is really for developers; it allows one to calculate their own shipping. This option is to be used at one’s own risk.

Note: Cargo does not offer support for third-party shipping integrations. If you have questions about Shippo or EasyPost visit  Shippo support or EasyPost support.


Taxes

Stripe’s Relay settings offer multiple ways of handling tax collection. You can choose Included, Percentage or Provider. For Included no tax will be collected.  Percentage is used to set a percentage of the sale price to be added as tax. Provider allows you to use a third party tax calculation service. For more information visit: stripe.com/docs/orders/tax-integration.

Note: Cargo does not offer support for third-party integrations. For all questions regarding third-party integrations, please contact them directly.


Email notifications

Cargo sends emails for the following events:

  • Payment of an order: An email is sent to the Stripe account holder, notifying of a sale; another copy is sent to the customer as a receipt.

  • Order fulfillment:  When you fulfill an order from your Stripe account, the customer will receive an email indicating their order has shipped. If a tracking code was supplied it will be included.



Note: A tracking code must be included when setting the order status to Fulfilled. If a tracking code is supplied after the order has been set to Fulfilled, the customer will not receive an additional email with this tracking information.

Note: Email notifications to customers will originate from the email address linked to your Stripe Settings.


Fees

Every transaction incurs a Stripe fee of 2.9% + 30¢ and a Cargo application fee of 2%. For more information on Stripe pricing, see stripe.com/pricing.


Known limitations

When setting Flat-fee or Provider, Stripe recommends that physical products and non-physical products (services) are not mixed. If your cart contains non-shippable items while any of these options are used, the Shipping Cost will still be added.