Configuring Stripe Checkout

Preparation

In order to use Stripe Checkout you need the following:

• an active Stripe account
• a composer-based installation of TYPO3

Stripe API access credentials

1. On the Stripe login page, switch to the Developer -> API key area (https://dashboard.stripe.com/developers)
2. Create new API credentials
3. A public and a secret key will be displayed
4. These keys must be stored in TYPO3 using TypoScript constants

Add additional actions after a successful payment

If you need actions to be carried out after successful payment, use the StripePaid event listener.

1. Create a new slot:

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

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

2. Then register the event listener in Configuration/Services.yaml:

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

Testing

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

Test credit card

In order to simulate/test the card payment flow from end user perspective use the following card details:

Credit card number: 4242 4242 4242 4242 CVV: 123 Exp: 12/25 (Or any other valid date in the future)

Error handling and messages

The Stripe checkout uses the FlashMessage.push() JavaScript method for pushing messages. For this servive you need to define a div container as wrapper for the messages, for example <div id="#shop-flash-messages"></div>.

Styling

If you need to style the Stripe widget just use the style node in Setup-TypoScript. Use the node to define styles in JSON format. For more information visit: 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"
            }
        }
    )
}