Help

Set up the shop

Every step to open your shop, in order: first in your Stripe account, where the payments go, then in your Tilefolio administration. Count about half an hour, plus the time Stripe takes to check your account. Only the site's owner can do it: editors don't see these settings.

Before you start

• Your site is subscribed: the shop opens after the first payment, not during the free trial. You can prepare everything (Stripe, settings, products) during the trial.
• Keep two tabs open: your Stripe dashboard (dashboard.stripe.com) and your administration. You'll copy three things from one to the other: a key (Stripe → Tilefolio), the webhook address (Tilefolio → Stripe) and the webhook's signing secret (Stripe → Tilefolio).
• The Stripe menus are named below as Stripe shows them in English; their place can change a little when Stripe updates its dashboard.

1. In Stripe: the account

1. Create an account on stripe.com, or use the one you have. Choose the country where you, or your business, are based: it sets the currency of your payouts and Stripe's fees.
2. Activate payments: Stripe asks what you sell, your identity, your address and the bank account where it pays the money in. Until the account is activated, it can only take test payments.
3. In Settings > Business > Public details, check the public business name, the support e-mail and the statement descriptor (what buyers see on their card statement): they show on the payment page and the receipts.
4. In Settings > Branding (optional): your logo, icon and colours, for Stripe's payment page and receipts.
5. In Settings > Payment methods: the ways buyers can pay. Cards are on; turn on Apple Pay, Google Pay, and TWINT if you sell in CHF. The payment page offers those that fit the buyer and the currency.
6. In Settings > Customer emails: turn on Successful payments, so that each buyer gets a receipt. Tilefolio doesn't send any e-mail to the buyer.

2. In Stripe: the restricted key

The key lets your site ask Stripe for a payment page. A restricted key can only do what the shop needs, unlike the secret key, which can do everything on your account.

1. Open Developers > API keys, then Create restricted key. If Stripe asks how you will use it, choose to set its permissions yourself.
2. Give it a name, for example “Tilefolio”.
3. Leave every permission at None, except:
   • Checkout Sessions: Write (to create the payment page, and read its lines once paid);
   • Products and Prices: Read (to read the products of each paid order).
4. Click Create key, confirm with the code Stripe sends you, then copy the key: it starts with rk_live_. Stripe only shows it once: if you lose it, create another one.

A secret key (sk_live_…) works too, but gives full access to your Stripe account: prefer the restricted key.

3. In Tilefolio: paste the key and copy the webhook address

1. In your administration, on the home page, click Edit my site (it opens Site settings).
2. Open the form's Shop panel and paste the key in Stripe: secret key, then click Save. The key stays in the administration, never on the site; spaces copied by mistake are removed.
3. On the right of the same page, the Shop box to the right of the form shows your Stripe webhook address, of the form https://…/api/shop/stripe-webhook/…. Click Copy.

This address is your site's own: it doesn't change if you later add a domain name.

4. In Stripe: the webhook

The webhook is how Stripe tells your site that an order is paid: without it, payments go through but no order shows in your administration and the stock doesn't go down.

1. Open Developers > Webhooks, then Add destination.
2. Events from: Your account. Leave the API version Stripe offers.
3. Select exactly these two events (type their names in the search field):
   • checkout.session.completed: a payment page was paid;
   • checkout.session.async_payment_succeeded: a payment that arrives later (bank debits…) went through.
   Other events are ignored by your site: no need to add them.
4. Destination type: Webhook endpoint. In Endpoint URL, paste the address copied from the Shop box, then create the destination.
5. On the destination's page, reveal its Signing secret and copy it: it starts with whsec_.

5. In Tilefolio: the shop's settings

Back in Site settings:

1. Stripe: webhook secret: paste the signing secret (whsec_…).
2. Shop: currency: CHF, EUR, USD or GBP. It is the currency of all your prices and shipping costs; buyers pay in it.
3. Shop: shipping countries: where you deliver, as two-letter country codes separated by commas (CH, FR, DE, US…), or EU for the whole European Union. Each can be followed by its own shipping cost. For example CH, EU 15, FR 12, US 25: France at 12, the rest of the EU at 15, the United States at 25, Switzerland at the shipping cost below. A country written alone wins over EU. At least one country is needed. In the cart, the buyer chooses their country, and Stripe's page only accepts an address there.
4. Shop: shipping cost: the cost of the countries that don't have their own, added once to each order whatever its size. 0 or empty: free delivery.
5. Shop: free shipping from (optional): from this order amount, delivery is free everywhere. Empty: never.
6. Shop: contact e-mail (optional): shown in the cart, so that people can write to you before buying. Empty: the cart points to your Contact page.
7. Click Save. If a value is wrong, the save is refused with a message saying which: a key that doesn't start with rk_live_, rk_test_, sk_live_ or sk_test_, a secret that doesn't start with whsec_, or an unknown country code.

Also, if you like: Menu: shop renames the shop's menu (“Boutique” by default), and Home page set to products opens your site on the shop (see Pages, menus and texts).

6. Add your products

Create your product tiles, with their price, stock, photos and description: see Add a product. Before the shop opens, they already show on your site with their price, and their button says “Buying is currently disabled”.

7. Ask us to open the shop

1. Write to contact@tilefolio.com from your account's e-mail address, with your site's address and what you intend to sell.
2. We check that the key, the webhook secret and at least one shipping country are set, and open the shop. The cart then appears at the top of your site.

Once the shop is open, the key, the webhook secret and the shipping countries can be changed but not emptied. To close the shop, write to us: the cart and the product tiles disappear from the site, past orders stay in the administration.

8. Check with a first order

1. On your site, add a cheap product to the cart, choose your country and pay.
2. After payment, you land on your site's thank-you page and Stripe e-mails you the receipt.
3. In your administration, the order shows in Orders within a few seconds, and the product's stock went down by one.
4. Refund it from Stripe (Payments, find the payment, Refund), then put the stock back up in the product.

Trying it first with Stripe's test mode

To try the shop without real money, do steps 2 and 4 in Stripe's test mode (a sandbox): the key then starts with rk_test_, and the test webhook has its own signing secret. Say so in your e-mail. Pay with the test card 4242 4242 4242 4242, any future date and any code. When everything works, replace both the key and the webhook secret with the live ones: a key and a secret from different modes don't work together.

If something doesn't work

Still stuck? Write to us at contact@tilefolio.com, without ever sending your key or secrets by e-mail.