Stripe Checkout konfigurieren

Vorbereitungen

Um den Stripe Checkout nutzen zu können, müssen folgende Voraussetzungen erfüllt sein:

• Du musst über ein aktiviertes Stripe-Konto verfügen
• Du musst TYPO3 auf composer Basis verwenden

Stripe API-Zugangsdaten

1. Wechsel im Stripe-Login in den Bereich Entwickler -> API-Schlüssel (https://dashboard.stripe.com/developers)
2. Erstelle hier neue API-Zugangsdaten
3. Hier bekommst Du nun einen öffentlichen und einen Geheimschlüssel angezeigt
4. Diese Schlüssel müssen via TypoScript-Konstanten im TYPO3 hinterlegt werden

Aktionen nach erfolgreicher Bezahlung

Wenn Du nach der erfolgreichen Bezahlung weitere Aktionen durchführen möchtest, kannst Du dazu den StripePaid Event Listener nutzen.

1. Dazu muss ein Event Listener erstellt werden:

```php
<?php
namespace YourNameSpace\YourExtension\EventListener;
use CodingMs\ShopPro\Event\BasketOrder\StripePaidEvent;

class DoSomeThingEventListener
{
    public function __invoke(StripePaidEvent $event): void
    {
        /* Do something */
    }
}
```

2. Dieser Event Listener muss anschließend in der Configuration/Services.yaml registriert werden:

```yaml
services:
    YourNameSpace\YourExtension\EventListener\DoSomeThingEventListener:
        tags:
            - name: event.listener
              identifier: 'myListener'
              event: CodingMs\ShopPro\Event\BasketOrder\StripePaidEvent
```

Testing

Siehe: https://stripe.com/docs/testing

Test Credit Card

Um den Kartenzahlungsfluss aus der Sicht des Endbenutzers zu simulieren/testen, verwendest Du die folgenden Kartendetails im geladenen Klarna-Widget:

Credit card number: 4242 4242 4242 4242 CVV: 123 Exp: 12/25 (Oder ein anderes gültiges Datum in der Zukunft)

Fehlerbehandlung und Meldungen

Der Stripe-Checkout verwendet die JavaScript-Methode FlashMessage.push() zum Pushen von Nachrichten. Für diesen Dienst musst Du einen div-Container als Wrapper für die Nachrichten definieren, zum Beispiel <div id="#shop-flash-messages"></div>.

Styling

Wenn Du das Stripe-Widget stylen musst, verwendest Du einfach den Style-Knoten in Setup-TypoScript. Darin kannst Du Stile im JSON-Format definieren. Weitere Informationen findest Du unter: https://stripe.com/docs/js/appendix/style

plugin.tx_shop.settings.basketOrder.orderOptions.stripe {
    style (
        {
            "base": {
                "color": "#32325d",
                "lineHeight": "24px",
                "fontFamily": "'Helvetica Neue', Helvetica, sans-serif",
                "fontSmoothing": "antialiased",
                "fontSize": "16px",
                "::placeholder": {
                    "color": "#aab7c4"
                }
            },
            "invalid": {
                "color": "#fa755a",
                "iconColor": "#fa755a"
            }
        }
    )
}