> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fynn.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Customer Portal

> Customer Portal

In the customer portal, customers can independently manage their billing addresses and payment methods, view subscriptions, cancel, and download invoices.

## Accessibility

The customer portal is accessible by default via the URL `[tenant-username].customerfront.app`.

### Custom Domain

A custom domain can be set up for the customer portal and shopping cart. Send us a short email with your request to [hi@fynn.eu](mailto:hi@fynn.eu).

## Features

### Subscriptions

In the "Subscriptions" section, customers can view their active subscriptions, cancel them, and revoke cancellations.
Contract details such as contract start date, contract end date, and the next billing amount are also visible.

<Frame>
  <img src="https://mintcdn.com/fynnsubscriptionbilling/tzBoVhlU_naKbmRt/images/customer-area-subscription-section.png?fit=max&auto=format&n=tzBoVhlU_naKbmRt&q=85&s=ee2351af712742c379907e4b0c8f7966" alt="Customer Portal - Subscriptions" width="759" height="308" data-path="images/customer-area-subscription-section.png" />
</Frame>

## Billing Addresses

In the "Billing Address" section, customers can set a default billing address that will be used for all future subscriptions and invoices.
Alternatively, a new billing address can be added.

<Frame>
  <img src="https://mintcdn.com/fynnsubscriptionbilling/iVIPUuF_nH0B0-xL/images/customer-area-invoice-addresses.png?fit=max&auto=format&n=iVIPUuF_nH0B0-xL&q=85&s=a39ed0f5697b9de1385baa9643b289c8" alt="Customer Portal - Billing Addresses" width="761" height="399" data-path="images/customer-area-invoice-addresses.png" />
</Frame>

## Payment Methods

In the "Payment Methods" section, customers can set a default payment method that will be used for all future subscriptions and invoices.
Alternatively, a new payment method can be added.

<Frame>
  <img src="https://mintcdn.com/fynnsubscriptionbilling/tzBoVhlU_naKbmRt/images/customer-area-payment-methods.png?fit=max&auto=format&n=tzBoVhlU_naKbmRt&q=85&s=e989486cb5196f17cfe0ccd9a0858d3b" alt="Customer Portal - Payment Methods" width="756" height="318" data-path="images/customer-area-payment-methods.png" />
</Frame>

## Invoices

In the "Invoices" section, customers can view and download all invoices.

<Frame>
  <img src="https://mintcdn.com/fynnsubscriptionbilling/tzBoVhlU_naKbmRt/images/customer-area-invoices.png?fit=max&auto=format&n=tzBoVhlU_naKbmRt&q=85&s=a40541c0b85de4e72d1d2a6bdc3346d1" alt="Customer Portal - Invoices" width="752" height="416" data-path="images/customer-area-invoices.png" />
</Frame>

## Personal Contact

