Ein Abonnement per SEPA-Lastschriftverfahren einrichten

Produkte stehen für den von Ihnen angebotenen Artikel oder Dienst. Preise geben an, wie viel und wie häufig Sie für ein Produkt berechnen. Dies schließt ein, wie viel ein Produkt kostet, welche Währung Sie akzeptieren und ob es sich um eine einmalige oder eine wiederkehrende Zahlung handelt. Wenn Sie nur ein paar wenige Produkte und Preise haben, können Sie diese im Dashboard erstellen und verwalten.

In diesem Leitfaden wird ein Stock-Foto-Service als Beispiel verwendet, für den Kund/innen ein monatliches Abonnement mit dem Betrag von 15 EUR berechnet werden. Um dies zu modellieren:

1. Gehen Sie zur Seite Produkte und klicken Sie auf Produkt erstellen.
2. Geben Sie einen Namen für das Produkt an. Sie können optional eine Beschreibung hinzufügen und ein Bild des Produkts hochladen.
3. Wählen Sie einen Produktsteuercode aus. Erfahren Sie mehr über Produktsteuercodes.
4. Wählen Sie Wiederkehrend aus. Geben Sie im Anschluss daran 15 für den Preis ein und wählen Sie EUR als Währung aus.
5. Wählen Sie, ob die Steuer im Preis berücksichtigt werden soll. Sie können entweder den Standardwert aus Ihren Steuereinstellungen verwenden oder den Wert manuell festlegen. Wählen Sie in diesem Beispiel Auto aus.
6. Wählen Sie Monatlich als Abrechnungszeitraum aus.
7. Klicken Sie auf Weitere Preisoptionen. Wählen Sie dann Pauschalpreis als Preismodell für dieses Beispiel aus. Erfahren Sie mehr über Pauschalpreise und andere Preismodelle.
8. Fügen Sie eine interne Preisbeschreibung und einen Lookup-Schlüssel hinzu, um bestimmte Preise in Zukunft zu organisieren, abzufragen und zu aktualisieren.
9. Klicken Sie auf Weiter. Klicken Sie dann auf Produkt hinzufügen.

Zeichnen Sie nach Erstellen des Produkts und des Preises die Preis-ID auf, sodass Sie diese in nachfolgenden Schritten verwenden können. Die ID wird auf der Preisseite angezeigt und sieht in etwa so aus: price_G0FvDp6vZvdwRZ.

Ein Abonnement benötigt einen Kunden/eine Kundin, sodass Zahlungsmethoden wiederverwendet und wiederkehrende Zahlungen nachverfolgt werden können. Erstellen Sie ein Customer-Objekt, wenn Ihr Kunde/Ihre Kundin ein Konto bei Ihrem Unternehmen einrichtet.

curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

Erstellen Sie das Abonnement mit den Kunden- und Preis-IDs. Geben Sie clientseitig das client_secret entweder aus dem confirmation_secret.client_secret der letzten Rechnung oder, für Abonnements, bei denen keine Zahlung im Voraus erforderlich ist, aus dem pending_setup_intent zurück. Legen Sie außerdem Folgendes fest:

