# How to add Stripe test payments without pasting API keys

Canonical: https://uvilno.com/guides/how-to-add-stripe-payments-without-api-keys
Updated: 2026-10-27

Build a real Stripe test-checkout flow with Uvilno's managed connection, understand Connect authorization, and prepare the separate work required for live payments.

Written by the Uvilno team. Examples illustrate workflows; confirm service availability before launch.

## Define the payment journey before adding the button

Write a short fulfillment rule in the brief. For example, a verified test receipt may reveal a test download message, while cancellation returns to the same selection without creating an order. Naming the rule helps you review the frontend and the server confirmation together. It also prevents a generic success page from standing in for the business behavior you intended to test.

A payment button is the visible start of a larger system. Decide what the visitor is paying for, whether the amount is fixed, and what a successful payment should unlock or record. Also decide what happens when checkout is cancelled, the payment fails, or confirmation arrives later. A checkout page opening successfully proves only that a session was created; it does not prove money moved or that the application should grant access.

For a first integration, keep the scope small. Build one test purchase with an explicit description, an authenticated visitor where required, and a visible receipt state. Avoid combining a first checkout with subscriptions, refunds, marketplace splits, inventory, and tax rules unless those are supported and deliberately specified. These are separate business processes. A simple, verifiable test path gives you evidence about the connection before you invest in a full commerce interface.

## Understand what ‘without API keys’ actually means

A managed connection can remove the need to paste a secret into the builder. It does not remove credentials from the payment system. A trusted server holds the platform configuration and performs sensitive Stripe operations. The generated frontend receives only the information it needs to start the authorized journey. This division matters because exported browser JavaScript is readable by visitors; it cannot be a safe place for a Stripe secret key.

Uvilno's managed Stripe path supports sandbox checkout without asking you to supply customer credentials. Optional Stripe Connect authorization is a separate permission flow for linking an account. Account linking alone does not enable live collection, complete onboarding, or establish payouts. Keep these actions distinct in your project plan. If an integration ever asks you to fix a payment by inserting a secret directly into a page or a public repository, stop and use the trusted service configuration instead.

Separate the three payment decisions

| Action | What it establishes | What it does not establish |
| --- | --- | --- |
| Enable managed test checkout | A supported sandbox journey | Live money collection |
| Authorize a Stripe connection | An account permission grant | Completed business onboarding or payouts |
| Configure and verify live payments | A production payment setup | Automatic tax, refund, or fulfillment policy |

## Select the connection and write a behavioral brief

Open the composer's app connections and select the supported Stripe connection for the next build. Private payment-related behavior can require managed app login; keep the dependency the product identifies. Connection selection is draft state. It does not silently change the current saved website, start a model run, or charge a visitor. Review the brief and explicitly send it when you are ready to build the payment interface.

Tell the builder exactly which states to show. The initial button should explain that this is a test checkout. While a session is being prepared, prevent duplicate submissions and show useful feedback. If the visitor cancels or a popup is blocked, preserve their context and offer a clear retry. After returning, show confirmation only when the trusted service reports a verified test receipt. Do not ask the model to invent a successful transaction to make the demo look complete.

Example brief:

Add one ‘Try test checkout’ action for the demo purchase. Label the flow as test mode. Show a preparing state, a cancellation message, a recoverable error, and a receipt only after server confirmation. Preserve the visitor's current selection and prevent repeated clicks while the session is opening.

## Treat sandbox success as test evidence

Stripe's testing environments simulate payment objects and flows without moving real money. Use Stripe's documented test payment methods rather than a real card to investigate the integration. Current Uvilno payment and managed checkout configuration remains in test mode until the owner configures a live setup. A test receipt is therefore evidence about the software path, not a customer sale, revenue, or a live payout to your bank account.

Record the environment alongside every result. A screenshot saying success is ambiguous if the page does not identify the mode. Test the success path, cancellation, failed payment, repeated clicks, and returning after an expired session. Keep test orders separate from any real operational records. If you demonstrate the website publicly before live payments are enabled, label checkout accurately and avoid copy such as ‘Your order is confirmed’ when the application has only created a sandbox transaction.

