# Agent Framework (CrewAI) Source: https://docs.sampleapp.ai/examples/agent Build an AI-powered marketing strategy crew with multiple specialized agents working together # Build an AI Marketing Strategy Crew with CrewAI Learn how to create a multi-agent marketing strategy system using CrewAI. This example demonstrates how to orchestrate specialized AI agents that collaborate to research markets, develop strategies, and create compelling marketing content. CrewAI enables **autonomous agent collaboration**, **task orchestration**, and **structured workflows** that automate complex business processes with intelligent AI agents. ### ❶ Set up your CrewAI project Start by setting up your Python project with CrewAI and required dependencies. The CrewAI framework handles agent orchestration, task management, and workflow execution. **Install with uv or pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip install "crewai[tools]>=0.152.0" "crewai-tools>=0.58.0" ``` **Key packages:** * **crewai\[tools]** - Core CrewAI framework with tool support * **crewai-tools** - Pre-built tools for agents (web search, scraping, etc.) Create a crew class that inherits from `CrewBase`. This provides the foundation for defining agents, tasks, and the crew orchestration. The `@CrewBase` decorator enables automatic configuration loading from YAML files. **Key features:** * `agents_config` - Path to agents configuration file * `tasks_config` - Path to tasks configuration file * Decorators for agents (`@agent`) and tasks (`@task`) ### ❷ Create specialized AI agents Create your first agent - a Lead Market Analyst that conducts market research. Use the `@agent` decorator to define agents with specific roles, goals, and backstories. Agents can be equipped with tools like `SerperDevTool` for web search and `ScrapeWebsiteTool` for data extraction. **Agent capabilities:** * **Role**: Defines the agent's professional identity * **Goal**: What the agent aims to achieve * **Backstory**: Context that shapes agent behavior * **Tools**: External capabilities (web search, scraping, APIs) Define agent configurations in YAML for easy customization. Each agent has a role, goal, and backstory that guide its behavior and decision-making. This separation of configuration from code makes it easy to iterate on agent personalities and capabilities. **Configuration structure:** * **role**: Professional title and responsibilities * **goal**: Primary objective * **backstory**: Context and expertise background Create additional agents for different aspects of marketing. The Chief Marketing Strategist synthesizes research into strategies, while the Creative Content Creator develops compelling marketing content. Each agent has specialized expertise that contributes to the overall workflow. **Agent collaboration:** * Agents work sequentially or in parallel * Each agent focuses on their area of expertise * Output from one agent can inform another ### ❸ Define tasks for your crew Define tasks that agents will execute. Tasks specify what needs to be done, which agent is responsible, and what the expected output should be. Use the `@task` decorator to automatically register tasks with your crew. **Task components:** * **description**: What the task accomplishes * **agent**: Which agent executes the task * **expected\_output**: What should be produced Define task configurations in YAML with dynamic inputs. Use curly braces `{variable_name}` to interpolate values at runtime. Tasks can reference project descriptions, customer domains, and other contextual information. **Task features:** * Dynamic input interpolation * Clear expected outputs * Context-aware descriptions Build a workflow of interconnected tasks. Tasks can depend on outputs from previous tasks using the `context` parameter. This creates a pipeline where each task builds upon the work of previous agents. **Workflow pattern:** 1. Research task gathers market intelligence 2. Strategy task synthesizes insights 3. Campaign task generates creative ideas 4. Copy task creates final content ### ❹ Use structured output with Pydantic models Use Pydantic models to ensure structured, validated output from agents. Define schemas for complex data structures like marketing strategies, campaign ideas, and marketing copy. This ensures consistent, parseable results. **Schema benefits:** * Type-safe output * Automatic validation * Structured data for downstream processing Attach Pydantic models to tasks using `output_json`. This tells CrewAI to format the agent's output according to the specified schema, ensuring consistent structure and validation. **Output formatting:** * Agents produce JSON matching the schema * Automatic validation of required fields * Type checking and error handling ### ❺ Orchestrate the crew workflow Assemble your agents and tasks into a crew. Use `Process.sequential` for tasks that must run in order, or `Process.hierarchical` for more complex workflows. The crew automatically manages task execution, agent assignment, and result passing. **Crew configuration:** * **agents**: List of all agents in the crew * **tasks**: Ordered list of tasks to execute * **process**: Execution strategy (sequential/hierarchical) * **verbose**: Enable detailed logging Execute your crew by providing inputs that will be interpolated into task descriptions. The crew orchestrates all agents and tasks, passing results between them as needed. Use `kickoff()` to run once or `train()` for iterative improvement. **Input structure:** * **customer\_domain**: Target customer or company * **project\_description**: Detailed project context * Custom inputs can be added as needed ### ❻ Leverage agent tools for research CrewAI provides pre-built tools that agents can use to interact with external systems. Import tools like `SerperDevTool` for web search and `ScrapeWebsiteTool` for website content extraction. **Available tools:** * **SerperDevTool**: Google search API integration * **ScrapeWebsiteTool**: Web scraping capabilities * **Custom tools**: Build your own tool integrations Equip agents with tools by passing them in the `tools` parameter. Agents will automatically use these tools when needed to complete their tasks. Tools extend agent capabilities beyond just text generation. **Tool usage:** * Agents decide when to use tools * Tools provide real-time data access * Results are incorporated into agent reasoning ### ❼ Handle task dependencies and context Use the `context` parameter to pass outputs from previous tasks to subsequent tasks. This creates a knowledge pipeline where each task builds upon previous work. Reference tasks using `self.task_name()`. **Context passing:** * Previous task outputs become available * Agents can reference earlier work * Creates coherent, connected workflows ### ❽ Customize and extend your crew Use the `train()` method to improve your crew's performance over multiple iterations. Training allows the crew to learn from previous runs and refine its approach to tasks. **Training benefits:** * Iterative improvement * Performance optimization * Learning from experience Ready to build your own multi-agent crew? CrewAI makes it easy to create sophisticated AI workflows with specialized agents working together. Explore more examples and start building at [CrewAI](https://www.crewai.com). # Subscription Checkout (Stripe) Source: https://docs.sampleapp.ai/examples/payment Get started with our sample app to run a full, working subscription integration using Stripe Billing and Stripe Checkout # Prebuilt subscription page with Stripe Checkout Get started with our sample app to run a full, working subscription integration using Stripe Billing and Stripe Checkout. The sample app demonstrates redirecting your customers from your site to a pre-built payment page hosted on Stripe. The Stripe Billing APIs create and manage subscriptions, invoices, and recurring payments, while Checkout provides the pre-built, secure, Stripe-hosted UI for collecting payment details. Click each step to see the corresponding sample code. As you interact with the steps, such as adding pricing data, the builder updates the sample code. Download and customise the sample app locally to test your integration. ### ❶ Set up products, pricing, and payment methods Create new Products and Prices that you can use in this sample. Create features, such as an annual birthday gift, and associate them with your subscription to entitle new subscribers to them. Listen to the active entitlements summary events for your event destination, and use the list active entitlements API for a given customer to fulfil your customer's entitlements. **Note:** Create or select a product before adding a feature. Use your Dashboard to enable supported payment methods that you want to accept in addition to cards. Checkout dynamically displays your enabled payment methods in order of relevance, based on the customer's location and other characteristics. ### ❷ Build your subscription page Add a page to your site that displays your product and allows your customers to subscribe to it. Clicking Checkout redirects them to a Stripe-hosted Checkout page, which finalises the order and prevents further modification. Consider embedding a [pricing table](https://stripe.com/docs/payments/checkout/pricing-table) to dynamically display your pricing information through the Dashboard. Clicking a pricing option redirects your customer to the payment page. The button on your order preview page redirects your customer to the Stripe-hosted payment page and uses your product's `lookup_key` to retrieve the `price_id` from the server. Create a success page to display order confirmation messaging or order details to your customer. Associate this page with the Checkout Session `success_url`, which Stripe redirects to after the customer successfully completes the checkout. Add a button to redirect to the customer portal to allow customers to manage their subscription. Clicking this button redirects your customer to the Stripe-hosted customer portal page. Make a request to the endpoint on your server to redirect to a new customer portal session. This example uses the `session_id` from the Checkout session to demonstrate retrieving the `customer_id`. In a production environment, we recommend that you store this value alongside the authenticated user in your database. ### ❸ Call the Stripe API Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **Install the library:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` The Checkout Session controls what your customer sees in the Stripe-hosted payment page such as line items, the order amount and currency, and acceptable payment methods. Pass the lookup key you defined for your product in the Price endpoint to apply its price to the order. Always keep sensitive information about your product inventory, such as price and availability, on your server to prevent customer manipulation from the client. Pass in the predefined price ID retrieved above. Set the mode to `subscription`. Checkout also supports payment and setup modes for non-recurring payments. Specify a publicly accessible URL that Stripe can redirect customers after success. Add the `session_id` query parameter at the end of your URL so you can retrieve the customer later and so Stripe can generate the customer's hosted Dashboard. After creating the session, redirect your customer to the URL returned in the response (either the success or cancel URL). Initiate a secure, Stripe-hosted customer portal session that lets your customers manage their subscriptions and billing details. After creating the portal session, redirect your customer to the URL returned in the response. Create a `/webhook` endpoint and obtain your webhook secret key in the Webhooks tab in Workbench to listen for events related to subscription activity. After a successful payment and redirect to the success page, verify that the subscription status is `active` and grant your customer access to the products and features they subscribed to. ### ❹ Test your page Start your server. It automatically opens a browser window to `http://localhost:3000/checkout` ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` Click the checkout button. In the Stripe-hosted payment page, use any of these test cards to simulate a payment. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` ### Add customisation features If you successfully subscribed to your product in your test, you have a working, basic subscriptions checkout integration. Use the toggles below to see how to customise this sample with additional features. Use `subscription_data` to add an integer representing the number of `trial_period_days` before charging the customer for the first time. This must be at least `1`. If you start a free trial without a payment method, set the `trial_settings[end_behavior][missing_payment_method]` field to `pause` or `cancel` so the subscription doesn't continue if the trial ends with no payment method. Pass this parameter into `subscription_data` when you create a Checkout session, or update it on the subscription at another time. See Use trial periods for more information. Use `subscription_data` to set a `billing_cycle_anchor` timestamp for a subscription's next billing date. See Setting the billing cycle date in Checkout for more information. Set the `automatic_tax` parameter to `enabled: true`. ### Next steps Update subscriptions to handle customers upgrading or downgrading their pricing plan. Learn how to adjust a customer's invoice to accurately reflect mid-cycle pricing changes. Incentivise customers with discounts for committing to longer billing intervals. # Introduction to Sampleapp.ai Source: https://docs.sampleapp.ai/index Transform your API into interactive experiences that developers love ## What is SampleApp.ai? SampleApp.ai helps API companies convert more developers by transforming static documentation into interactive, hands-on experiences. Developers learn by doing - not by reading. Stripe-like interactive tutorials with step-by-step guidance. Pre-built sample applications showcasing your API's capabilities. Generate custom demos tailored to each prospect's tech stack in under 60 seconds. ## Why SampleApp.ai? Traditional API documentation leaves developers to figure out implementation on their own. SampleApp.ai bridges the gap between reading docs and writing code. Developers adopt your API faster when they can see working code immediately. Convert more developers from trial to paid with hands-on experiences. From idea to working app in less than a minute. ## Our Products ### Stripe-like Guided Sandbox Deliver Stripe-like interactive tutorials where developers follow step-by-step instructions while seeing live code and results. A lightweight component that integrates anywhere. Create interactive tutorials. ### Sample App Generator Create a library of pre-built sample applications that showcase common use cases for your API. Developers can explore, fork, and customize these examples. Build your sample app library. ### API & SDK Demo for Sales Sales teams no longer need to wait weeks for engineering to build custom demos. Generate production-ready demos in your prospect's framework - React, Next.js, FastAPI, Flask, Express, Go - in under 60 seconds. See how AI-powered custom demo generation works. ## Get Started Sign up at [sampleapp.ai/sign-up](https://sampleapp.ai/sign-up). Upload your OpenAPI spec or configure your API manually. Set up Guided Sandbox, Sample Apps, or API & SDK Demo for Sales - or all three. Add interactive experiences to your existing documentation. Sign up for free. # Analytics Source: https://docs.sampleapp.ai/integration/analytics Track developer engagement and sync with your GTM tools Understand how developers interact with your sample apps and sync engagement data with your existing tools. ## What We Track Views, time spent, code edits, and interactions. Forks, sign-ups, and API calls from playgrounds. ## CRM Integrations Sync developer engagement data with your CRM: * **Salesforce** - Enrich leads with playground activity * **HubSpot** - Track developer touchpoints in your pipeline ## Developer GTM Platforms Connect with developer-focused go-to-market tools: * **Reo.dev** - Identify and prioritize developer leads * **Common Room** - Understand community engagement ## How It Works 1. Connect your platforms in the dashboard 2. Developer engagement data syncs automatically 3. Enrich your existing workflows with playground activity ## Need Help? Connect with us. Get help from our team. # Customization Source: https://docs.sampleapp.ai/integration/customization Brand your SampleApp.ai experiences to match your documentation Customize the look and feel of your SampleApp.ai products to create a seamless experience that matches your brand. ## Branding Options (For Paid Plans) Configure your brand settings in the dashboard: 1. Go to **Settings** → **Branding** 2. Upload your logo 3. Set your brand colors 4. Click **Save** ## Need Help? Get help from our team. Connect with us. # Embedding Source: https://docs.sampleapp.ai/integration/embedding Add SampleApp.ai experiences to your documentation or website Embed SampleApp.ai products anywhere - your existing documentation, developer portal, or as a standalone experience. ## Embedding Options Embed directly into your existing docs. Add to your developer portal or marketing site. Use as a dedicated playground experience. ## Supported Documentation Platforms SampleApp.ai works with all major documentation platforms: * Mintlify * Fern * Astro Starlight * ReadMe * GitBook * Docusaurus * And more ## Website Integration Add interactive experiences to any website: * Developer portals * API landing pages * Post-login onboarding flows * Marketing pages ## Standalone Experience Host your playgrounds on a custom domain for a dedicated developer experience, fully branded to match your company. ## Getting Your Embed 1. Create your sample app or playground in the dashboard 2. Click **Share** → **Embed** 3. Configure display options 4. Copy the embed code ## Need Help? Get help from our team. Connect with us. # Next.js Quickstart Source: https://docs.sampleapp.ai/integration/nextjs-quickstart Get started with SampleApp.ai SDK in your Next.js application Get up and running with SampleApp.ai in your Next.js application in just a few steps. Install the SampleApp.ai SDK package: ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} yarn add @sampleapp.ai/sdk ``` Create a `.env.local` file in your project root with your API key: ```env theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} NEXT_PUBLIC_SAMPLEAPP_API_KEY=your_api_key_here NEXT_PUBLIC_SAMPLEAPP_ORG_ID=org_id ``` Make sure to replace `your_api_key_here` with your actual API key from the SampleApp.ai dashboard. Create a new file at `app/sandbox/page.tsx` (or `pages/sandbox/index.tsx` for Pages Router): ```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} "use client" import { SandboxHome } from "@sampleapp.ai/sdk"; export default function SandboxPage() { return ( ); } ``` Create a new file at `app/sandbox/[sandboxId]/page.tsx` (or `pages/sandbox/[sandboxId].tsx` for Pages Router): ```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} "use client" import { Sandbox } from "@sampleapp.ai/sdk"; import { use } from "react"; export default function SandboxHomePage({ params }: { params: Promise<{ sandboxId: string }> }) { const { sandboxId } = use(params); return ( ); } ``` ## Next Steps Explore example implementations. Learn how to customize the appearance and behavior. ## Need Help? Get help from our team. Connect with us. # API & SDK Demo for Sales Source: https://docs.sampleapp.ai/products/api-demo-for-sales Generate custom demos tailored to each prospect's tech stack in under 60 seconds Sales teams no longer need to wait weeks for engineering to build custom demos. SampleApp.ai generates production-ready demos in your prospect's framework - React, Next.js, FastAPI, Flask, Express, Go - in under 60 seconds. ## How It Works Prospect uses React and Express? Note it in your CRM. SampleApp.ai creates a working demo in React + Express with your API integrated. Present live on sales calls or send interactive demos for async evaluation. ## Key Benefits Create custom demos for each prospect in minutes instead of waiting weeks for engineering resources. Demo when the prospect is hot. Accelerate sales cycles by 40% with instant demo generation. Generate unlimited demos customized to each prospect's tech stack without engineering dependency. Participate directly in sales calls to demo your custom-built applications live. ## Sales Enablement Outcomes | Use Case | Impact | | --------------------------- | -------------------------------------------------- | | **Custom Demos** | Personalized demos in minutes for each prospect | | **Console Sandboxes** | Interactive sandbox environments for product tours | | **Technical Qualification** | Help prospects understand your API instantly | ## Supported Frameworks for Prospects SampleApp.ai generates demos in your prospect's preferred tech stack: | Framework | Description | | ----------- | ------------------------------------------------- | | **React** | Modern React with hooks and functional components | | **Next.js** | Full-stack with API routes and SSR | | **FastAPI** | Python async API framework | | **Flask** | Python web framework | | **Express** | Node.js backend framework | | **Go** | Go backend applications | ## Setting Up Sales Demo Generation Upload your OpenAPI spec, SDKs, and example code once. Set up base templates for common use cases and industries. Integrate with Salesforce, HubSpot, or your sales workflow. Sales reps request demos tailored to each prospect's tech stack instantly. ## Who Uses This * **Sales Teams** - Closing API deals with custom demos for each prospect * **Sales Engineers** - Presenting to technical buyers with live working apps * **Solutions Architects** - Building POCs and technical evaluations rapidly * **Pre-sales Teams** - Qualifying leads with interactive product experiences * **Marketing Teams** - Creating personalized campaigns at scale ## Business Impact Prospects see working demos in their tech stack, leading to 40% higher conversion rates. Accelerated sales cycles and reduced demo costs drive 3-4x customer revenue growth. Sales teams generate demos without pulling engineering resources from product development. Generate unlimited personalized demos for every prospect, every vertical, every use case. ## Integration Options Integrate SampleApp.ai into your sales workflow: * **CRM Integration**: Salesforce, HubSpot, Pipedrive * **Demo on Calls**: Live demo capabilities for sales engineers * **Leave-Behind Links**: Send interactive demos for async evaluation * **Email Campaigns**: Embed interactive demos in outbound sequences * **Sales Portals**: White-label demo generation in your sales portal # Stripe-like Guided Sandbox Source: https://docs.sampleapp.ai/products/guided-sandbox Stripe-like interactive tutorials with step-by-step guidance The Guided Sandbox delivers Stripe-like interactive tutorials where developers follow step-by-step instructions while seeing live code and results side-by-side - powered by real sandboxed environments that scale to thousands of concurrent developers. ## How It Works Developers see a split-screen experience: * **Left side**: Step-by-step instructions guiding them through the integration * **Right side**: Live code editor and preview showing real results As developers progress through steps, the code updates and they see real API responses - learning by doing, not just reading. Each developer gets their own isolated sandbox environment running live. ## Key Features Break complex integrations into digestible steps with clear instructions. Real containerized sandboxes running live apps - not simulations. Spin up 100s to 1000s of sandboxes on demand. We manage all the infrastructure. Embed in any documentation platform or website. ## The Experience Inspired by [Stripe's payment quickstart](https://docs.stripe.com/payments/quickstart), the Guided Sandbox provides: 1. **Clear navigation** - Developers always know where they are and what's next 2. **Interactive code** - Not just reading code, but running it in real sandboxes 3. **Instant feedback** - See real API responses immediately 4. **Self-serve exploration** - Developers can experiment freely without breaking anything ## Sandbox Infrastructure This isn't just a UI component - we manage the entire sandbox infrastructure so you don't have to. * **Containerized environments** - Each developer gets an isolated sandbox * **Auto-scaling** - Handle traffic spikes without provisioning * **Fully managed** - We handle containers, networking, and cleanup * **Developer self-serve** - No manual provisioning needed per user ## Use Cases | Scenario | Example | | -------------------- | ----------------------------------------------- | | **Quickstart** | Get developers from zero to first API call | | **Feature Tutorial** | Walk through implementing a specific feature | | **Migration Guide** | Guide developers through upgrading versions | | **Onboarding Flow** | Post-signup experience in your developer portal | ## Integration The Guided Sandbox is a lightweight React component that integrates with: * **Documentation platforms**: Mintlify, Fern, Astro Starlight, ReadMe, GitBook * **Websites**: Any existing website or developer portal * **Post-login experiences**: API portals, dashboards, onboarding flows The component is just 7 lines of code to add to your site. ## Get Started The Guided Sandbox component is available on request. Choose how you'd like to get started: See the Guided Sandbox in action with a live preview. Schedule a call to discuss your use case. ## What We'll Help You With When you get in touch, we'll work with you to: * **Set up the component** for your specific documentation platform * **Design tutorials** that create effective learning paths for your API * **Customize branding** to match your existing documentation style * **Integrate analytics** with your existing tools ## Next Steps Create pre-built examples for common use cases. Generate custom demos tailored to each prospect's tech stack in under 60 seconds. # Sample App Generator Source: https://docs.sampleapp.ai/products/sample-app-generator Pre-built sample applications showcasing your API's capabilities The Sample App Generator lets you create a library of pre-built sample applications that showcase common use cases for your API. Developers can explore, fork, and customize these examples. ## How It Works Use prompts or build manually to create examples for common use cases. A gallery of ready-to-run examples organized by use case. Developers copy examples and modify them for their needs. ## Key Features Hand-picked examples that showcase your API's best features. Cover different scenarios: authentication, data fetching, webhooks, etc. Developers get their own copy to customize and deploy. Update examples when your API changes. All forks stay independent. ## Creating Sample Apps ### From the Dashboard Navigate to **Sample Apps** → **Create New** in your dashboard. * **Generate with AI**: Enter a prompt describing the app * **Import from GitHub**: Import an existing repository * **Start from scratch**: Build manually in the playground Add a title, description, and tags for discoverability. Make the sample app available in your library. ### Recommended Sample Apps Create examples for these common scenarios: | Category | Example Apps | | ------------------- | --------------------------------------------- | | **Getting Started** | Hello World, Authentication, First API Call | | **Core Features** | CRUD Operations, Pagination, Error Handling | | **Use Cases** | Dashboard, Form Submission, Data Export | | **Advanced** | Webhooks, Real-time Updates, Batch Operations | ## Organizing Your Library ### Tags and Categories Organize sample apps with tags: * By feature: `authentication`, `webhooks`, `pagination` * By framework: `react`, `python`, `node` * By difficulty: `beginner`, `intermediate`, `advanced` ### Featured Apps Pin your best examples to the top of the library for new developers. ## Integration Sample Apps generated can be embedded in the following places: * **Documentation platforms**: Mintlify, Fern, Astro Starlight, ReadMe, GitBook * **Websites**: Any existing website or developer portal * **Post-login experiences**: API portals, dashboards, onboarding flows ## Analytics Track how developers interact with your sample apps: * **Views**: How many developers viewed each app * **Forks**: How many created their own copy * **Time Spent**: Average time in the playground * **Popular Apps**: Which examples get the most engagement Access analytics in **Dashboard** → **Analytics**. ## Best Practices Start with simple examples: authentication, first API call, basic CRUD. Then add advanced scenarios. Each sample app should demonstrate one concept well. Don't try to show everything in one app. Explain what each example does and when developers would use it. Keep examples current with your API. Outdated samples frustrate developers. ## Next Steps Create step-by-step interactive tutorials. Brand your sample app library. # Accept Payments with Stripe Checkout Source: https://docs.sampleapp.ai/samples/accept-payments-with-stripe-checkout Build a checkout page with Payment Intents API # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Ruby server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} ruby server.rb ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Node server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your PHP server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} php -S 127.0.0.1:4242 --docroot=public ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Python server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Go server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go run server.go ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your ASP.NET MVC server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet run ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor. **Maven:** ```xml theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} com.stripe stripe-java {VERSION} ``` **Gradle:** ```gradle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation "com.stripe:stripe-java:{VERSION}" ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add PaymentElement to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} ruby server.rb ``` Run the React app and go to localhost:3000/checkout. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an `Appearance` object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. **Make sure to open the preview on the right to see your changes live.** ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. **Note:** Parts of the preview demo might not match your actual checkout page. The above settings represent only a subset of the Appearance object's variables and the Appearance object only controls certain attributes of Stripe Elements. You're responsible for styling the rest of your checkout page. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to `localhost:3000/checkout` to see your checkout page. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} php -S 127.0.0.1:4242 --docroot=public ``` Run the React app and go to `localhost:3000/checkout`. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps #### Collect billing address details By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. **Note:** Parts of the preview demo might not match your actual checkout page. The above settings represent only a subset of the Appearance object's variables and the Appearance object only controls certain attributes of Stripe Elements. You're responsible for styling the rest of your checkout page. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to `localhost:3000/checkout` to see your checkout page. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` Run the React app and go to `localhost:3000/checkout`. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send email receipts Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the return\_url. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the return\_url, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. **Run the server:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go run server.go ``` Run the React app and go to localhost:3000/checkout. **Run the client:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the `ElementsConsumer` instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet run ``` Run the React app and go to localhost:3000/checkout. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send email receipts Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor. **Maven:** ```xml theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} com.stripe stripe-java {VERSION} ``` **Gradle:** ```gradle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation "com.stripe:stripe-java:{VERSION}" ``` Add the following dependency to your POM and replace with the version number you want to use. Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the `ElementsConsumer` instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an `Appearance` object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. Make sure to open the preview on the right to see your changes live. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server ``` Run the React app and go to localhost:3000/checkout. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the packages and import them in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the link in the code editor. **Install the libraries:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe @stripe/stripe-js next ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service through the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements through a class component, use the ElementsConsumer instead. Add the PaymentElement to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. Make sure to open the preview on the right to see your changes live. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the Next.js app. Go to localhost:3000 to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm run dev ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). Note: Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your Python server and go to your iOS simulator or device. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Apple Pay To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. #### Custom primary button color Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). Note: Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. In Xcode, select File > Add Package Dependencies... and enter [https://github.com/stripe/stripe-ios-spm](https://github.com/stripe/stripe-ios-spm) as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Payment customization options If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. Configure Apple Pay by setting the merchant ID and country code in the PaymentSheet configuration. Set a custom color for the primary button in the PaymentSheet configuration. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set NSCameraUsageDescription in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. Configure the shipping details in the PaymentSheet configuration to collect addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. In Xcode, select File > Add Package Dependencies... and enter [https://github.com/stripe/stripe-ios-spm](https://github.com/stripe/stripe-ios-spm) as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your ASP.NET MVC server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet run ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Payment customization options Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set NSCameraUsageDescription in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button color Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. Set `allowsDelayedPaymentMethods` to true to enable delayed payment methods. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Add the Google Pay API meta-data to your AndroidManifest.xml file. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. Customize the Payment Sheet appearance by configuring colors, fonts, and other visual properties. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect local and international addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your Python server and go to your Android simulator or device. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply setup\_future\_usage. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button color Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. Set `allowsDelayedPaymentMethods` to true to enable delayed payment methods. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Add the Google Pay API meta-data to your AndroidManifest.xml file. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. Customize the Payment Sheet appearance by configuring colors, fonts, and other visual properties. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect local and international addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your Python server and go to your Android simulator or device. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply setup\_future\_usage. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor. **Maven:** ```xml theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} com.stripe stripe-java {VERSION} ``` **Gradle:** ```gradle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation "com.stripe:stripe-java:{VERSION}" ``` Add the following dependency to your POM and replace with the version number you want to use. Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` Note: For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect local and international addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Browse sample projects Source: https://docs.sampleapp.ai/samples/library Explore the library of sample projects using Stripe. # Discord Source: https://docs.sampleapp.ai/social/discord # Events Source: https://docs.sampleapp.ai/social/events # LinkedIn Source: https://docs.sampleapp.ai/social/linkedin # Example: Stripe-like Guided Sandbox (Accept Payments with Stripe Checkout) Source: https://docs.sampleapp.ai/wide-samples/sandbox Build a checkout page with Payment Intents API # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Ruby server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} ruby server.rb ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Node server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your PHP server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} php -S 127.0.0.1:4242 --docroot=public ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Python server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your Go server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go run server.go ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your ASP.NET MVC server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet run ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor. **Maven:** ```xml theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} com.stripe stripe-java {VERSION} ``` **Gradle:** ```gradle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation "com.stripe:stripe-java:{VERSION}" ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from `js.stripe.com` to remain compliant. Don't include the script in a bundle or host it yourself. Add one empty placeholder `div` to your checkout form for each Element that you'll mount. Stripe inserts an iframe into each `div` to securely collect the customer's email address and payment information. Initialize Stripe.js with your publishable API key. You'll use Stripe.js to create the Payment Element and complete the payment on the client. **Note:** This is a public sample test API key. Don't submit any personally identifiable information in requests made with this key. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details. Create a `PaymentElement` and mount it to the placeholder `
` in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. ### ❸ Complete the payment on the client Listen to the form's submit event to know when to confirm the payment through the Stripe API. Call `confirmPayment` with the Element instance and a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run your server and go to `localhost:4242/checkout.html`. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add PaymentElement to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} ruby server.rb ``` Run the React app and go to localhost:3000/checkout. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an `Appearance` object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. **Make sure to open the preview on the right to see your changes live.** ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. **Note:** Parts of the preview demo might not match your actual checkout page. The above settings represent only a subset of the Appearance object's variables and the Appearance object only controls certain attributes of Stripe Elements. You're responsible for styling the rest of your checkout page. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to `localhost:3000/checkout` to see your checkout page. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} php -S 127.0.0.1:4242 --docroot=public ``` Run the React app and go to `localhost:3000/checkout`. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps #### Collect billing address details By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. **Note:** Parts of the preview demo might not match your actual checkout page. The above settings represent only a subset of the Appearance object's variables and the Appearance object only controls certain attributes of Stripe Elements. You're responsible for styling the rest of your checkout page. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to `localhost:3000/checkout` to see your checkout page. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` Run the React app and go to `localhost:3000/checkout`. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send email receipts Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the ElementsConsumer instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the return\_url. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the return\_url, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. **Run the server:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go run server.go ``` Run the React app and go to localhost:3000/checkout. **Run the client:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the `ElementsConsumer` instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet run ``` Run the React app and go to localhost:3000/checkout. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send email receipts Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor. **Maven:** ```xml theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} com.stripe stripe-java {VERSION} ``` **Gradle:** ```gradle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation "com.stripe:stripe-java:{VERSION}" ``` Add the following dependency to your POM and replace with the version number you want to use. Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The `clientSecret` returned by your endpoint is used to complete the payment. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements with a class component, use the `ElementsConsumer` instead. Add `PaymentElement` to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an `Appearance` object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. Make sure to open the preview on the right to see your changes live. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent_client_secret` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the React app and the server. Go to localhost:3000/checkout to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server ``` Run the React app and go to localhost:3000/checkout. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm start ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the packages and import them in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the link in the code editor. **Install the libraries:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe @stripe/stripe-js next ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout page on the client Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Call `loadStripe()` with your Stripe publishable API key to configure the Stripe library. Pass the resulting promise from `loadStripe` to the Elements provider. This allows the child components to access the Stripe service through the Elements consumer. Additionally, pass the client secret as an option to the Elements provider. Initialize some state to keep track of the payment, show errors, and manage the user interface. Access the Stripe library in your CheckoutForm component by using the `useStripe()` and `useElements()` hooks. If you need to access Elements through a class component, use the ElementsConsumer instead. Add the PaymentElement to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection. Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company's colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set. Make sure to open the preview on the right to see your changes live. ### ❸ Complete the payment on the client When your customer clicks the pay button, call `confirmPayment` with the PaymentElement and pass a `return_url` to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they're redirected to the `return_url`. If there are any immediate errors (for example, your customer's card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again. When Stripe redirects the customer to the `return_url`, the `payment_intent` query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer. ### ❹ Handle post-payment events Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the `payment_intent.succeeded`, `payment_intent.processing`, and `payment_intent.payment_failed` events. Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration. ### ❺ Test the integration Run the Next.js app. Go to localhost:3000 to see your checkout page. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm run dev ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Send an email receipt Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard. Add an input field to your payment form to collect the email address. Add a variable to keep track of the email the customer enters. Pass the provided email address as the `receipt_email` value. Stripe sends an email receipt when the payment succeeds in live mode (but won't send one in a sandbox). #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. ### Next steps By default, the Payment Element only collects the necessary billing address details. To collect a customer's full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element. Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). Note: Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. **Swift Package Manager:** In Xcode, select File > Add Package Dependencies… and enter `https://github.com/stripe/stripe-ios-spm` as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your Python server and go to your iOS simulator or device. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Apple Pay To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. #### Custom primary button color Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set `NSCameraUsageDescription` in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). Note: Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. In Xcode, select File > Add Package Dependencies... and enter [https://github.com/stripe/stripe-ios-spm](https://github.com/stripe/stripe-ios-spm) as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Payment customization options If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. Configure Apple Pay by setting the merchant ID and country code in the PaymentSheet configuration. Set a custom color for the primary button in the PaymentSheet configuration. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set NSCameraUsageDescription in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. Configure the shipping details in the PaymentSheet configuration to collect addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen's View Controller. In Xcode, select File > Add Package Dependencies... and enter [https://github.com/stripe/stripe-ios-spm](https://github.com/stripe/stripe-ios-spm) as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app's target. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your ASP.NET MVC server. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet run ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Payment customization options Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account's country code. Consider using a custom color for the primary button that better matches your brand or app's visual identity. Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set NSCameraUsageDescription in your application's Info.plist, and provide a reason for accessing the camera (for example, "To scan cards"). **Note:** Card scanning is only supported on devices running iOS 13 or higher. #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. Collect local and international shipping or billing addresses from your customers. ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button color Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. Set `allowsDelayedPaymentMethods` to true to enable delayed payment methods. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Add the Google Pay API meta-data to your AndroidManifest.xml file. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. Customize the Payment Sheet appearance by configuring colors, fonts, and other visual properties. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect local and international addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your Python server and go to your Android simulator or device. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply setup\_future\_usage. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe ruby gem and require it in your code. Alternatively, if you're starting from scratch and need a Gemfile, download the project files using the link in the code editor. **Terminal:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem install stripe ``` **Bundler (add to Gemfile):** ```ruby theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} gem 'stripe' ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button color Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package and import it in your code. Alternatively, if you're starting from scratch and need a package.json file, download the project files using the Download link in the code editor. **npm:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} npm install --save stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle (Groovy):** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the library with composer and initialize with your secret API key. Alternatively, if you're starting from scratch and need a composer.json file, download the files using the link in the code editor. **Composer:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} composer require stripe/stripe-php ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. Set `allowsDelayedPaymentMethods` to true to enable delayed payment methods. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Add the Google Pay API meta-data to your AndroidManifest.xml file. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. Customize the Payment Sheet appearance by configuring colors, fonts, and other visual properties. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect local and international addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the Stripe package and import it in your code. Alternatively, if you're starting from scratch and need a requirements.txt file, download the project files using the link in the code editor. **pip:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} pip3 install stripe ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration Run your Python server and go to your Android simulator or device. ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} python3 -m flask run --port=4242 ``` To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply setup\_future\_usage. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a go.mod file, download the project files using the link in the code editor. **Go:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} go get -u github.com/stripe/stripe-go/v84 ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Install the package with .NET or NuGet. Alternatively, if you're starting from scratch, download the files which contains a configured .csproj file. **dotnet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} dotnet add package Stripe.net ``` **NuGet:** ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} Install-Package Stripe.net ``` Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. **To install the SDK, add stripe-android to the dependencies block of your build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` **Note:** For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the PaymentSheet.Configuration struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration. #### Customize appearance Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. **To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect shipping or billing addresses Collect local and international shipping or billing addresses from your customers. **If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events. # Build a checkout page with Payment Intents API Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe's Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment. To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations. ### ❶ Set up the server Add the dependency to your build and import the library. Alternatively, if you're starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor. **Maven:** ```xml theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} com.stripe stripe-java {VERSION} ``` **Gradle:** ```gradle theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation "com.stripe:stripe-java:{VERSION}" ``` Add the following dependency to your POM and replace with the version number you want to use. Add an endpoint on your server that creates a `PaymentIntent`. A PaymentIntent tracks the customer's payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent's `client_secret` in the response to finish the payment on the client. Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location. ### ❷ Build a checkout screen on the client The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above. To install the SDK, add stripe-android to the dependencies block of your build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripe-android:22.6.1' ``` Note: For details on the latest SDK release and past versions, see the Releases page on GitHub. Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server. Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent's client secret returned by the server; the Payment Sheet uses this secret to complete the payment later. ### ❸ Complete the payment on the client Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller. Use the `PaymentSheet.Configuration` struct for customising the Payment Sheet. Use the completion block for handling the payment result. If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful. ### ❹ Test the integration To verify that your integration works, make a test payment using test payment details. **Payment succeeds** `4242 4242 4242 4242` **Payment requires authentication** `4000 0025 0000 3155` **Payment is declined** `4000 0000 0000 9995` Navigate to the Stripe Dashboard to see your test payment. ### Accept payments and enhance your integration You're ready to accept payments with Stripe. Continue with the steps below to add more features. #### Calculate and collect the right amount of tax Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration. Use the Stripe Tax API to calculate tax on the transaction. Provide the `currency`, `customer_details`, and the `line_items` of the order in the request body. Use the `tax_amount_exclusive` attribute of the resulting Tax Calculation to add the exclusive taxes to the order's total. Link the tax calculation to the PaymentIntent using `hooks[inputs][tax][calculation]`. This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions. #### Enable delayed payment methods Some payment methods can't guarantee that you'll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods. If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not. #### Enable Google Pay To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml. Enable Google Pay by passing a `PaymentSheet.GooglePayConfiguration` object with the Google Pay environment (production or test) and the country code of your business when initializing `PaymentSheet.Configuration`. #### Customize the primary button Consider using a custom color for the primary button that better matches your brand or app's visual identity. #### Enable card scanning Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.stripe:stripecardscan:22.6.1' ``` #### Save payment details after payment Often used by SaaS or e-commerce businesses with recurring customers. Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer. Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account. Pass the Account ID to the PaymentIntent and set `setup_future_usage` to `off_session`. `setup_future_usage` tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply `setup_future_usage`. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account. When you're ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the `off_session` and `confirm` flags to true. #### Collect local and international addresses Collect local and international shipping or billing addresses from your customers. If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file: **build.gradle:** ```groovy theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}} implementation 'com.google.android.libraries.places:places:2.6.0' ``` ### Next steps Learn how to move funds out of your Stripe account into your bank account. Handle requests for refunds by using the Stripe API or Dashboard. Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events.