1. Stripe
Documentation
  • Back to home
  • StripeKit
  • Installation
  • Getting Started
  • Choosing a Mode
  • Type Reference
  • Setup
    • Configuration
    • Timezones
    • Storage Adapter
    • Money and Currency
    • Error Handling
  • Stripe
    • Elements
  • Modules
    • Overview
    • Customers
      • Overview
      • List
      • Retrieve
      • Find or Create by Email
      • Create
      • Update
      • Sync
      • Delete
    • Payment Methods
      • Overview
      • Create Setup Intent
      • List
      • Attach
      • Detach
      • Set Default
      • Sync
    • Payments
      • Overview
      • Pay With Saved Method
      • Create
      • Retrieve
      • Confirm
      • Cancel
      • Sync
    • Checkout
      • Overview
      • Get
      • Create
      • Submit Fields
      • Apply Coupon
      • Mark Complete
    • Subscriptions
      • Overview
      • Create
      • Retrieve
      • Cancel
      • Resume
      • Toggle Collection Method
      • Update Fields
      • Apply Promotion Code
      • List By Customer
      • Find By Metadata
      • Sync
    • Invoices
      • Overview
      • Retrieve
      • List By Customer
      • List By Subscription
      • Pay With Saved Method
      • Void
      • Finalize
      • Sync
    • Coupons
      • Overview
      • Create
      • Validate
      • Apply To Subscription
      • List
      • Deactivate
    • Webhooks
      • Overview
      • Process
      • Events Reference
    • Sync
      • Overview
  1. Stripe

Elements

Stripe Elements (Optional, Browser-Side)#

Stripe Elements is inherently browser code, so it cannot run in Node.js. StripeKit ships an optional companion frontend module you serve alongside your Node.js backend, and it never touches your server process.
Import from the @ricardoneudorfer/stripekit/elements entry point only on the pages that need it.

Getting a clientSecret#

A clientSecret is returned by kit.payments.create() or kit.checkout.create() whenever the resolved flow is elements, either because mode was set to 'elements' on init, or because mode: 'both' was configured and 'elements' was passed per call. See Choosing a mode.

Getting the publishable key to the frontend#

Your publishableKey is never hardcoded in the browser. Instead, fetch it from your own backend via:

Full example#

See examples/elements-mode-frontend.html for a full working page, and examples/elements-mode-backend.ts for the matching TypeScript backend.
Previous
Error Handling
Next
Overview
Built with