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.

Stripe Credit card
SEPA debit (via Fynn)
Bank transfer

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.

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

{
    "status": "action_required",
    "action_required": {
        "action": "client_site_action",
        "details": {
            "clientSecret": "test_1234567890",
            "publishableKey": "pk_test_1234567890"
            "accountId": "acct_1234567890",
        }
    }
}

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

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.

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
    }
}'

Done 🎉

That’s it! You have successfully added a new card payment method to the customer.

Collect the customer’s SEPA details in your own form and create a new payment method:

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.

Authentication Collect Usage Data

API documentation

User

Tenant

Customer

Catalogue

Subscription

Invoice

Payment

Dunning

Offer

Checkout

Feature & Entitlement

Analytics

Accounting

Settings

Manage payment methods on your own payment page

Fynn elements

Add new payment method

​Fynn elements

​Add new payment method

Fynn elements

Add new payment method