- [Stripe testing documentation](https://docs.stripe.com/testing-use-cases)

## Let verified server events determine payment state

A browser can revisit or alter a return URL. It can also close before a payment finishes. Payment authority therefore belongs to the trusted service handling Stripe confirmation, not to a query parameter or a local success flag. The integration should verify signed events, associate them with the right project and visitor, and handle retries without granting the same result twice. A return screen can ask the server for status while confirmation is pending.

Uvilno's managed app checkout and Uvilno's own source unlock are different payment purposes. A test purchase inside your generated app must not unlock its private source or change your Uvilno subscription. Keep the product language distinct so visitors and owners understand which transaction they are testing. When you review the flow, verify the expected receipt in the application and confirm that unrelated entitlements remain unchanged. Do not use a celebratory animation as your only evidence of confirmation.

- A browser return alone never marks the payment paid.
- Confirmation belongs to the correct project and visitor.
- Repeated confirmation does not duplicate fulfillment.
- An app test payment does not alter source-unlock entitlements.
- Pending and failed states have honest, useful copy.

## Use account authorization deliberately

Stripe Connect OAuth is an authorization flow in which an account owner reviews a platform's request and returns through a configured callback. Stripe's documentation describes the relevant parameters and the separation between authorization and token exchange. The sensitive exchange belongs on a trusted server. The generated preview should not receive a client secret, raw access token, or private platform configuration as part of this process.

If the supported connection opens an authorization popup, read the provider page and confirm the intended account and mode. Cancellation should leave the project usable and should not pretend that the connection succeeded. In an isolated preview, the trusted provider journey may need a popup rather than an embedded checkout. That behavior is intentional. Troubleshoot the allowed popup, callback configuration, and connection status instead of weakening the generated-code sandbox or copying authorization details into chat.

- [Stripe Connect OAuth reference](https://docs.stripe.com/connect/oauth-reference)

## Plan live collection as a separate release

Live payment collection requires more than changing the word test in the interface. The account and platform must be configured for live operation, the business must complete the applicable onboarding, and the production payment flow must be verified. Product descriptions, prices, currency, support contacts, refund terms, and fulfillment rules need to be accurate. Check Stripe's current requirements for your account and business; do not infer production readiness from a successful sandbox authorization.

Treat this as a release gate. Identify who controls the Stripe account, who can respond to a payment issue, and how a customer receives the thing purchased. If the intended live capability is not enabled in the supported Uvilno integration, use an appropriate external checkout service or further development rather than implying it exists. Keep the live button hidden until the real path is ready. This is especially important for subscriptions and marketplaces, whose ongoing obligations extend beyond a single checkout session.

## Troubleshoot from the first unverified step

When checkout does not open, check whether the selected service was included in the built version, whether the visitor is signed in if required, and whether the browser blocked a user-initiated popup. When checkout opens but the app remains pending, check the trusted receipt state and the environment rather than repeatedly pressing the button. If account authorization was cancelled, reconnect through the supported control; do not infer success from the popup closing.

After export, retest from the deployed origin. Hosted services remain dependencies and origin registration can matter for the associated login flow. Keep a concise record of the steps, expected result, actual result, and a safe time reference when reporting a problem. Never include card details, secret keys, or raw authorization tokens. A well-described failure lets you isolate the checkout session, confirmation, or UI state without exposing the credentials that protect the business.

Locate the failing payment step

| Symptom | First check | Avoid |
| --- | --- | --- |
| No popup | User action and popup permission | Relaxing the preview sandbox |
| Authorization cancelled | Connection status and intended account | Treating a closed popup as consent |
| Return stays pending | Verified server receipt and mode | Setting paid in browser storage |
| Export fails to sign in | Deployed-origin configuration | Publishing private service credentials |

## Common questions

### Can I collect live payments immediately?

Current Uvilno payment setup remains test mode until live configuration and required account onboarding are completed. A test checkout or linked account is not evidence that live collection or payouts are enabled.

### Does no API-key pasting mean there are no credentials?

No. The managed integration keeps sensitive credentials on a trusted server. They do not belong in generated frontend code, chat, or a public source repository.