Loading...
Skip navigation

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 */
    }
}
```
  1. 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"
            }
        }
    )
}

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
GHA_________S________
1_K____J____F_Z___3MY
L_T___RKS___B8J______
Z_2____9______Y___QLR
L28___________X______