Setting up Self-Service Payment Methods in the Member Platform and Branded App – Magicline GmbH

In this article, you will learn how to set up and control advanced self-service payment methods for your members in the Member Platform and Branded App—and how technical partners can integrate the payment component.

Fast Lane

Activate Finion Pay via Settings / Finion Financial Solutions / Finion Pay.
Go to MySports / Administration / Self-service / <Configuration Name> – activate payment data, set member account to "Settlement allowed," and configure the Fast-Finance Link.

Prerequisites

Before you can activate advanced payment methods in self-service, the following conditions must be met:

Finion Pay must be active. Activate the service via Settings / Finion Financial Solutions / Finion Pay. The integration will be available within up to 5 business days.
Member Platform must be active. Your studio requires active access to the Member Platform (App and/or Web).

Note: Without an active Finion Pay extension, advanced payment methods (e.g., Credit Card, TWINT, BACS) will not be available in self-service.

Activating Self-Service Payment Methods

The entire configuration of self-service payment methods takes place under MySports / Administration / Self-service. Select the desired configuration there. Three areas within the configuration are relevant:

a) Personal Member Data – Enable Payment Data

In the Personal Member Data section, ensure that Payment Data is set to Activated.
Set Change of Payment Data to Yes so that members can update their payment methods independently.

b) Additional Data – Activate Member Account and Online Settlement

In the Additional Data widget, open the Edit member account dialog via the three-dot menu.
Set Settlement to Settlement allowed. This allows members to settle outstanding claims via self-service.
Optional: Under Flat-rate Online Fee, you can define a fee for the online payment process (e.g., as a fixed amount or a percentage). The default value is €0.00.
Click Save.

c) Fast-Finance Link – Configure Steps, Sequence, and Payment Types

Scroll to the Fast-Finance Link section within the same self-service configuration.
Under Activated Functions, select the desired option for Active steps and sequence:
- Settlement of outstanding claims → Update of payment method (recommended)
- Settlement of outstanding claims only
- Update of payment method → Settlement of outstanding claims
- Update of payment method only
- Disabled
Determine which payment methods should be available in self-service for settlement and updates.
Save the configuration.

Controlling Available Payment Methods

You decide which payment methods are available to your members in self-service. This is controlled via the software configuration. The following payment methods may be available—depending on your location and Finion Pay configuration:

SEPA Direct Debit – for the DACH region and other European markets.
Credit Card – Visa, Mastercard, and other common cards.
TWINT – for studios in Switzerland.
BACS Direct Debit – for studios in the United Kingdom.

To see which payment methods are enabled for your studio, navigate to Settings / Finion Financial Solutions / Finion Pay / Payment Methods.

Tip: If you also want to offer Credit Card as a payment method in contract offers, configure this additionally under Settings / Contract Conclusion / Contract Offers / Offer Options.

How Your Members Use Self-Service

Once the configuration is complete, your members can manage their payment data independently:

Member Platform (App): In the self-service area of the app, members can add or update their payment method. Entry is handled via a secure, encrypted payment component.
Branded App: The same function is also available in your Branded App.
Member Web: Members can also update their payment data via the Member Web.

Important: Credit card data stored by a member via the app cannot be viewed or managed by the studio. Only the member has access to this information.

For payment methods like credit cards, additional authentication may be required (e.g., 3D Secure). In this case, the member is redirected to their bank and automatically returned after completion.

Integration for Technical Partners (Payment API)

For technical partners who want to integrate the payment component into their own application, the Payment API is available. Integration takes place in two steps:

Step 1: Create User Payment Session A short-lived session token is generated via the endpoint POST /v1/payments/user-session. This token authorizes the payment component in the frontend. The following parameters are relevant:

amount – The payment amount. Set the value to 0 if only a payment method is being stored.
scope – Payment context: MEMBER_ACCOUNT for recurring payments or ECOM for e-commerce purchases.
customerId or finionPayCustomerId – Customer identification. Use exactly one of these two parameters.
permittedPaymentChoices – Optional restriction of offered payment methods (e.g., CREDIT_CARD, PAYPAL). If this parameter is not set, all technically available methods are provided.
referenceText – Reference text that appears on the member's bank statement.

Required Scope: PAYMENT_WRITE

Step 2: Embed Payment Component (Widget) The payment component is an embeddable JavaScript widget. You include the widget script and initialize it with the received session token:

JavaScript

<script src="WIDGET_URI"></script>
<div id="payment-widget"></div>

<script>
const widget = window.paymentWidget.init({
    userSessionToken: 'your-session-token',
    environment: 'live',
    countryCode: 'DE',
    locale: 'en-GB',
    container: 'payment-widget',
    onSuccess: (paymentRequestToken) => {
        // Use token for further processing
    }
});
</script>

The widget supports individual customizations via the styling (colors, borders) and i18n (translations) parameters. Framework-specific integration examples (React, Angular, Vue.js) can be found in the documentation.

Important Notes on Token Processing:

The paymentRequestToken returned by the widget can be used to store a payment method for the customer or to trigger a payment.
As long as the token is not used for a booking, no amounts will be debited. The authorization is automatically canceled if the associated session token expires.
Only one token can be redeemed per User Payment Session.

The full API documentation, including endpoints and examples, can be found in the Developer Portal: Payment API – Developer Portal