# Offline Refund elements

Collecting details from your customer may be necessary to facilitate a refund with certain payment flows such as [Konbini](/digital-river-api/payments/supported-payment-methods/konbini.md), [Online Banking](/digital-river-api/payments/supported-payment-methods/online-banking-ibp.md), or [Wire Transfer](/digital-river-api/payments/supported-payment-methods/wire-transfer.md).

{% hint style="success" %}
For integration details, refer to [Refunding asynchronous payment methods](/digital-river-api/order-management/returns-and-refunds-1/refunds/handling-refunds-for-asynchronous-payment-methods.md).
{% endhint %}

## Creating an Offline Refund element

You should use the `createElement` function exposed through the DigitalRiver Object. This object follows the same pattern and allows for the same [custom classes](/digital-river-api/developer-resources/reference/elements.md#custom-classes) and [styles ](/digital-river-api/developer-resources/reference/elements.md#custom-styles)as other elements.

With this element, you must provide a `refundToken`, which is provided in the refund response from our APIs.

{% tabs %}
{% tab title="Example" %}

```javascript
var offlineOptions = {
    classes: {
        base: "DRElement",
        complete: "offline-refund-complete",
        invalid: "offline-refund-invalid"
    },
    style: {
        base: {
            color: '#495057',
            height: '35px',
            fontSize: '1rem',
            fontFamily: 'apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif',
            fontWeight: 'lighter',
            ':hover': {
                color: '#ccc',
            },
            '::placeholder': {
                color: '#495057'
            }
        },
        focus: {
            ':hover': {
                color: '#495057',
            },
        },
        empty: {
            ':hover': {
                color: '#495057',
            },
        },
        complete: {
            ':hover': {
                color: '#495057',
            },
        }
    },
    refundToken: 'fb19fceb-a5e7-454d-af1a-017b7bd73d5b'
};


let offlineRefund = digitalriverpayments.createElement('offlinerefund', offlineOptions);
```

{% endtab %}
{% endtabs %}

## Offline Refund element functions

### offlineRefund.mount();

Call this function to place the created offline refund element on your page.

{% tabs %}
{% tab title="Example" %}

```markup
<div id="offline-refund"></div>

offlineRefund.mount('offline-refund')
```

{% endtab %}
{% endtabs %}

### offlineRefund.unmount();

Call this function to remove the offline refund element from your page. The element may be re-added to your page by calling `mount()`.

{% tabs %}
{% tab title="Example" %}

```markup
offlineRefund.unmount();
```

{% endtab %}
{% endtabs %}

### offlineRefund.destroy();

Call this function to remove the offline refund element from your page as well as remove its functionality. You cannot re-add an element that has been destroyed to your page via `mount()`.

{% tabs %}
{% tab title="Example" %}

```javascript
offlineRefund.destroy();
```

{% endtab %}
{% endtabs %}

## Offline Refund element events - offlineRefund.on('event', handler);

Use this function to listen to events that can be used to build and enhance your purchase flow.

| Event             | Triggered When                                           |
| ----------------- | -------------------------------------------------------- |
| [ready](#ready)   | The created element is loaded and ready to accept input. |
| [change](#change) | The element's state has changed.                         |

### Ready

The Ready event triggers when the element loads and is available to take user input.

{% tabs %}
{% tab title="Example" %}

```javascript
offlineRefund.on('ready', function(event) {
    //offline refund element is ready and can accept user input
});
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Response object" %}

```javascript
{
    elementType: "offlinerefund"
}
```

{% endtab %}
{% endtabs %}

### Change

A change event triggers when the offline refund element's state has changed. If using this element, you will only receive this event when the customer has filled out the form and the data has been accepted. At this point, you may remove the element from your screen by calling `unmount()` or `destroy()`.

{% tabs %}
{% tab title="Example" %}

```javascript
offlineRefund.on('change', function(event) {
    console.log('offline refund change', event);
});
```

{% endtab %}
{% endtabs %}

| Key         | Value Description                           |
| ----------- | ------------------------------------------- |
| complete    | Whether the element is in a complete state. |
| elementType | The type of element.                        |

{% tabs %}
{% tab title="Response object" %}

```javascript
{
    complete: true,
    empty: false,
    elementType: "offlinerefund",
    error: null
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalriver.com/digital-river-api/developer-resources/reference/elements/offline-refund-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.