In the "Personal Contact" section, customers can view their personal contact person.
This can be configured under [Assign Personal Contact](/guide/customers/introduction#persönlicher-ansprechpartner-hinterlegen).

<Frame>
  <img src="https://mintcdn.com/fynnsubscriptionbilling/tzBoVhlU_naKbmRt/images/customer-area-personal-contact.png?fit=max&auto=format&n=tzBoVhlU_naKbmRt&q=85&s=30b02bdd22384062355680bb70944b37" alt="Customer Portal - Personal Contact" width="314" height="97" data-path="images/customer-area-personal-contact.png" />
</Frame>

## Create Customer Portal Link

To direct customers to the customer portal in an authenticated manner, a personalized link can be created.

<Tabs>
  <Tab title="Using Web App">
    <Steps>
      <Step title="Create Link">
        Click on "Customers" in the left navigation and select the customer for whom you want to create an authenticated link.

        Click on the three dots in the top right and select "Create Customer Portal Link".
      </Step>

      <Step title="Link Successfully Created">
        The link has been successfully created and copied to the clipboard. You can now forward the link to the customer.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Using API">
    To create a link to the customer portal, the API can be used.

    ```bash theme={null}
    POST /customers/{customerId}/authenticate
    ```

    A URL is returned in response that directs the customer to the customer portal in an authenticated state.
    Alternatively, you can use the access & refresh token for API authentication to make your own requests to the API.

    ```json theme={null}
    {
        "data": {
            "customerAreaLink": "https://[tenant-username].customerfront.app/customer-area/login?token=abc",
            "accessToken": "eyxxxxxx",
            "refreshToken": "eyxxxxxx"
        }
    }
    ```

    [View API Documentation](/api-reference/customer/authenticate-customer)
  </Tab>
</Tabs>

## Send Login Email to Customer

You can send customers an email with a login link that takes them directly to their customer portal - without having to enter a password or code.

<Tabs>
  <Tab title="Using Web App">
    <Steps>
      <Step title="Select Customer">
        Click on "Customers" in the left navigation and select the customer.
      </Step>

      <Step title="Send Login Email">
        Click the three dots in the top right and select "Send Login Email".

        The customer will receive an email with a link to log in directly.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Using API">
    ```bash theme={null}
    POST /customers/{customerId}/send-login-email
    ```

    The customer receives an email with a login link to the customer portal.

    [View API Documentation](/api-reference/customer/send-login-email)
  </Tab>
</Tabs>

<Tip>
  This feature is particularly useful for support requests or to help customers access their customer portal.
</Tip>

## Customize Customer Portal

Individual sections or features can be customized in the customer portal. These include:

* Show contact person
* Show invoices
* Manage billing address
* Manage payment methods
* View subscriptions
* Cancel subscriptions
* Behavior when canceling during trial period

The settings can be found under "Settings" > "Hosted Pages".

<Frame>
  <img src="https://mintcdn.com/fynnsubscriptionbilling/tzBoVhlU_naKbmRt/images/customerArea/settings.png?fit=max&auto=format&n=tzBoVhlU_naKbmRt&q=85&s=293c2714f50573ded4a1e854982c5ec7" alt="Customer Portal - Customizations" width="1169" height="862" data-path="images/customerArea/settings.png" />
</Frame>

### Behavior When Canceling During Trial Period

When a customer cancels a subscription during the trial period, the behavior of the cancellation timing can be configured.

The following options are available:

* **End subscription at time of cancellation**: The subscription is cancelled immediately, even if the trial period has not yet expired.
* **End subscription at end of trial period**: The subscription is ended at the end of the trial period, the cancellation is scheduled.

<Tip>
  The settings apply to all customers who cancel via the customer portal.
</Tip>

<Info>
  This setting is not relevant for the Wallet, as the cancellation date is manually set when cancelled by an employee.
</Info>

## Add Payment Method via Link

To give customers the option to add a payment method via link, a personalized link can be created and optionally sent by email.

The customer can then choose whether the payment method should be used for existing and future subscriptions.
Additionally, the payment method will be used for open invoices if the last payment was unsuccessful.

<Check>
  The payment method is automatically set as the default payment method.
</Check>

<Tabs>
  <Tab title="Using Web App">
    <Steps>
      <Step title="Create Link">
        Click on "Customers" in the left navigation and select the customer for whom you want to create a link.

        Click on the three dots in the top right and select "Add Payment Method".
        Select the payment methods the customer can add and whether an email should be sent.

        Click "Create Link".

        <Frame>
          <img src="https://mintcdn.com/fynnsubscriptionbilling/tzBoVhlU_naKbmRt/images/customers/payment-method-send-link.png?fit=max&auto=format&n=tzBoVhlU_naKbmRt&q=85&s=be7eb3c8db72d6ee7eacbb412bbe7a18" alt="Add Payment Method" width="716" height="351" data-path="images/customers/payment-method-send-link.png" />
        </Frame>
      </Step>

      <Step title="Link Successfully Created">
        The link has been successfully created and copied to the clipboard. You can now forward the link to the customer.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Using API">
    To create a link for adding a payment method, the API can be used.

    ```bash theme={null}
    POST /payment-methods/link
    ```

    [More information about the API](/api-reference/paymentmethod/create-payment-method-link)
  </Tab>
</Tabs>
