Zum Hauptinhalt springen

Self Service Elements

To quickly integrate invoice or subscription list on your custom website, you can use the self service elements.

Usage​

To use the self service elements, you need to create a new instance of the FynnJS class.

const Fynn = FynnJS()

Then you need to setup the Fynn.Js Elements with your public key.

Fynn.setup('pk_live_xxxxxxxxx');

Then you can create a new instance of the self service elements.

const selfServiceElements = Fynn.elements.selfService({
    debtorId: 'debtor_xxxxxxxxx', // define the debtor ID
    brandColor: 'c7f639' // define the brand color of your website, if nothing provided we will use black
})

Invoice List​

The invoice list element is a list of all invoices of a debtor.

Features​

  • List of all invoices
  • Download invoice as PDF
  • Pay invoice with a custom payment method

Usage​

To display the invoice list, you need to create a new instance of the invoice list element.


const invoiceList = selfServiceElements.create('invoiceList')

Then you can mount the invoice list element to a DOM element.

invoiceList.mount('#invoice-list') // define the ID of the element where you want to display the invoice list

Subscription List​

The subscription list element is a list of all subscriptions of a debtor.

Features​

  • List of all subscriptions
  • Cancel subscription
  • Change payment method
  • Change subscription plan (upgrade/downgrade)
  • See next invoice date
  • See billing cycle

Usage​

To display the subscription list, you need to create a new instance of the subscription list element.


const subscriptionList = selfServiceElements.create('subscriptionList')

Then you can mount the subscription list element to a DOM element.


subscriptionList.mount('#subscription-list') // define the ID of the element where you want to display the subscription list