• payment_behavior auf default_incomplete, um die Erfassung des SEPA-Lastschriftmandats zu vereinfachen.
• save_default_payment_method auf on_subscription, um die Zahlungsmethode als Standard für das Abonnement zu speichern, wenn die Zahlung erfolgreich ist. Durch das Speichern einer Standardzahlungsmethode wird die Erfolgsquote zukünftiger Abonnementzahlungen erhöht.

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/create-subscription' do
  content_type 'application/json'
  data = JSON.parse(request.body.read)
  customer_id = cookies[:customer]
  price_id = data['priceId']

  subscription = Stripe::Subscription.create(
    customer: customer_id,
    items: [{
      price: price_id,
    }],
    payment_behavior: 'default_incomplete',
    payment_settings: {save_default_payment_method: 'on_subscription'},
    expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
  )

  if subscription.pending_setup_intent != nil
    { type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
  else
    { type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
  end
end

Sie können jetzt mit Stripe Elements Zahlungsinformationen auf dem Client erfassen. Elements beinhaltet vorgefertigte Komponenten der Nutzeroberfläche zur Erfassung von Zahlungsdetails.

Ein Stripe Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss ebenfalls mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert.

Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber aktivieren, bevor Sie Ihre ersten Live-Zahlungen empfangen.

Stripe Elements einrichten

<head>
  <title>Submit Payment</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

<form action="/form" method="post" id="setup-form">
  <div class="form-row inline">
    <div class="col">
      <label for="accountholder-name">
        Name
      </label>
      <input
        id="accountholder-name"
        name="accountholder-name"
        placeholder="Jenny Rosen"
        required
      />
    </div>

    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="jenny.rosen@example.com"
        required
      />
    </div>
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    -->
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <!-- Add the client_secret from the SetupIntent as a data attribute   -->
  <button id="submit-button" data-secret="{CLIENT_SECRET}">
    Set up SEPA Direct Debit
  </button>

  <!-- Display mandate acceptance text. -->
  <div id="mandate-acceptance">
    By providing your payment information and confirming this payment, you
    authorise (A) Rocket Rides and Stripe, our payment service provider
    and/or PPRO, its local service provider, to send instructions to your
    bank to debit your account and (B) your bank to debit your account in
    accordance with those instructions. As part of your rights, you are
    entitled to a refund from your bank under the terms and conditions of
    your agreement with your bank. A refund must be claimed within 8 weeks
    starting from the date on which your account was debited. Your rights
    are explained in a statement that you can obtain from your bank. You
    agree to receive notifications for future debits up to 2 days before
    they occur.
  </div>
  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  },
};

const options = {
  style,
  supportedCountries: ['SEPA'],
  // Elements can use a placeholder as an example IBAN that reflects
  // the IBAN format of your customer's country. If you know your
  // customer's country, we recommend passing it to the Element as the
  // placeholderCountry.
  placeholderCountry: 'DE',
};

// Create an instance of the IBAN Element
const iban = elements.create('iban', options);

// Add an instance of the IBAN Element into the `iban-element` <div>
iban.mount('#iban-element');

Verwenden Sie confirmSepaDebitPayment oder, für Abonnements, bei denen keine Zahlung im Voraus erfasst wird, confirmSepaDebitSetup, um das Abonnement zu bestätigen und eine PaymentMethod SEPA-Lastschrift zu erstellen. Fügen Sie den Namen und die E-Mail-Adresse des Kunden/der Kundin in die Eigenschaften payment_method.billing_details ein.

// Define stripe with your publishable key
var stripe = Stripe('pk_test_1234');

// Get the IBAN information from your element
var iban = document.getElementById('iban-element');

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');

form.addEventListener('submit', async(event) => {
  event.preventDefault();
  // Create the subscription
  const res = await fetch('/create-subscription', {
    method: 'POST',
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === 'setup' ? stripe.confirmSepaDebitSetup : stripe.confirmSepaDebitPayment;

  const {error} = await confirmIntent({
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  });
});

Sie müssen Ihren Kund/innen eine gespeicherte Zahlungsmethode hinzufügen, damit zukünftige Zahlungen erfolgreich sind. Hierfür wird die zuvor erfasste Zahlungsmethode auf das übergeordnete Customer-Objekt und als Standard-Zahlungsmethode für Rechnungen festgelegt:

curl https://api.stripe.com/v1/customers/cus_Gk0uVzT2M4xOKD \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "invoice_settings[default_payment_method]"=pm_1F0c9v2eZvKYlo2CJDeTrB4n

Sofern die erste Zahlung erfolgreich war, ist der Status des Abonnements active und es sind keine weiteren Schritte erforderlich. Wenn Zahlungen fehlschlagen, wird der Status in den in Ihren Einstellungen für die automatische Abrechnung konfigurierten Abonnementstatus geändert. Sie sollten Kundinnen/Kunden beim Fehlschlagen einer Zahlung benachrichtigen und die Zahlung mit einer anderen Zahlungsmethode abwickeln.

Sie können Ihre Integration unter Verwendung der unten aufgeführten IBANs testen. Die Zahlungsmethodendetails werden für jede IBAN erfolgreich erfasst, weisen jedoch bei Abbuchung ein unterschiedliches Verhalten auf.

Test-IBANs