SiteSparkSiteSpark星火建站プロンプトを入力 · ウェブサイトを公開
← 記事一覧
Payments

Wiring Stripe and PayPal into your storefront

The Stripe and PayPal accounts are yours; what we wire up is the keys. Six copy-paste prompts, plus the two things that trip people up: why hosted checkout cannot be embedded, and why PayPal hands back no address.

Where this sits in the flow

The generation flow is still the same four stages. Payments belong to stage 3 (preview and iterate) and should be settled before stage 4 — changing payment channels later is more expensive than any other edit.

One honest note: the Stripe and PayPal accounts are yours to open. We do not open them for you and we do not collect on your behalf. “Wiring” below means configuring those accounts' keys into the site so buyers pay into your own account.

  • Describe the idea — including what you sell, to whom, and which payment channel
  • The agent generates — it creates the order, callback and order-record endpoints
  • Preview and iterate — get it working with test keys, then swap in live ones
  • Ship it — accept it with one real, small payment before launch

Stage 1 · Describe the idea: put payments in the first sentence (prompt 1)

Settle the channel and the currency in your first sentence, because they shape the page structure (whether to show tax-inclusive prices, whether to ask for an address). Buyers abroad usually mean Stripe or PayPal settling in USD; buyers in mainland China mean Alipay or WeChat Pay settling in CNY.

What to check: are prices shown in the currency you meant, and is there a checkout entry point?

Build me an electronics storefront selling Bluetooth earphones and charging accessories to overseas individual buyers, with Stripe in USD at checkout and PayPal as a backup payment method. Start with the home page and the product list.

Stage 2 · The agent generates: which endpoints appear

Nothing for you to type. Afterwards you can see what it built: product and cart endpoints, plus a checkout endpoint (where the payment session is created) and a callback endpoint (where the order is recorded after payment).

Confirm two things exist: checkout and callback are separate, and orders are written to a database — that is what makes a paid order traceable later.

Stage 3 · Preview and iterate (1/4): wire up Stripe (prompt 2)

Stripe uses hosted checkout: your server creates a Checkout Session and sends the buyer to Stripe's own page to pay. That means the secret key stays on the server; only the publishable key may reach the browser.

What to check: does the checkout endpoint return a redirect URL, and does payment return the buyer to your site?

Wire Stripe hosted checkout into the checkout page: on the server, read STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY from environment variables, create a payment session on order and redirect to it; after a successful payment return to the site's success page and write the order to the database.

Stage 3 · Preview and iterate (2/4): add PayPal as a backup (prompt 3)

Offering a second method lowers abandonment overseas — some buyers prefer cards, others only trust PayPal. The integration mirrors Stripe: create an order, then capture once the buyer approves.

What to check: does the PayPal order redirect, and does approval capture correctly and record the order? Run it in sandbox first — never test with real money.

Also add PayPal as a backup payment method: read PAYPAL_CLIENT_ID and PAYPAL_SECRET from server-side environment variables only, create an order on checkout and redirect; after the buyer approves, call capture to complete the charge, then return to the site and record the order number.

Stage 3 · Preview and iterate (3/4): success, cancel and failure (prompt 4)

This part is most often skipped and it decides how many after-sales disputes you get. A successful payment should clear the cart and show an order number; a buyer cancelling should keep the cart and leave no half-finished order; a failed payment needs a clear message, never a silent failure.

What to check: walk the success path, the cancel path, and a deliberately failing card — all three messages should read like a human wrote them.

Tighten the post-checkout handling: on success clear the cart, generate an order number and write it to the database; when the buyer cancels, keep the cart contents and return to checkout without leaving an incomplete order; on failure show a clear error with a retry path instead of failing silently.

Stage 3 · Preview and iterate (4/4): keys on the server only (prompt 5)

This is security, not style: once a secret key reaches front-end code or an API response, you have effectively handed over your payment account. Have the agent audit it and hand you an environment-variable list.

What to check: open developer tools in the browser and search for the secret — you should find nothing.

Audit all payment code: keys may only be read from server-side environment variables, and no secret may appear in front-end code or in any API response; also give me the list of environment variables I need to set (name, purpose, where to put it).

Stage 4 · Ship: one real, small payment first (prompt 6)

Passing in sandbox is not the same as taking real money. Before launch, drop the price to the smallest possible amount and run one complete payment with your own live account (refund included), confirm the order record, cart state and callback are right, then restore the real price.

Temporarily set the product price to the smallest possible amount — I want to accept this with one complete payment (including a refund) on my live account. Afterwards restore the real price and note what this acceptance run covered in the order's notes field.

Two realities worth knowing

First, Stripe and PayPal hosted checkout pages cannot be embedded in an iframe — the providers block it on purpose. Clicking pay therefore leaves your page and finishes on theirs. That is not a bug, and working around it invites compliance and risk-control problems.

Second, PayPal does not hand the buyer's billing address back to the merchant. So if your site needs to calculate tax by location, ask once on the checkout page: most countries only need the country, and the US also needs state and ZIP. That is exactly what our own checkout does.

FAQ

The three questions we hear most:

  • Can an individual open Stripe or PayPal? — That depends on Stripe's and PayPal's own requirements: supported account types and documents vary by country and region. We cannot judge that for you and we do not open accounts.
  • How do I choose the currency? — By where your buyers are: USD for overseas, CNY for mainland China. Getting this wrong is the most painful thing to undo later.
  • How are refunds handled? — Through the payment provider, back to the original method. Credit rules on our side are separate and live on the Refund Policy page.

Next step

If you want to walk through all of this inside one project, start from any of the links below.

アイデア → ウェブサイト

次のウェブサイトは、ひとつの文章の先に。

足場づくりはやめて、説明を始めましょう。会話を離れずに、本物のウェブサイトをビルドし、実行し、公開できます。