Payment Methods

The payment methods element allows you to collect payment information from your customers. You can use this element to create a custom checkout page.

You don't need to implement each payment method yourself, we will handle that for you.

Free 1:1 introduction

We're very happy that you're interested in integrating Fynn in your solution. We offer you a free 30min call with one of our developers, to discuss any questions and provide you 1:1 support.

Book a free 1:1 call now

Usage

Require the Fynn.Js library in your website:

<script src="https://js.fynn.eu/v1/fynn.js"></script>

Initialize the Fynn.Js library

You need to initialize the Fynn.Js library with your public key, which you can obtain in your configuration area of fynn wallet.

const Fynn = FynnJS()

Fynn.setup('pk_live_xxxxxxxxx');

Create the payment methods element

You need to create the payment methods element and mount it to a DOM element.

const paymentMethodsElements = Fynn.elements.paymentMethods({
    brandColor: 'c7f639' // define the brand color of your website, if nothing provided we will use black
})

const paymentMethods = paymentMethodsElements.create('sepa')

paymentMethods.mount('#payment-methods') // define the ID of the element where you want to display the payment methods

Usage with Stripe Elements

If you want to use stripe to collect payment information, the initialization works like for every other element.

note

You need to add additional <script src="https://js.stripe.com/v3/"></script> to your body tag.

Required params

On creating the payment method element instance you need to specify some mandatory fields:

• stripePublicKey: The public key of your stripe account
• debtorId: The ID of the debtor you want to charge, see Debtor API to create a debtor

const Fynn = FynnJS()

Fynn.setup('pk_live_xxxxxxxxx');

const paymentMethodsElements = Fynn.elements.paymentMethods({
    brandColor: 'c7f639' // define the brand color of your website, if nothing provided we will use black
})

const paymentMethods = paymentMethodsElements.create('stripe-card', {
    stripePublicKey: 'pk_live_xxxxxxxxx',
    debtorId: 'debtor_xxxxxxxxx',
    // additional stripe params here, see https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
})

paymentMethods.mount('#payment-methods') // define the ID of the element where you want to display the payment methods

Supported stripe payment methods

Currently, we support the following payment methods:

• stripe-card: Stripe card payment method
• stripe-iban: Stripe SEPA payment method

We will add more payment methods in the future or on request.

Use the create function to create the payment method element.

const paymentMethods = paymentMethodsElements.create('stripe-card', {
    stripePublicKey: 'pk_live_xxxxxxxxx',
    debtorId: 'debtor_xxxxxxxxx',
    // additional stripe params here, see https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
})


const paymentMethods = paymentMethodsElements.create('stripe-iban', {
    stripePublicKey: 'pk_live_xxxxxxxxx',
    debtorId: 'debtor_xxxxxxxxx',
    // additional stripe params here, see https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
})

Migrate from Stripe Elements

If you already use Stripe Elements in your website, you can easily migrate to Fynn.Js Elements.

See the migration guide for more information.

Events

To perform some actions like putting a loading indicator on your website, you can listen to the following events:

onPaymentMethodValid

This event will be triggered when the payment method is valid and ready to be confirmed. When you are using stripe elements, we will fetch the stripe payment element state, and dispatch this fynn event.

To register your custom function, you need to call the onPaymentMethodValid function.

[...]

const paymentMethodElement = paymentMethodsElements.create('stripe-card', {
    [...]
})

paymentMethodElement.onPaymentMethodValid(() => {
    // show message, loading indicator etc.
})

onPaymentMethodInvalid

This event will be triggered when the payment method is invalid. When you are using stripe elements, we will fetch the stripe payment element state, and dispatch this fynn event.

To register your custom function, you need to call the onPaymentMethodInvalid function.

[...]

const paymentMethodElement = paymentMethodsElements.create('stripe-card', {
    [...]
})

paymentMethodElement.onPaymentMethodInvalid(() => {
    // show message, loading indicator etc.
})

onPaymentMethodFailed

This event will be triggered when the payment method creation failed on fynn backend or the payment gateway. When you are using stripe elements, we will fetch the stripe payment element state, and dispatch this fynn event.

To register your custom function, you need to call the onPaymentMethodFailed function.

[...]

const paymentMethodElement = paymentMethodsElements.create('stripe-card', {
    [...]
})

paymentMethodElement.onPaymentMethodFailed(() => {
    // show message, loading indicator etc.
})

onPaymentMethodAdded

This event will be triggered when the payment method was successful created on fynn backend and assigned to the debtor.

This event will be dispatched before the cart will be confirmed.

To register your custom function, you need to call the onPaymentMethodAdded function.

[...]

const paymentMethodElement = paymentMethodsElements.create('stripe-card', {
    [...]
})

paymentMethodElement.onPaymentMethodAdded(() => {
    // show message, loading indicator etc.
})