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.
Note: The E-commerce widget only works in projects with an SSL certificate. You can enable SSL in the Domain tab of your project settings.
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.
Note: Collaborators cannot enable 'connect to Stripe' to activate e-commerce.
Make sure that Checkout is disabled in your Stripe account. To do so, open your account settings in Stripe, scroll down to the Stripe apps section, and click ‘Checkout settings.’
Now it’s time to add your products to Stripe. Log in to your account, then select Products → Add product. Specify your product name and add a price. Always select ‘One-time’ as a price type: products with recurring payments cannot be sold via the E-commerce widget.
By now, it’s not possible to add attributes to products. That’s why, if you plan to sell the same product but in different colors, you need to create a separate unit for each color. Click ‘Save product,’ and you’re all set.
Note: If you have connected Readymag to Stripe before May 2020, you still can use the old Stripe Orders API that allows adding attributes to products. In this case, to add a product, you need to go to your Stripe account and select Orders → Products → Add new. Here you can specify your product name, add a description, an image, and select attributes like size and color.
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.
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.
Note: If you encounter any issues regarding managing products in Stripe, payments, etc., please contact the Stripe support team.
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.