With the help of our E-commerce widget, you can sell products directly from your Readymag project. The widget is based on the Stripe API and allows payments from credit cards. It is available on all of our paid plans. 

We don’t charge any additional fees for using E-commerce—however, Stripe regulations do apply. You can find pricing details for Stripe here: https://stripe.com/pricing. If you have any questions regarding Stripe functionality or experience any issues with payments, customer orders, etc., please refer to the official documentation of Stripe or contact the Stripe support team. 

Stripe is currently supported in 34 countries. Check if you can accept payments in your country here: https://stripe.com/global.

Before you start

As the E-commerce widget is based on the Stripe API, you need to have an account with Stripe to get started: https://dashboard.stripe.com/register. If you haven’t already registered, you’ll be prompted to sign up after clicking ‘Connect to Stripe’. Stripe will require your business details to activate an account. 

Now it’s time to add your products to Stripe. Log in to your account, then select Orders → Products → Add new. Specify your product name, add a description, an image, and select attributes like size and color. Click ‘Save product,’ and you’re all set.

Make sure that you have added SKU for your product. SKU is short for stock-keeping unit and we use it to label individual products: a specific item the customer is actually buying. Anything you can add to the shopping cart—physical or online—is represented by an SKU. 

If you forget to add SKU information for your product, you will see the warning “No active products” in your Readymag project.

When you add sizes in your SKU, start with the biggest one and finish with the smallest—this way, they will be shown in a proper sequence. 

Add products to your project

Click E-commerce in the widget panel to create a new widget. You’ll see a Cart button and a pop-up prompting you to connect to your Stripe account. Turn the switch on to be redirected to Stripe. Now Stripe is connected and you can keep building your Readymag project.

Click + in the widget controls to add a new product. You’ll see a new ‘Add to cart’ button in your layout and a drop-down menu where you can select one of your products added to Stripe. To add another product, click on the Cart again, and then click + in the widget controls. To add an image for your product, upload it via the Picture or Slideshow widget and position it above the Add to cart button. Prices can be added using the Text widget. 

If your product has other attributes like size or color, they will be shown as drop-down menus above the Add to cart button. 

When configuring attributes in Stripe, we recommend you set a specific value rather than a general title. For example, you are selling a shirt that can be purchased in two colors: blue and red. Don’t use ‘color’ as a title for this attribute, simply enter ‘red’ and ‘blue’ in its fields. 

Customize the buttons

Click Settings in the widget controls to set the preferred color, borders, radius, and font for your ‘Cart’ and ‘Add to cart’ buttons. Both buttons can be customized individually. Click a button you need to edit and go to Settings after that: you’ll see dedicated options for that particular button. 

If you want your buttons to change their appearance on hover, switch from Default to the Hover tab and select the preferred settings. 

In the Icon section of the widget controls, you can select from thousands of icons to show it next to your text. Here you can also adjust the size of an icon and position it to the left or right border of your button.

How the widget works

The E-commerce widget consists of two parts: a product card and a cart. When your customer puts products into their cart, the number on the Cart button changes to match the number of added products. To view everything they’ve added, your customers can click directly on the Cart button. After that, the cart will open on the right side of your project. 

To change the appearance of your cart, go to the Preview mode and click the gear icon at the bottom of it. Here you can select sidebar color and transparency, customize your font, and decide whether you want the cart to display with a shadow.

Customers can change the number of products or delete items they don’t want directly from the cart interface. The rest of the procedure is quite standard: your customer clicks ‘Check out’ and enters their address, email, and shipping notes if needed, and then proceeds with payment by entering their credit card information. After payment is made, Stripe sends a letter to the customer’s email with confirmation. The money will appear on your balance in Stripe; Readymag doesn’t charge any commissions. 

Payment methods

Currently, only the 'Pay with card' option is supported in Readymag projects. Cash, Google Pay, and Apple Pay are not available. 

Taxes and rates

You can add Sales Tax, VAT, GST, and customize tax rates for your products via Billing —> Tax rates.

Order confirmation emails

To enable order confirmation emails, please visit your Stripe Settings and check the 'Email receipts' section—you can also refer to the official Stripe documentation for additional help on this matter: https://stripe.com/docs/receipts#receipts-checkout.

401 error in Stripe interface

First, check whether Readymag is authorized in your Stripe account: https://dashboard.stripe.com/account/applications. If this doesn’t help, try reconnecting Stripe to your e-commerce project. 

Other e-commerce services

If Stripe doesn’t suit you, you can still turn your project into an online store by embedding a third-party E-commerce service via our Embed & Code widget. Normally, full custom code functionality is available at the Professional plan, while Creator allows integration of the <iframe>-snippets only. However, there are several exceptions: Shopify, Gumroad, and Ecwid can be embedded with any paid plan. Click here for more information.