Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case finden
Zahlungsmethoden
Payment interfaces
Payment scenarios
Persönliche Zahlungen
Other Stripe products

Notiz

Bis jetzt ist diese Seite noch nicht in dieser Sprache verfügbar. Wir arbeiten aber verstärkt daran, unsere Dokumentation in weiteren Sprachen bereitzustellen, und werden die Übersetzung sofort anzeigen, sobald diese verfügbar ist.

Build a checkout pageBeta

Learn how to use Elements and Custom Checkout to build a checkout page.

Private Vorschau

The Custom Checkout integration is in private preview. To request access, click here.

You can build a custom checkout page on your website using Stripe Elements and Custom Checkout, a front-end SDK that manages tax, discounts, shipping rates, and so on.

Set up the server
Server-side

Before you begin, you need to register for a Stripe account.

Use the official Stripe libraries to access the API from your application.

Command Line
npm install stripe@16.8.0-beta.1 --save

Set the SDK to use the custom_checkout_beta=v1 beta version header.

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = Stripe(
'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
, {
  apiVersion: '2024-11-20.acacia; custom_checkout_beta=v1' as any,
});

Initialize a Checkout Session
Server-side

Add an endpoint on your server that creates a Checkout Session object and returns its client secret to your front-end.

A Checkout Session represents your customer’s session as they pay for one-time purchases or subscriptions. Checkout Sessions expire 24 hours after creation.

server.ts
import Express from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: '{{RETURN_URL}}'
  });

  res.json({clientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

For more details about creation parameters, see create a Checkout Session.

Set up the front end
Client-side

Install React Stripe.js and the Stripe.js loader from the npm public registry. You need at least version 2.7.2 for React Stripe.js and version 4.9.0 for the Stripe.js loader.

Command Line
npm install --save @stripe/react-stripe-js@^2.7.2 @stripe/stripe-js@^4.9.0

Initialize a stripe instance on your front end with your publishable key, passing in the custom_checkout_beta_4 beta.

App.jsx
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe(
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, {
  betas: ['custom_checkout_beta_4'],
});

Retrieve the clientSecret from your server and wrap your application with the CustomCheckoutProvider component.

Use the useCustomCheckout hook in your components to get the checkout object, which contains data from the Checkout Session as well as methods to update it. For now, render the line items as text and log the checkout object to the console to see what’s available.

App.jsx
import React from 'react';
import {CustomCheckoutProvider} from '@stripe/react-stripe-js';

const App = ({clientSecret}) => {
  const [clientSecret, setClientSecret] = React.useState(null);
  React.useEffect(() => {
    fetch('/create-checkout-session', {method: 'POST'})
      .then((response) => response.json())
      .then((json) => setClientSecret(json.clientSecret))
  });

  if (clientSecret) {
    return (
      <CustomCheckoutProvider
        stripe={stripe}
        options={{clientSecret}}
      >
        <CheckoutForm />
      </CustomCheckoutProvider>
    );
  } else {
    return null;
  }
};

export default App;
CheckoutForm.jsx
import React from 'react';
import {useCustomCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCustomCheckout();
  console.log(checkout);
  return (
    <pre>
      {JSON.stringify(checkout.lineItems, null, 2)}
    </pre>
  )
};

Next steps

War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unseren Produkt-Changelog an.
Fragen? Sales-Team kontaktieren.
Unterstützt von Markdoc
Auf dieser Seite
Set up the server
Initialize a Checkout Session
Set up the front end
Next steps
Verwendete Produkte
Checkout
Elements