Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

Configuring Stripe Checkout


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:
namespace YourNameSpace\YourExtension\EventListener;
use CodingMs\ShopPro\Event\BasketOrder\StripePaidEvent;

class DoSomeThingEventListener
    public function __invoke(StripePaidEvent $event): void
        /* Do something */
  1. Then register the event listener in Configuration/Services.yaml:
            - name: event.listener
              identifier: 'myListener'
              event: CodingMs\ShopPro\Event\BasketOrder\StripePaidEvent


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>.


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"

Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question