Take payments with Stripe

What you will have at the end

A site with a buy button on it that takes a card, and the money in your own Stripe account. Not in ours. We are not in the middle holding it, there is nothing to withdraw from us, and no payout to wait for that is ours to release.

One thing to get straight before you press anything, because getting it wrong costs a build turn. There is more than one Stripe connection in Grafter and they are not alternatives. The one this page uses lives on your account, under Payments. It is the only one that ends in a card being charged.

Before you start

A Stripe account

In the name of the business taking the money. Stripe checks who is being paid before it pays out, and that is anti-money-laundering law rather than a Stripe preference — nobody can skip it for you.

A site already built

Payments connect to your account; the buttons are written into a site by a build. So there has to be a site to write them into.

One turn's credits

The build that wires the buttons costs a turn. Connecting Stripe and listing your products cost nothing.

Somewhere to put the site, and a paid plan

A checkout cannot open at a grafter.build address, so the only way to test one is on an address of its own. Both routes to that — putting the site online and taking the files away — are on the paid plans, and the online route also wants an account with the host and an access token from it.

About ten minutes

Most of which is Stripe's own form, not ours.

Three Stripe connections, and one of them works

If you have set an agent up you will have been offered Stripe there too, twice, under different names. Nothing on those screens tells you they are different things, so here is the whole picture in one place.

Tip. If you want a working checkout, use the first row and ignore the other two. The second is for somebody who already has a payment link and wants buttons pointed at it.

Note. Doing the first and second together sends one build two instructions that disagree, and which one wins is not decided anywhere. The page about training an agent takes that apart properly. The third is our fault rather than a setting you have got wrong — the connection saves, and the instruction it produces is refused by the same request that carries it.

Connect your Stripe account

This is done once, on your account rather than on a site, and every site on that account then uses it.

1. Open Payments from the list down the left of your workspace.
2. Press Connect on the Stripe row. It is the only row on the screen — the other providers are not built, so they are absent rather than greyed out.
3. One of two things happens. Either you are sent to Stripe to authorise the connection, or a box opens asking you to paste a secret key. Which one you get depends on how this install is set up and is not a choice you made.
4. If you were sent to Stripe, fill in their form and let it send you back. The screen says Connected, and your account's name appears where the Connect button was.
5. If you got the paste box instead, read the note below before you type anything into it.
6. Then paste the key and press Save. It is tried against Stripe before it is kept, so a key that is wrong or half-copied comes back as a message rather than sitting there looking connected. When it is in, the row shows your account's name and the last four characters of the key.

Tip. A Test mode tag beside the connected name means exactly that: the account takes test cards and no real money at all. Worth reading before you wonder where a payment went.

Note. The paste box is a fallback rather than an equal option. The key it wants is a secret one, starting sk_ or rk_, and that key can charge your customers, refund them and read every transaction you have ever taken. It is checked against Stripe before it is stored, encrypted at rest, and never shown back to you — and it is still far more of your business than the other route hands over. Paste a publishable key by mistake and the screen tells you which one you need instead of saving it.

List what you sell

The prices your site charges come from a list you keep in the dashboard, not from the page. That is deliberate. A price written into a page is a price in the buyer's browser, and a browser belongs to the buyer — so the page sends which product, and the price is looked up on our side from the list you typed.

Each site keeps its own list.

1. Open that site's own dashboard and go to Products.
2. Press Add a product.
3. Type the name, a short description, the price and the currency. Write the price the way you would on a label — 45.99, not 4599.
4. Press Add it.
5. Press Edit on the row you just made. A picture, a code and the tick that keeps the product on the site all live in this panel, and none of the three is on the add form — our oversight rather than something you have missed.
6. Add the picture if you have one, and leave Show this on the site ticked. Unticking it takes the product off the site and out of the checkout, so a hidden product cannot be bought even by somebody holding an old link.
7. Press Save. Nothing in that panel is kept until you do, and closing the row without pressing it loses the picture you just chose.

What the list accepts

Currencies

Pounds, US dollars, euros, Australian dollars, Canadian dollars, New Zealand dollars. One per product.

Smallest price

Thirty pence, or thirty of the smallest unit in the other currencies. Anything under that is refused at the checkout rather than sold cheap.

Largest price

Fifty thousand pounds, and that ceiling is the checkout's rather than the form's. The form takes a bigger number without a word of complaint, so an over-priced row saves and then fails at the moment somebody presses buy. Ours to fix; worth knowing until we have.

Pictures

Under 600KB each. A bigger one is refused when you pick it, with a message saying so.

How fast a change shows

About a minute on the live site. No rebuild, no credits, no waiting on a build queue.

Note. A product left at 0.00 is treated as a draft you have not finished rather than as a free one, and the checkout refuses it. If you want to give something away, take the buy button off it instead of pricing it at nothing.

Send the turn that wires the buttons

Connecting Stripe changes what the next build is told. With an account connected, the build is handed the address of your product list and the address of the checkout, and told to send the product and never a price. With nothing connected, the same build is told to make the pay control a note saying payments are not set up yet.

