How Do You Add E-Commerce to Any Website or Experience?

add e-commerce to website

Customers often discover new products through channels that are recreational or informational rather than commercial. Proactive brands are beginning to create seamless shopping experiences to monetize these channels.

This is done through e-commerce APIs. With a robust set of APIs, you create bi-directional communication between your e-commerce system and any channel. Cart APIs have endpoints that allow users to add items to their cart, modify their cart, and complete their purchases. You can publish these endpoints anywhere whether it’s a static content site or an IoT-enabled car.

In this post, we’ll examine one of the most prominent use cases for adding commerce functionality to a traditionally non-transactional experience: video games. We’ll see how popular video game distribution service Steam uses its suite of APIs to allow players to purchase items directly in-game.

Adding E-Commerce to Gaming Experiences

In-game purchases are a monetization model that involves offering gameplay extras that can be purchased directly in a video game. These purchases are called microtransactions and have become widely popular as they provide an easy way for players to differentiate their gaming experience.

Steam facilitates in-game purchases through its microtransaction API. The API connects with the user’s Steam Wallet allowing them to complete the order without entering their payment details.

Requests are sent using HTTP 1.1 GET or POST through a TLS secure connection. The POST parameters are in the body of the request using urlencoding format. By default, responses are returned in JSON format.

When a user elects to buy an in-game item, the game sends a request to the purchasing server established by the game’s creator. The server uses an HTTP POST request to initiate the purchase request. The request includes the cost and details for the item along with the user’s metadata.

Once Steam receives the request, it automatically displays the Steam overlay, showing the user the details of the order. It also includes a button to confirm the order. When the user confirms the purchase, they’ll receive a notification stating if it was accepted or denied. The game receives a callback for the notification which is forwarded to the purchasing server.

After receiving the notification, the server posts a FinalizeTransaction call to Steam, completing the operation. If the response is successful, the user is charged and receives the item.

Limitless Channels Powered by Headless APIs

In-game purchases are just one of the endless possibilities for adding e-commerce to an experience. Imagine watching Netflix and seeing an item you want to purchase. You pause the content, click or tap the screen, and details for the product appear. You could then purchase the item, right there through an overlay or by being redirected to a browser or application.

All you need to facilitate this process is a product API to surface the item’s information and a cart API to process the checkout. If the device you’re using already has your wallet saved, you won’t even need to enter your payment details.

This is the future of omnichannel commerce and it is why Fabric created a full suite of headless commerce APIs — to allow brands and retailers to create memorable shopping experiences across limitless channels.


Topics: Commerce
Bradley Taylor

Tech advocate and writer @ fabric.

Learn more about fabric