# Zahlungen mit Alma annehmen Erfahren Sie, wie Sie Ihre Integration mit Alma einrichten können. # Checkout > This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/alma/accept-a-payment?payment-ui=checkout. > Stripe kann Ihren Kundinnen und Kunden automatisch die relevanten Zahlungsmethoden anzeigen, indem Währungen, Einschränkungen der Zahlungsmethode und andere Parameter ausgewertet werden. > > - Befolgen Sie den Leitfaden [Eine Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted), um eine Checkout-Integration zu erstellen, die [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) verwendet. - Wenn Sie keine dynamischen Zahlungsmethoden verwenden möchten, befolgen Sie die folgenden Schritte, um die Zahlungsmethoden in Ihrer Checkout-Integration manuell zu konfigurieren. Bei Alma handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen in 2, 3 oder 4 Raten begleichen können. Bei Alma werden Kundinnen/Kunden zur Autorisierung der Zahlungen von Ihrer Website oder App weitergeleitet und dann wieder auf Ihre Website bzw. App zurückgeleitet. Dort werden Sie [sofort benachrichtigt](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ob die Zahlung erfolgreich war oder fehlgeschlagen ist. ## Kompatibilität ermitteln Für die Unterstützung von Zahlungen über Alma muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen: - Die *Preise* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) für alle Posten müssen in der gleichen Währung angegeben werden. - Wenn Sie mehrere Posten in der verschiedenen Währungen haben, erstellen Sie getrennte Checkout-Sitzungen für jede Währung. ## Zahlung annehmen > Erstellen Sie zunächst eine Integration, um mit Checkout [Zahlungen anzunehmen](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout), bevor Sie mit diesem Leitfaden fortfahren. Das führt Sie durch die Aktivierung von Alma und zeigt die Unterschiede zwischen dem Akzeptieren von Zahlungen mit dynamischen Zahlungsmethoden und dem manuellen Konfigurieren von Zahlungsmethoden. ### Alma als Zahlungsmethode aktivieren Führen Sie bei der Erstellung einer neuen [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) folgende Schritte aus: 1. Fügen Sie `alma` zur Liste der `payment_method_types` hinzu. 1. Stellen Sie sicher, dass alle `line_items` die gleiche Währung verwenden. #### Von Stripe gehostete Seite ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=eur" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=alma" \ --data-urlencode "success_url=https://example.com/success" ``` #### Eingebettetes Formular ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]=eur" \ -d "line_items[0][price_data][product_data][name]=T-shirt" \ -d "line_items[0][price_data][unit_amount]=2000" \ -d "line_items[0][quantity]=1" \ -d mode=payment \ -d "payment_method_types[0]=card" \ -d "payment_method_types[1]=alma" \ --data-urlencode "return_url=https://example.com/return" \ -d ui_mode=embedded_page ``` ### Abwicklung Ihrer Bestellungen Informieren Sie sich über die [Ausführung von Bestellungen](https://docs.stripe.com/checkout/fulfillment.md), nachdem Sie eine Zahlung angenommen haben. ## Integration testen Wählen Sie beim Testen Ihrer Checkout-Integration Alma als Zahlungsmethode aus und klicken Sie auf die Schaltfläche **Bezahlen**. ![](https://b.stripecdn.com/docs-statics-srv/assets/merchant_checkout_alma_visible.267e88e1e3ef1ac2708a9f5d39292f78.png) ## See also - [Weitere Informationen zu Alma](https://docs.stripe.com/payments/alma.md) - [Checkout-Ausführung](https://docs.stripe.com/checkout/fulfillment.md) - [Checkout anpassen](https://docs.stripe.com/payments/checkout/customization.md) # Elements > This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/alma/accept-a-payment?payment-ui=elements. Verwenden Sie [Payment Elements](https://docs.stripe.com/payments/payment-element.md), um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten. Payment Elements ermöglicht es Ihnen, Alma und andere Zahlungsmethoden automatisch zu unterstützen. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungannahme](https://docs.stripe.com/payments/accept-a-payment.md) ## Stripe einrichten [Serverseitig] [Erstellen Sie ein Stripe-Konto](https://dashboard.stripe.com/register), um direkt anzufangen. Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## PaymentIntent erstellen [Serverseitig] Stripe verwendet ein [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert. #### Zahlungsmethoden über das Dashboard verwalten Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe die Funktionalität standardmäßig aktiviert. Sie können Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe der in Frage kommenden Zahlungsmethoden anhand von Faktoren wie Transaktionsbetrag, Währung und Zahlungsablauf. Stellen Sie sicher, dass **Alma** in den [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) aktiviert ist. Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass böswillige Kund/innen ihre eigenen Preise festlegen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=5099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" ``` In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe seine Funktionalität standardmäßig aktiviert. #### Zahlungsmethoden manuell auflisten Wenn Sie das Dashboard nicht nutzen oder die Zahlungsmethoden manuell angeben möchten, können Sie diese mit dem Attribut `payment_method_types` auflisten. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Zahlungsmethoden. Entscheiden Sie immer auf Server-Seite, die im Gegensatz zur Client-Seite vertrauenswürdig ist, wie viel berechnet werden soll. Dadurch wird verhindert, dass böswillige Kund/innen ihre eigenen Preise wählen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=5099 \ -d currency=eur \ -d "payment_method_types[]=alma" ``` ### Client-Geheimnis abrufen Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Zahlungsdetails erfassen [Clientseitig] Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein. Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS ### Stripe.js einrichten Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den `head` Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon. ```html Checkout ``` Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Payment Element Ihrer Bezahlseite hinzufügen Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular: ```html
``` Wenn das vorherige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem DOM-Knoten (Container). Übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt an `options`, wenn Sie die [Elements](https://docs.stripe.com/js/elements_object/create)-Instanz erstellen: Gehen Sie sorgfältig mit dem Client-Geheimnis um, denn es kann die Zahlung abschließen. Protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nur dem/der Kund/in preis. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Optional: Autofill user's saved payment methods. If the customer's // email is known when the page is loaded, you can pass the email // to the linkAuthenticationElement on mount: // // linkAuthenticationElement.mount("#link-authentication-element", { // defaultValues: { // email: 'jenny.rosen@example.com', // } // }) // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Stripe.js einrichten Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Den Elements-Anbieter zu Ihrer Zahlungsseite hinzufügen und konfigurieren Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. Übergeben Sie auch das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt als `options` an den `Elements`-Anbieter. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Payment Element hinzufügen Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
// Optional: Autofill user's saved payment methods. If the customer's // email is known when the page is loaded, you can pass the email // to the linkAuthenticationElement // // ); }; export default CheckoutForm; ``` ## Zahlung an Stripe senden [Clientseitig] Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur `return_url` weitergeleitet werden. Kartenzahlungen werden sofort zur `return_url` weitergeleitet, wenn eine Zahlung erfolgreich war. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) über die Komponente Ihres Zahlungsformulars aufzurufen. Wenn Sie herkömmliche Klassenkomponenten gegenüber Hooks bevorzugen, können Sie stattdessen einen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden. ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` Achten Sie darauf, dass die `return_url` auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die `return_url` weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit: | Parameter | Beschreibung | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für die `PaymentIntent`. | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. | > Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain `stripe.com` zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen. Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den [Status des PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md), um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## Transaktionen umleiten und authentifizieren Kundinnen/Kunden können Transaktionen per Alma mit der mobilen App oder der Desktop-App authentifizieren. Der kundenseitig verwendete Client bestimmt die Authentifizierungsmethode, nachdem `confirmPayment` aufgerufen wurde. #### Authentifizierung mittels mobiler Apps Nachdem `confirmPayment` aufgerufen wurde, werden die Kundinnen/Kunden zu Alma weitergeleitet, um die Zahlung zu genehmigen oder abzulehnen. Nachdem die Zahlung kundenseitig autorisiert wurde, leitet Stripe sie zur `return_url` des Payment Intent weiter. Stripe fügt `payment_intent`, `payment_intent_client_secret`, `redirect_pm_type` und `redirect_status` als URL-Abfrageparameter hinzu (zusätzlich zu allen vorhandenen Abfrageparametern in `return_url` ). Eine Authentifizierungssitzung läuft nach 1 Stunde ab und dann wechselt der Status des PaymentIntent wieder auf `require_payment_method`. Nach der Statusänderung sehen Kundinnen/Kunden einen Zahlungsfehler und müssen den Bezahlvorgang von vorne beginnen. #### Authentifizierung über Desktop-Web-App Nachdem „confirmPayment“ aufgerufen wurde, wird ein QR-Code auf der Webseite angezeigt. Ihre Kundinnen/Kunden können den QR-Code mit der Kamera ihres Mobilgeräts oder der mobilen Alma-App scannen und die Zahlung mit Alma authentifizieren. Ein paar Sekunden nach der erfolgreichen Authentifizierung der Zahlung durch die Kundinnen/Kunden wird das QR-Code-Modal automatisch geschlossen und Sie können die Bestellung ausführen. Stripe nimmt eine Weiterleitung zur `return_url` vor, wenn die Zahlung abgeschlossen ist. Wenn Sie nach Zahlungsabschluss keine webbasierte Weiterleitung vornehmen möchten, übergeben Sie `redirect: if_required` an das Payment Element. Eine Authentifizierungssitzung läuft nach 1 Stunde ab. Sie können den QR-Code bis zu 20 Mal aktualisieren, bevor der Status des PaymentIntent wieder auf `require_payment_method` wechselt. Nach der Statusänderung sehen Kundinnen/Kunden einen Zahlungsfehler und müssen den Bezahlvorgang von vorne beginnen. ## Optional: Separate Autorisierung und Erfassung Sie können Autorisierung und Erfassung trennen, um eine Zahlung sofort zu erstellen, Gelder jedoch erst später zu erfassen. Stripe storniert den PaymentIntent und sendet das Ereignis [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled), wenn die Zahlung nicht innerhalb des 7-tägigen Zeitfensters erfasst wird. Wenn Sie wissen, dass Sie die Zahlung nicht erfassen können, sollten Sie [den PaymentIntent stornieren](https://docs.stripe.com/refunds.md#cancel-payment) und nicht warten, bis das Zeitfenster von 7 Tagen abgelaufen ist. ### Stripe anweisen, nur die Autorisierung durchzuführen Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) beim Erstellen des PaymentIntent auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf dem Alma-Konto der Kundin/des Kunden zu autorisieren. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=5099 \ -d confirm=true \ -d currency=eur \ -d "payment_method_types[]=alma" \ -d "payment_method_data[type]=alma" \ -d capture_method=manual \ --data-urlencode "return_url=https://www.example.com/checkout/done" ``` ### Die Gelder erfassen Nach erfolgreicher Autorisierung wechselt der [Status des PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) zu `requires_capture`. Um die autorisierten Gelder zu erfassen, führen Sie eine [Erfassungsanfrage](https://docs.stripe.com/api/payment_intents/capture.md) für den PaymentIntent durch. ```curl curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \ -u "<>:" ``` Stripe erfasst den autorisierten Gesamtbetrag standardmäßig. Sie können auch angeben, dass `amount_to_capture` kleiner oder gleich der Summe ist. ### (Optional) Autorisierung stornieren Wenn Sie eine Autorisierung stornieren müssen, können Sie den [PaymentIntent stornieren](https://docs.stripe.com/api/payment_intents/cancel.md). ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren. ## Integration testen Um Ihre Integration zu testen, wählen Sie als Zahlungsmethode Alma und tippen Sie auf **Pay**. In einer Sandbox werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können. Wenn Sie im Live-Modus auf **Bezahlen** tippen, werden Sie zur Website von Alma weitergeleitet. Mit Alma haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen. ## Fehlgeschlagene Zahlungen Alma verwendet mehrere Datenpunkte, um zu entscheiden, wann eine Transaktion abgelehnt wird (zum Beispiel hat das KI-Modell ein hohes Verbraucherbetrugsrisiko für die Transaktion festgestellt oder der Verbraucher/die Verbraucherin hat die Zustimmung zur Abbuchung über Alma widerrufen). In diesen Fällen wird die [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) getrennt und der Status des [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md)-Objekts wechselt automatisch zu `requires_payment_method`. Anders als bei einer abgelehnten Zahlung müssen Kundinnen/Kunden bei einem Alma-[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) mit dem Status `requires_action` die Zahlung innerhalb von 1 Stunde nach der Weiterleitung zur Alma-Website abschließen. Wenn nach 1 Stunde keine Aktion erfolgt ist, wird die [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) getrennt, und der Status des [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md)-Objekts wechselt automatisch zu `requires_payment_method`. In diesem Fall zeigt das Payment Element Fehlermeldungen an und fordert Ihre Kundinnen/Kunden auf, es mit einer anderen Zahlungsmethode erneut zu versuchen. ## Fehlercodes In der folgenden Tabelle finden Sie häufige Fehlercodes und die empfohlenen Maßnahmen: | Fehlercode | Empfohlene Maßnahme | | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent_invalid_currency` | Geben Sie die korrekte Währung ein. Alma unterstützt nur `eur`. | | `missing_required_parameter` | In der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter. | | `payment_intent_payment_attempt_failed` | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent angezeigt werden. Eine genauere Fehlerursache und Vorschläge zur Fehlerbehebung finden Sie in der Fehlermeldung. | | `payment_intent_redirect_confirmation_without_return_url` | Geben Sie eine `return_url` an, wenn Sie einen PaymentIntent mit Alma bestätigen. | # Direct API > This is a Direct API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/alma/accept-a-payment?payment-ui=direct-api. Bei Alma handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen in 2, 3 oder 4 Raten begleichen können. Bei Alma werden Kundinnen/Kunden zur Autorisierung der Zahlungen von Ihrer Website oder App weitergeleitet und dann wieder auf Ihre Website bzw. App zurückgeleitet. Dort werden Sie [sofort benachrichtigt](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ob die Zahlung erfolgreich war oder fehlgeschlagen ist. ## Stripe einrichten [Serverseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## PaymentIntent erstellen [Serverseitig] Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht darstellt, eine Zahlung von Ihrem Kunden/Ihrer Kundin einzuziehen und den Lebenszyklus des Zahlungsvorgangs verfolgt. Erstellen Sie einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden Betrag und eine [unterstützte Währung](https://docs.stripe.com/payments/alma.md#supported-currencies) an. Wenn Sie über eine bestehende [Payment Intents](https://docs.stripe.com/payments/payment-intents.md)-Integration verfügen, fügen Sie `alma` der Liste der [Arten der Zahlungsmethoden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) hinzu. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d "payment_method_types[]=alma" \ -d amount=5099 \ -d currency=eur ``` Der `PaymentIntent` enthält ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). Senden Sie das Client-Geheimnis an Ihren Client, um Zahlungen sicher abzuschließen, anstatt das gesamte `PaymentIntent`-Objekt zu übergeben. ### Client-Geheimnis abrufen Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Weiterleiten zu Alma [Clientseitig] Wenn Kundinnen/Kunden über das „Click to Pay“-Verfahren mit Alma bezahlen, verwenden Sie Stripe.js, um die Zahlungen an Stripe zu übermitteln. [Stripe.js](https://docs.stripe.com/payments/elements.md) ist die grundlegende JavaScript-Bibliothek für die Erstellung von Zahlungsabläufen. Sie verarbeitet automatisch komplexe Szenarien wie die nachfolgend beschriebene Weiterleitung und ermöglicht die Erweiterung Ihrer Integration durch zusätzliche Zahlungsmethoden. Binden Sie das Stripe.js-Skript in Ihre Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen. ```html Checkout ``` Erstellen Sie auf Ihrer Checkout-Seite mit dem folgenden JavaScript eine Instanz von Stripe.js. ```javascript // Set your publishable key. Remember to change this to your live publishable key in production! // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` Verwenden Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent` und rufen Sie `stripe.confirmPayment` auf, um die Alma-Weiterleitung zu verarbeiten. Fügen Sie eine `return_url` hinzu, um festzulegen, wohin Stripe Kundinnen/Kunden weiterleitet, nachdem sie ihre Zahlung abgeschlossen haben. ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async function(event) { event.preventDefault(); // Set the clientSecret of the PaymentIntent const { error } = await stripe.confirmPayment({ clientSecret: clientSecret, confirmParams: { payment_method_data: { type: 'alma', }, // Return URL where the customer should be redirected after the authorization return_url: `${window.location.href}`, }, }); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('error-message'); errorElement.textContent = result.error.message; } }); ``` Die `return_url` verweist auf eine Seite auf Ihrer Website, auf der das Ergebnis der Zahlung angezeigt wird. Durch [Verifizieren des Status](https://docs.stripe.com/payments/payment-intents/verifying-status.md#checking-status) des `PaymentIntent` können Sie festlegen, was angezeigt werden soll. Zur Verifizierung des Status enthält die Stripe-Weiterleitung zu der `return_url` die folgenden URL-Abfrageparameter. Sie können auch Ihre eigenen Abfrageparameter an die `return_url` anhängen. Diese bleiben während des gesamten Weiterleitungsprozesses bestehen. | Parameter | Beschreibung | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | Die eindeutige ID für den `PaymentIntent`. | | `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. | ## Optional: Weiterleitung manuell verarbeiten [Serverseitig] Wir empfehlen, die Verarbeitung von Weiterleitungen mit `confirmPayment` Stripe.js zu überlassen. Wenn Sie Ihre Kundinnen/Kunden jedoch manuell weiterleiten müssen: 1. Geben Sie die URL an, an die Ihre Kundinnen/Kunden weitergeleitet werden sollen, sobald sie ihre Zahlung abgeschlossen haben. ```curl curl https://api.stripe.com/v1/payment_intents/pi_1DRuHnHgsMRlo4MtwuIAUe6u/confirm \ -u "<>:" \ -d payment_method=pm_1EnPf7AfTbPYpBIFLxIc8SD9 \ --data-urlencode "return_url=https://shop.example.com/crtA6B28E1" ``` 1. Bestätigen Sie, dass der `PaymentIntent` den Status `requires_action` hat. Der Typ für die `next_action` ist [redirect_to_url](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-redirect_to_url). ```json "next_action": { "type": "redirect_to_url", "redirect_to_url": { "url": "https://hooks.stripe.com/...", "return_url": "https://example.com/checkout/complete" } } ``` 1. Leiten Sie Kundinnen/Kunden an die in der Eigenschaft `next_action` angegebene URL weiter. Bei Abschluss des Bezahlvorgangs werden die Kundinnen/Kunden an das Ziel `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten und Sie können wie oben beschrieben Ihre eigenen Abfrageparameter übergeben. ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). ### Ereignisse empfangen und Geschäftsaktionen ausführen Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen. #### Manuell Verwenden Sie das Stripe-Dashboard, um alle Stripe-Zahlungen anzuzeigen, Zahlungsbelege per E-Mail zu senden, Auszahlungen abzuwickeln oder fehlgeschlagene Zahlungen erneut durchzuführen. - [Testzahlungen im Dashboard anzeigen](https://dashboard.stripe.com/test/payments) #### Benutzerdefinierter Code Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben. - [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) #### Vorgefertigte Apps Verarbeiten Sie häufige Geschäftsereignisse, wie [Automatisierung](https://stripe.partners/?f_category=automation) oder [Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales) durch Integration einer Partneranwendung. ## Unterstützte Währungen Sie können Alma-Zahlungen in den Währungen erstellen, die Ihrem Land zugeordnet sind. Die lokale Standardwährung für Alma ist `eur` und auch Kundinnen/Kunden wird ihr Kaufbetrag in `eur` angezeigt. | Währung | Land | | ------- | ------------------------------------------------------------- | | `eur` | Frankreich, Italien, Spanien, Niederlande, Belgien, Luxemburg | # iOS > This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/alma/accept-a-payment?payment-ui=mobile&platform=ios. Verwenden Sie das [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?=ios). Dabei handelt es sich um ein einbettbares Zahlungsformular, über das Sie Alma und weitere Zahlungsmethoden mit wenig Aufwand zu Ihrer Integration hinzufügen können. Bei Alma handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen in 2, 3 oder 4 Raten begleichen können. Bei Alma werden Kundinnen/Kunden zur Autorisierung der Zahlungen von Ihrer Website oder App weitergeleitet und dann wieder auf Ihre Website bzw. App zurückgeleitet. Dort werden Sie [sofort benachrichtigt](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ob die Zahlung erfolgreich war oder fehlgeschlagen ist. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 13 oder höher unterstützen. #### Swift Package Manager Führen Sie zur Installation des SDK die folgenden Schritte aus: 1. Wählen Sie in Xcode **Datei** > **Add Package Dependencies** (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL `https://github.com/stripe/stripe-ios-spm` ein. 1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus. 1. Fügen Sie das Produkt **StripePaymentsUI** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu. #### CocoaPods 1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen: ```bash pod init ``` 1. Fügen Sie folgende Zeile in Ihre `Podfile` ein: ```podfile pod 'StripePaymentsUI' ``` 1. Führen Sie folgenden Befehl aus: ```bash pod install ``` 1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden. 1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus: ```bash pod update StripePaymentsUI ``` #### Carthage 1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein: ```cartfile github "stripe/stripe-ios" ``` 1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten. 1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus: ```bash carthage update stripe-ios --platform ios ``` #### Manuelles Framework 1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei. 1. Ziehen Sie **StripePaymentsUI.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig). 1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks. 1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3. > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/test/apikeys) von Stripe, um es beim Start der App auszuführen. Dadurch kann Ihre App Anfragen an die Stripe-API senden. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## PaymentIntent erstellen [Serverseitig] [Clientseitig] ### Serverseitig Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert. > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass Kundinnen und Kunden ihre eigenen Preise festlegen können. #### Zahlungsmethoden im Dashboard verwalten Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Erstellen Sie auf Ihrem Server einen PaymentIntent mit einem Betrag und einer Währung. Bevor Sie den PaymentIntent erstellen, müssen Sie unbedingt **Alma** auf der Seite mit den [Einstellungen der Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) aktivieren. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` #### Zahlungsmethoden manuell auflisten Wenn Sie das Dashboard nicht nutzen oder die Zahlungsmethoden manuell angeben möchten, können Sie diese mit dem Attribut `payment_method_types` auflisten. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Zahlungsmethoden. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=5099 \ -d currency=eur \ -d "payment_method_types[]=alma" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). #### Swift ```swift class CheckoutViewController: UIViewController { var paymentIntentClientSecret: String? // ...continued from previous step override func viewDidLoad() { // ...continued from previous step startCheckout() } func startCheckout() { // Request a PaymentIntent from your server and store its client secret // Click View full sample to see a complete implementation } } ``` ## Zahlung an Stripe senden [Clientseitig] Wenn Kundinnen/Kunden die Schaltfläche zum Bezahlen mit Alma antippen, bestätigen Sie den `PaymentIntent`, um die Zahlung abzuschließen. Konfigurieren Sie ein `STPPaymentIntentParams`-Objekt mit dem [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`. Das Client-Geheimnis unterscheidet sich von Ihren API-Schlüsseln, die die Stripe API-Anfragen authentifizieren. Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Zahlungen abgeschlossen werden können. Es darf nicht protokolliert, in URLs eingebettet oder anderen Personen zugänglich gemacht werden. ### Rückgabe-URL einrichten Das iOS SDK zeigt zur Durchführung einer Zahlung per Alma eine Webansicht in Ihrer App an. Wenn die Authentifizierung abgeschlossen ist, muss Ihre Kundin/Ihr Kunde sie nicht schließen, sondern dies geschieht automatisch. Um dieses Verhalten zu aktivieren, konfigurieren Sie ein benutzerdefiniertes URL-Schema oder einen Universal-Link und richten Sie Ihre App so ein, dass die URL an das SDK weitergeleitet wird. #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } // This method handles opening universal link URLs (for example, "https://example.com/stripe_ios_callback") func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool { if userActivity.activityType == NSUserActivityTypeBrowsingWeb { if let url = userActivity.webpageURL { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } } } return false } ``` Übergeben Sie die URL als `return_url`, wenn Sie den PaymentIntent bestätigen. Nach Abschluss der Authentifizierung über die Webansicht leitet Stripe die Nutzer/innen an die `return_url` weiter. ### Alma-Zahlung bestätigen Führen Sie durch Aufrufen von `STPPaymentHandler.confirmPayment` die Zahlung durch. Dies entspricht einer Webansicht, über die die Kundinnen/Kunden die Zahlung per Alma durchführen können. Nach dem Abschluss ruft Stripe den Completion-Block mit dem Ergebnis der Zahlung auf. #### Swift ```swift let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret) // Alma doesn't require additional parameters so we only need to pass the initialized // STPPaymentMethodAlmaParams instance to STPPaymentMethodParams let alma = STPPaymentMethodAlmaParams() let paymentMethodParams = STPPaymentMethodParams(alma: alma, billingDetails: nil, metadata: nil) paymentIntentParams.paymentMethodParams = paymentMethodParams paymentIntentParams.returnURL = "payments-example://stripe-redirect" STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in switch handlerStatus { case .succeeded: // Payment succeeded // ... case .canceled: // Payment canceled // ... case .failed: // Payment failed // ... @unknown default: fatalError() } } ``` ## Unterstützte Währungen Sie können Alma-Zahlungen in den Währungen erstellen, die Ihrem Land zugeordnet sind. Die lokale Standardwährung für Alma ist `eur` und auch Kundinnen/Kunden wird ihr Kaufbetrag in `eur` angezeigt. | Währung | Land | | ------- | ------------------------------------------------------------- | | `eur` | Frankreich, Italien, Spanien, Niederlande, Belgien, Luxemburg | ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren. # Android > This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/alma/accept-a-payment?payment-ui=mobile&platform=android. Verwenden Sie das [Mobile Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?=android). Dabei handelt es sich um ein einbettbares Zahlungsformular, über das Sie Alma und weitere Zahlungsmethoden mit wenig Aufwand zu Ihrer Integration hinzufügen können. Bei Alma handelt es sich um eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage), bei der Kundinnen/Kunden ihre Zahlungen in 2, 3 oder 4 Raten begleichen können. Bei Alma werden Kundinnen/Kunden zur Autorisierung der Zahlungen von Ihrer Website oder App weitergeleitet und dann wieder auf Ihre Website bzw. App zurückgeleitet. Dort werden Sie [sofort benachrichtigt](https://docs.stripe.com/payments/payment-methods.md#payment-notification), ob die Zahlung erfolgreich war oder fehlgeschlagen ist. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie diese offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe Android SDK](https://github.com/stripe/stripe-android) ist Open Source und [vollständig dokumentiert](https://stripe.dev/stripe-android/). Um das SDK zu installieren, fügen Sie `stripe-android` in den Block `dependencies` Ihrer [app/build.gradle](https://developer.android.com/studio/build/dependencies)-Datei ein: #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.3.0") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.3.0") } ``` > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-android/releases) auf GitHub. Um bei Veröffentlichung eines neuen Release eine Benachrichtigung zu erhalten, [beobachten Sie Veröffentlichungen für das jeweilige Repository](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/apikeys) von Stripe so, dass dieser Anfragen an die API stellen kann, wie beispielsweise in Ihrer Unterklasse `Application`: #### Kotlin ```kotlin import com.stripe.android.PaymentConfiguration class MyApp : Application() { override fun onCreate() { super.onCreate() PaymentConfiguration.init( applicationContext, "<>" ) } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. Stripe-Beispiele nutzen auch [OkHttp](https://github.com/square/okhttp) und [GSON](https://github.com/google/gson), um HTTP-Anfragen an einen Server zu stellen. ## PaymentIntent erstellen [Serverseitig] [Clientseitig] ### Serverseitig Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert. > Legen Sie den zu zahlenden Betrag immer serverseitig fest, also in einer vertrauenswürdigen Umgebung, und nicht auf Client-Seite. So wird verhindert, dass Kundinnen und Kunden ihre eigenen Preise festlegen können. #### Zahlungsmethoden im Dashboard verwalten Verwenden Sie das Dashboard, um Zahlungsmethoden für Ihr Konto zu aktivieren und zu deaktivieren. Dann präsentiert Stripe dynamisch geeignete Zahlungsmethoden für jede Transaktion basierend auf Faktoren wie dem Betrag, der Währung und dem Zahlungsfluss der Transaktion. Bevor Sie einen PaymentIntent erstellen, aktivieren Sie **Alma** auf der Seite mit den [Einstellungen für Ihre Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) im Dashboard. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]=true" ``` #### Zahlungsmethoden manuell auflisten Wenn Sie das Dashboard nicht nutzen oder die Zahlungsmethoden manuell angeben möchten, listen diese mit dem Attribut `payment_method_types` auf. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Zahlungsmethoden. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=5099 \ -d currency=eur \ -d "payment_method_types[]=alma" ``` ### Clientseitig Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)). #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var paymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... startCheckout() } private fun startCheckout() { // Request a PaymentIntent from your server and store its client secret in paymentIntentClientSecret // Click View full sample to see a complete implementation } } ``` ## Zahlung an Stripe senden [Clientseitig] Wenn Kundinnen/Kunden die Schaltfläche zum Bezahlen mit Alma antippen, bestätigen Sie den `PaymentIntent`, um die Zahlung abzuschließen. Konfigurieren Sie ein `ConfirmPaymentIntentParams`-Objekt mit dem [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`. Das Client-Geheimnis unterscheidet sich von Ihren API-Schlüsseln, die die Stripe API-Anfragen authentifizieren. Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Zahlungen abgeschlossen werden können. Es darf nicht protokolliert, in URLs eingebettet oder anderen Personen zugänglich gemacht werden. ### Alma-Zahlung bestätigen Führen Sie durch Aufrufen von `PaymentHandler.confirmPayment` die Zahlung durch. Dies entspricht einer Webansicht, über die die Kundinnen/Kunden die Zahlung per Alma durchführen können. Nach dem Abschluss ruft Stripe den Completion-Block mit dem Ergebnis der Zahlung auf. #### Kotlin ```kotlin class CheckoutActivity : AppCompatActivity() { // ... private val paymentLauncher: PaymentLauncher by lazy { val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext) PaymentLauncher.create( activity = this, publishableKey = paymentConfiguration.publishableKey, stripeAccountId = paymentConfiguration.stripeAccountId, callback = ::onPaymentResult, ) } // … private fun startCheckout() { // ... val almaParams = PaymentMethodCreateParams.createAlma() val confirmParams = ConfirmPaymentIntentParams .createWithPaymentMethodCreateParams( paymentMethodCreateParams = almaParams, clientSecret = paymentIntentClientSecret, // Add a mandate ID or MandateDataParams if you // want to set this up for future use… ) paymentLauncher.confirm(confirmParams) } private fun onPaymentResult(paymentResult: PaymentResult) { // Handle the payment result… } } ``` ## Unterstützte Währungen Sie können Alma-Zahlungen in den Währungen erstellen, die Ihrem Land zugeordnet sind. Die lokale Standardwährung für Alma ist `eur` und auch Kundinnen/Kunden wird ihr Kaufbetrag in `eur` angezeigt. | Währung | Land | | ------- | ------------------------------------------------------------- | | `eur` | Frankreich, Italien, Spanien, Niederlande, Belgien, Luxemburg | ## Optional: Ereignisse nach der Zahlung verarbeiten Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide). - **Manuelles Bearbeiten von Ereignissen im Dashboard** Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen. - **Erstellen eines benutzerdefinierten Webhooks** [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI. - **Integrieren einer vorgefertigten App** Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.