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

# Manage payment methods on your own payment page

> Learn how to manage payment methods on your own payment page.

## Fynn elements

We are currently working on a new feature that allows you to manage payment methods on your own payment page without any business-code. This feature is called Fynn elements and will be available in Q2.24.

## Add new payment method

The following steps show you how to add a new payment method using the Fynn API on your own payment page.

<Tabs>
  <Tab title="Stripe Credit card">
    <Steps>
      <Step title="Create stripe setup intent">
        To add a new payment method, you need to create a Stripe SetupIntent first in order to securely collect card details in Fynn.

        ```bash theme={null}
        curl -X POST \
        /payment-methods \
        --header "Content-Type: application/json" \
        --header "Authorization: Bearer <token>" \
        --data '{
            "gateway": "stripe",
            "type": "card",
            "customerId": "<customerId>",
            "isDefault": true,
            "futureUsageAllowed": true,
            "stripe": {
                "paymentMethodId": null,
                "customerId": null
            }
        }'
        ```

        **Example response**

        ```json theme={null}
        {
            "status": "action_required",
            "action_required": {
                "action": "client_site_action",
                "details": {
                    "clientSecret": "test_1234567890",
                    "publishableKey": "pk_test_1234567890"
                    "accountId": "acct_1234567890",
                }
            }
        }
        ```
      </Step>

      <Step title="Collect card details">
        After creating the SetupIntent, you can show the Stripe.js card element in your form to collect the card details.
        Then confirm the SetupIntent with the card details.

        ```html theme={null}
        <html>
        <head>
            <script src="https://js.stripe.com/v3/"></script>
            <script>
                var stripe = Stripe('pk_test_1234567890:<publishableKey>', { // previously received from the response
                    stripeAccount: 'acct_1234567890:<accountId>' // previously received from the response
                });

                // see: https://docs.stripe.com/js/element/other_element?type=card
                var elements = stripe.elements();
                var card = elements.create('card');
                card.mount('#card-element');

                var paymentIntentClientSecret = '<clientSecret>'; // previously received from the response

                var form = document.getElementById('payment-form');
                form.addEventListener('submit', function(event) {
                    event.preventDefault();
                    stripe.confirmCardSetup(paymentIntentClientSecret, {
                        payment_method: {
                            card: card,
                            billing_details: {
                                name: 'Jenny Rosen'
                            }
                        }
                    }).then(function(result) {
                        if (result.error) {
                            console.log(result.error.message);
                        } else {
                            console.log(result.setupIntent.payment_method);

                            // send payment method id to fynn
                            // see: https://docs.fynn.app/api-reference/paymentmethod/create-payment-method
                        }
                    });
                });
            </script>
        </head>
        <body>
            <form id="payment-form">
                <div id="card-element"></div>
                <button id="submit">Submit</button>
            </form>
        </body>
        </html>
        ```
      </Step>

      <Step title="Assign payment method">
        Assign the payment method created in stripe with Fynn. Use the payment method id received from the confirmation `result.setupIntent.payment_method`.

        ```bash theme={null}
        curl -X POST \
        /payment-methods \
        --header "Content-Type: application/json" \
        --header "Authorization: Bearer <token>" \
        --data '{
            "gateway": "stripe",
            "type": "card",
            "customerId": "<customerId>",
            "isDefault": true,
            "futureUsageAllowed": true,
            "stripe": {
                "paymentMethodId": "pm_1J4X2n2eZvKYlo2C2Q2Q2Q2Q2", // result.setupIntent.payment_method
            }
        }'
        ```
      </Step>

      <Step title="Done 🎉">
        That's it! You have successfully added a new card payment method to the customer.
      </Step>
    </Steps>
  </Tab>

  <Tab title="SEPA debit (via Fynn)">
    Collect the customer's SEPA details in your own form and create a new payment method:

    ```bash theme={null}
    curl -X POST \
    /payment-methods \
    --header "Content-Type: application/json" \
    --header "Authorization: Bearer <token>" \
    --data '{
        "gateway": "sepa_debit",
        "type": "sepa_debit",
        "customerId": "<customerId>",
        "isDefault": true,
        "futureUsageAllowed": true,
        "sepaMandate": {
            "iban": "DE89370400440532013000",
            "bic": "COBADEFFXXX",
            "accountHolder": "Max Mustermann",
            "signingDate": "2021-01-01",
            "type": "CORE",
            "sequence": "FRST"
        }
    }'
    ```

    For more details see: [Create payment method](/api-reference/paymentmethod/create-payment-method).
  </Tab>

  <Tab title="Bank transfer">
    <Check>
      Bank transfer is created by default when a customer is created.
    </Check>
  </Tab>
</Tabs>
