embeddables v1.0.95

Embeddables

Embeddables is a feature which you can use embeddable components on your site, to show your customer their Bucky data.

Current views

The package is a WIP and this is the currently only data accessible:

• Accounts
• Partial payments
• Payouts

Future views

Future data views:

• Payments

Examples

HTML example:

<div style="height: 100%" id="bucky-container"></div>
<button id="redirect-accounts">Redirect to accounts</button>
<button id="redirect-partial-payments">Redirect to partial payments</button>
<button id="update-token">Update token</button>

<script type="module">
  import { createEmbeddable, Routes } from 'https://cdn.jsdelivr.net/npm/embeddables'

  const embeddable = createEmbeddable({
    container: '#bucky-container',
    embedToken: 'YOUR_EMBED_TOKEN',
    targetOrigin: 'http://localhost:5173',
    route: Routes.ACCOUNTS,
  })

  document.getElementById('update-token').addEventListener('click', () => {
    embeddable.updateToken('YOUR_NEW_EMBED_TOKEN')
  })
  document.getElementById('redirect-partial-payments').addEventListener('click', () => {
    embeddable.navigate(Routes.PARTIAL_PAYMENTS)
  })
  document.getElementById('redirect-accounts').addEventListener('click', () => {
    embeddable.navigate(Routes.ACCOUNTS)
  })
</script>

A HTML-element can also be passed into the container

const container = document.querySelector('#bucky-container')

const embeddable = createEmbeddable({
  container: container,
  embedToken: 'YOUR_EMBED_TOKEN',
  targetOrigin: 'http://localhost:5173',
  route: routes.ACCOUNTS,
})

Vue 3 example:

Using a querySelector to get container:

<script setup lang="ts">
import { createEmbeddable } from 'embeddables'

const embeddable = createEmbeddable()
onMounted(() => {
  embeddable.init({
    container: '#bucky-container',
    targetOrigin: 'https://localhost:5173',
    route: Routes.ACCOUNTS,
    embedToken:
      'YOUR_EMBED_TOKEN',
  })
})
</script>
<template>
    <div id="bucky-container"></div>
</template>

Using a HTML-element:

<script setup lang="ts">
import { createEmbeddable } from 'embeddables'

const buckyContainer = ref<HTMLElement | null>(null)

const embeddable = createEmbeddable()
onMounted(() => {
  embeddable.init({
    container: buckyContainer,
    targetOrigin: 'https://localhost:5173',
    route: Routes.ACCOUNTS,
    embedToken:
      'YOUR_EMBED_TOKEN',
  })
})
</script>
<template>
    <div ref="buckyContainer"></div>
</template>

Multiple Embeddables on same page:

// You can both initialize on creation by passing in a config to `createEmbeddable`...
const accountsEmbeddable = createEmbeddable({
    container: '#bucky-accounts-container',
    targetOrigin: 'https://localhost:5173/',
    route: Routes.ACCOUNTS,
    embedToken: 'YOUR_EMBED_TOKEN',
})

// ... or by calling init later
const paymentsEmbeddable = createEmbeddable()
paymentsEmbeddable.init({
    container: '#bucky-payments-container',
    targetOrigin: 'https://localhost:5173/',
    route: Routes.PAYMENTS,
    embedToken: 'YOUR_EMBED_TOKEN',
})

Events

These are the currently supported event listeners:

  embeddable.addEventListener('partialPaymentRefunded', (data) => {
    console.log('ev: partialPaymentRefunded', data)
  })

  embeddable.addEventListener('connectedAccountCreated', (data) => {
    console.log('ev: connectedAccountCreated', data)
  })

  embeddable.addEventListener('resize', (data) => {
    console.log('ev: resize', data)
  })

  embeddable.addEventListener('tokenExpired', (data) => {
    console.log('ev: tokenExpired', data)
  })

  embeddable.addEventListener('navigate', (data) => {
    console.log('ev: navigate', data)
  })