> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qonto.com/llms.txt
> Use this file to discover all available pages before exploring further.

# SEPA Transfer Creation

The `sepa-transfer-creation` UI Element presents a multistep flow to help users create SEPA transfers. It will include
Verification of Payee (VOP) checks, validation of the transfer details and Strong Customer Authentication support in
those cases in which it is needed.

When initialized, the element takes the user to a step by step flow which contains the following screens:

<Steps>
  <Step title="Beneficiary selection">
    Shows a list of beneficiaries to choose from. <img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-select-beneficiary.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=6214bd417d2a03bec71837d0f4831c67" alt="Transfer creation
    beneficiary selection
    page" width="530" height="738" data-path="api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-select-beneficiary.png" />
  </Step>

  <Step title="Transfer details">
    While the VOP check is performed for the selected beneficiary, the screen
    shows the form where users can enter the transfer details (amount, source
    account, reference). <img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-transfer-details.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=00fccdf711a7cde1b2779d46f52cd7c6" alt="Transfer creation details
    page" width="530" height="583" data-path="api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-transfer-details.png" />
  </Step>

  <Step title="Transfer summary">
    A screen where the details entered in previous steps are displayed before
    confirming the operation. <img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-transfer-summary.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=ac56c5be6c245203b1f4d49bd591b4b9" alt="Transfer creation summary
    page" width="530" height="478" data-path="api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-transfer-summary.png" />
  </Step>

  <Step title="SCA authentication">
    If the transfer beneficiary is not trusted, an SCA authentication is
    required. This step is shown as a modal on top of the transfer summary step.

    <img
      src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-sca-waiting.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=b408bcdf2a3cb0a137078c414673295c"
      alt="Transfer creation SCA waiting
page"
      width="496"
      height="406"
      data-path="api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-sca-waiting.png"
    />
  </Step>

  <Step title="Success or error">
    A final step that informs the user whether the transfer creation was
    successful or if an error happened during the process. <img src="https://mintcdn.com/qonto-6237c309/QufvOT9UjaI3vLxE/api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-success.png?fit=max&auto=format&n=QufvOT9UjaI3vLxE&q=85&s=3d55c7744fb389c37640778630b1886e" alt="Transfer creation
    success page" width="496" height="406" data-path="api-reference/sdk-libraries/doc-pages/img/sepa-transfer-creation-success.png" />
  </Step>
</Steps>

## How it works