So the order matters, and this is the step people do backwards. Connect first, then build. A site built before you connected has the note rather than the button, and only another turn changes that.

1. Open the site in the builder.
2. Ask for what you want in plain words — a shop page, a deposit button, a buy button under each service. You do not have to mention Stripe or say anything technical.
3. Wait for the turn to finish and read what it says it did.
4. If the reply mentions payments not being connected, the connection did not exist when the turn started. Check the Payments screen, then send the turn again.

Tip. One turn is enough. Adding products afterwards needs no further build — the site reads the list fresh every time somebody loads the page.

Note. Every build is also told to write a few example products into the page so a first draft is not an empty shop, and to swap them for your real list once there is one. That is the next section, and it is what most people trip over.

The products on the page may not be yours

Open a new shop and it looks stocked. Some of what is on it will be examples the build wrote so the page had something to show, and they are replaced by your own list only once your list has something in it.

Those examples cannot be bought. They are not in your catalogue, so the checkout has nothing to price and the button fails. This is the commonest way a shop looks finished and is not.

1. Add at least one real product under Products.
2. Reload the live site and read the names and prices on the page. They should be yours.
3. If they are still the invented ones a minute later, the list is empty, you are looking at a different site, or every row has been unticked.

Note. While a site's list is empty, the checkout will accept the price the page sends it. That hole is left open on purpose so shops built before the list existed keep working, and it closes the moment that site has one product showing on it. Since a price in a page is a price in the buyer's browser, adding one is worth doing before you take any money.

How to know it worked

The buy button cannot be tested in the builder's preview, and it cannot be tested at the grafter.build address for your site either. Both of those render the site sealed inside a frame, and a checkout cannot open out of it. That is ours rather than a broken build, and it catches everybody once.

So the test happens on the site's own address. Press Publish in the builder and take Put your site online, or take the files and host them wherever you like.

Both of those are on the paid plans. On a free one the two rows still show, with the plan named on them, and they do not open — so you find that out on the menu rather than after filling in a form.

1. Open the site at its own address — not the preview, and not the grafter.build link.
2. Press a buy button. A Stripe checkout page should open with your product's name and your price on it.
3. Pay it. Use one of Stripe's own test cards if the connected account shows the Test mode tag.
4. Look at where you land afterwards. You come back to your own site with a paid marker on the end of the address.
5. Open your Stripe dashboard. The payment is there, carrying the name of the site that made it, so an account serving several sites can still tell them apart.

Tip. Step two is the whole test. If the checkout page opens showing your product and your price, the wiring is right and the rest is Stripe's job.

Note. None of the sale is recorded on our side. There is no takings screen, no order list and no receipt from us — your Stripe dashboard is the only record. It is also why disconnecting here never touches money you have already taken.

What this does not do

• It does not put a working checkout in the preview or at the grafter.build address for your site. Test on an address of your own.
• It does not record a sale anywhere in Grafter. No takings, no orders, no customer list — all of that lives in your Stripe account.
• It does not write a thank-you page. The buyer comes back to your home page, and whether they see anything about having paid depends on what the build made of the marker on the address.
• It does not do subscriptions, refunds or invoices. It creates one charge for one item, however many of that item somebody asked for.
• It does not email anybody a receipt on your behalf. Stripe will, from your own settings there.
• It does not give each site its own Stripe account. One connection per Grafter account, shared by every site on it.

Note. That last one matters if you build sites for other people. A client's site sitting on your account settles to your Stripe, not theirs — the money arrives with you and has to be passed on by hand. Moving the site onto their own account is the only way round it today, and there is a page on handing a site over.

When the button does not work

A refused checkout comes back with a sentence rather than silence, and the build is told to show that sentence instead of redirecting blindly. These are the ones you are likely to meet.

Note. A button that does nothing at all and shows no message is a different problem, and it is usually the preview or the grafter.build address rather than the build. Try it on the site's own address before you spend a turn on it.

Common questions

Does Grafter take a cut of what I sell?

The Payments screen prints a percentage beside a connected account. The checkout your sites actually use creates a plain charge on your own Stripe and attaches no platform fee to it today, so read that line as the arrangement rather than as something already being taken. Your Stripe statement is the record either way.

Can I use PayPal instead?

Not yet. Stripe is the only provider on the screen. The others were listed as coming and then taken off, because a row nobody can press is not information.

Do I have to rebuild the site when I change a price?

No. Prices live in the dashboard and the site reads them each time somebody loads the page. A change shows up in about a minute and costs nothing.

Can two of my sites pay into two different Stripe accounts?

No. There is one connection per Grafter account and every site on it uses that one. What each site does get is its own name against each payment in Stripe, so you can tell which site sold what.

What happens to money I have already taken if I disconnect?

Nothing. It is in your Stripe account and was never in ours. Disconnecting stops new checkouts starting, and it asks you to confirm before it does.

Why does my site send the product rather than the price?

Because a price written into a page is a price in the buyer's browser, and the browser belongs to the buyer. The page names which product; the price is read on our side from your list. It is the one part of this that is not up for changing.