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 UIs
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.

Save payment details during payment

Learn how to accept a payment and save your customer's payment details for future purchases.

Notiz

Support for saved payment methods using Elements and the Checkout Sessions API only includes cards. It doesn’t support other saved payment methods, such as bank accounts.

Enable saved payment methods

To allow a customer to save their payment method for future use, specify the saved_payment_method_options.payment_method_save parameter when creating the Checkout Session.

Saving a payment method requires a Customer. Pass an existing customer, or, to create a new customer, set the Checkout Session’s customer_creation to always.

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "line_items[0][price]"=
{{PRICE_ID}}
 \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer_creation=always \
  -d "saved_payment_method_options[payment_method_save]"=enabled

After you create the Checkout Session, use the client secret returned in the response to build your checkout page.

Collect consent

Vorsicht

Global privacy laws are complicated and nuanced. Before implementing the ability to store customer payment method details, work with your legal team to make sure that it complies with your privacy and compliance framework.

In most cases, you must collect a customer’s consent before you save their payment methods. The following example shows how to obtain consent using a checkbox.

ConsentCollection.jsx
import React from 'react';

type Props = {
  savePaymentMethod: boolean;
  onSavePaymentMethodChange: (save: boolean) => void;
}
const ConsentCollection = (props: Props) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSavePaymentMethodChange(e.target.checked);
  };
  return (
    <label>
      <input
        type="checkbox"
        checked={props.savePaymentMethod}
        onChange={handleChange}
      />
      Save my payment information for future purchases
    </label>
  );
};

export default ConsentCollection;

Indicate to Stripe whether your customer has provided consent when you call confirm by passing the savePaymentMethod parameter. When you save a customer’s payment details, you’re responsible for complying with all applicable laws, regulations, and network rules.

PayButton.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

type Props = {
  savePaymentMethod: boolean;
}
const PayButton = (props: Props) => {
  const {confirm} = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const handleClick = () => {
    setLoading(true);
    confirm({savePaymentMethod: props.savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;

Reuse a previously saved payment method

You can redisplay previously saved payment methods for your customer to use during checkout.

Identify your customer

Each saved payment method is linked to a Customer object. Before creating the Checkout Session, authenticate your customer, and pass the corresponding Customer ID to the Checkout Session.

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "line_items[0][price]"=
{{PRICE_ID}}
 \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer=
{{CUSTOMER_ID}}

Render saved payment methods

Use the savedPaymentMethods array on the front end to render the customer’s available payment methods.

Notiz

The savedPaymentMethods array includes only the payment methods that have allow_redisplay set to always. Follow the steps to collecting consent from your customer, which ensures that allow_redisplay is properly set.

PaymentMethods.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

type Props = {
  selectedPaymentMethod: string | null;
  onSelectPaymentMethod: (paymentMethod: string) => void;
};
const PaymentMethods = (props: Props) => {
  const {savedPaymentMethods} = useCheckout();

  const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSelectPaymentMethod(e.target.value);
  };

  return (
    <div>
      {savedPaymentMethods.map((pm) => (
        <label key={pm.id}>
          <input
            type="radio"
            value={pm.id}
            checked={props.selectedPaymentMethod === pm.id}
            onChange={handleOptionChange}
          />
          Card ending in {pm.card.last4}
        </label>
      ))}
    <div>
  );
};

export default PaymentMethods;

Confirm with a saved payment method

When your customer has selected a saved payment method and is ready to complete checkout, call confirm, passing in the paymentMethod ID.

PayButton.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

type Props = {
  selectedPaymentMethod: string | null;
}
const PayButton = (props: Props) => {
  const {confirm} = useCheckout();
  const [loading, setLoading] = React.useState(false);

  const handleClick = () => {
    setLoading(true);
    confirm({paymentMethod: props.selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
      setLoading(false);
    })
  };

  return (
    <button disabled={loading} onClick={handleClick}>
      Pay
    </button>
  )
};

export default PayButton;
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