The SEPA transfer creation is rendered by calling the [`createUIElement`](/api-reference/sdk-libraries/variables/ui#createuielement) function with the appropriate
settings:

```ts theme={null}
import { ui } from '@qonto/embed-sdk/ui';

ui.createUIElement({
  uiElementSettings: {
    uiElementName: 'sepa-transfer-creation',
  },
  operationSettings: {
    uiParentElementId: 'transfer-creation-ui-container',
  },
});
```

All the navigation and data fetching happens automatically without requiring additional configuration from your side.

For details about the SDK function to call to display the SEPA transfer creation UI, please refer to
the [createUIElement API Reference](/api-reference/sdk-libraries/variables/ui#createuielement).

## Emitted events

The SEPA transfer creation UI Element emits the following events when users interact with it.

### SEPA Transfer Created

This event is emitted as soon as the transfer is successfully created. This will happen when the users land in the
success step of the flow. It is useful in case you want to track the result or in case you want to automatically close
the UI Element without waiting for user interaction. You can set up a listener for the event by passing a function as
the `uiElementSettings.uiElementEventListener` parameter when calling `createUIElement`:

```ts theme={null}
import { ui } from '@qonto/embed-sdk/ui';

ui.createUIElement({
  uiElementSettings: {
    uiElementName: 'sepa-transfer-creation',
    uiElementEventListener: ({ eventName, eventDetail }) => {
      if (eventName === 'sepa-transfer-created') {
        // React to the transfer created event (at this point, the user is in the success step)
      }
    },
  },
  operationSettings: {
    uiParentElementId: 'transfer-creation-ui-container',
  },
});
```

### SEPA Transfer Creation Flow Completed

This event is emitted when the user clicks in the call to action that ends the process either in the success or error
screens. It is a good event to listen for to return users to an initial page, or to a details page of the newly created
transfer. You can set up a listener for the event by passing a function as the `uiElementSettings.uiElementEventListener`
parameter when calling `createUIElement`:

```ts theme={null}
import { ui } from '@qonto/embed-sdk/ui';

ui.createUIElement({
  uiElementSettings: {
    uiElementName: 'sepa-transfer-creation',
    uiElementEventListener: ({ eventName, eventDetail }) => {
      if (eventName === 'sepa-transfer-creation-flow-completed') {
        // React to the flow completion, it happens when the user clicks the call to action in the success or error screen
      }
    },
  },
  operationSettings: {
    uiParentElementId: 'transfer-creation-ui-container',
  },
});
```

## Customizable components

The SEPA transfer creation UI element is composed of several customizable components, spread across the different steps
it can land into. You can customize their appearance to match your branding:

### Beneficiaries selection step

* **[Beneficiary Card](/api-reference/sdk-libraries/doc-pages/customizable-components/beneficiary-card)** - Used to
  display each beneficiary option in the list of available beneficiaries. Each card displays the beneficiary name and IBAN.
* **[Skeleton Loader](/api-reference/sdk-libraries/doc-pages/customizable-components/skeleton-loader)** - Used to
  display loading placeholders while beneficiaries are being fetched from the API. Each card will display the skeleton
  loader while loading.
* **[Heading Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-headings)** - Used for the main
  title of the step, prompting users to select a beneficiary.

### Transfer details step

* **[Beneficiary Card](/api-reference/sdk-libraries/doc-pages/customizable-components/beneficiary-card)** - Used to
  display the selected beneficiary along with the VOP check result.
* **[Skeleton Loader](/api-reference/sdk-libraries/doc-pages/customizable-components/skeleton-loader)** - Used to
  display loading placeholders while the VOP for the beneficiary is in progress.
* **[Heading Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-headings)** - Used for the main
  title of the step, prompting users to enter the transfer details.
* **[Button](/api-reference/sdk-libraries/doc-pages/customizable-components/button)** - Used for navigation to previous
  and next steps. The previous step button shows in a secondary variant, while the next step button shows in a primary
  variant.
* **[Select Field](/api-reference/sdk-libraries/doc-pages/customizable-components/select-field)** - Used for selecting the source bank account for the transfer. Each option in this select
  field displays the account name as body text and the balance as secondary text.
* **[Amount Field](/api-reference/sdk-libraries/doc-pages/customizable-components/amount-field)** - Used for entering the transfer amount.
* **[Text Field](/api-reference/sdk-libraries/doc-pages/customizable-components/text-field)** - Used for entering the transfer reference.

### Transfer summary step

* **[Heading Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-headings)** - Used for the main title of the step, prompting users to review the transfer details.
* **[Body Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-body)** - Used for displaying additional information about the transfer summary.
* **[Button](/api-reference/sdk-libraries/doc-pages/customizable-components/button)** - Used for navigation to previous and next steps. The previous step shows in a secondary variant,
  while the next step shows in a primary variant.

### SCA step

* **[Heading Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-headings)** - Used for the title
  of the SCA modal.
* **[Body Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-body)** - Used for displaying
  additional information about what the user needs to do in order to authenticate the transfer creation operation.

### Success and error steps

* **[Heading Text](/api-reference/sdk-libraries/doc-pages/customizable-components/text-headings)** - Used for the title
  of page.
* **[Button](/api-reference/sdk-libraries/doc-pages/customizable-components/button)** - Used by the user to signal the
  end of the flow, either with a successful creation or an error.

For guidance on how to customize these components and adapt the SEPA transfer creation UI to your branding,
please refer to the [customizing UI elements](/api-reference/sdk-libraries/doc-pages/customizing-ui-elements)
documentation.