Zahlungsmethode eines Kunden/einer Kundin speichern, wenn er/sie diese für eine Zahlung verwendet

Verwenden Sie die Checkout Sessions API, um Zahlungsdetails während eines Kaufs zu speichern. Dies ist nützlich für Situationen wie:

• Belasten Sie ein Kundenkonto für eine E-Commerce-Bestellung und speichern Sie die Zahlungsdetails für zukünftige Einkäufe.
• Erste Zahlung einer Reihe wiederkehrender Zahlungen initiieren.
• Abbuchung einer Anzahlung und Speicherung der Zahlungsdetails, um später den vollen Betrag abzubuchen.

Compliance

Sie sind dafür verantwortlich, dass Sie alle geltenden Gesetze, Vorschriften und Netzwerkregeln einhalten, wenn Sie Zahlungsdetails auf Kundenseite speichern. Diese Anforderungen gelten in der Regel, wenn Sie Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung speichern möchten. Ein Beispiel wäre, wenn Sie die kundenseitig bevorzugte Zahlungsmethode im Bezahlvorgang für einen zukünftigen Kauf anzeigen oder das Kundenkonto belasten möchten, wenn Kundinnen und Kunden Ihre Website oder App zu dem Zeitpunkt nicht aktiv nutzen. Fügen Sie Nutzungsbedingungen zu Ihrer Website oder App hinzu, aus denen hervorgeht, wie Sie die Zahlungsdetails speichern möchten, und lassen Sie Kundinnen und Kunden aktiv zu diesen zustimmen.

Wenn Sie eine Zahlungsmethode speichern, können Sie diese nur für die in Ihren Konditionen vereinbarte Nutzung verwenden. Um eine Zahlungsmethode belasten zu können, wenn Kundinnen und Kunden offline sind, und diese Option auch für zukünftige Einkäufe zu speichern, müssen Sie explizit die kundenseitige Zustimmung einholen. Fügen Sie beispielsweise ein Kontrollkästchen mit dem Titel „Meine Zahlungsmethode für die zukünftige Verwendung speichern“ ein, um die Einwilligung zu erhalten.

Um Kundenkonten zu belasten, wenn die Kund/innen offline sind, fügen Sie unbedingt Folgendes in Ihre Konditionen ein:

• Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten.
• Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abo-Zahlungen oder für außerplanmäßige Aufstockungen).
• Wie Sie den Zahlbetrag ermitteln.
• Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abo-Dienst ist.

Dokumentieren Sie unbedingt die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu diesen Bedingungen.

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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

const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
    }
  }
});

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

const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableRedisplay: 'auto',
    }
  }
});

const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      enableSave: 'never',
      enableRedisplay: 'never',
    }
  }
});

<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

const checkout = stripe.initCheckout({clientSecret});
const button = document.getElementById('pay-button');
const errors = document.getElementById('confirm-errors');
const checkbox = document.getElementById('save-payment-method-checkbox');
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    actions.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

<div id="saved-payment-methods"></div>

const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}

<button id="pay-button">Pay</button>

const checkout = stripe.initCheckout({clientSecret});

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}