# Delayed Payment Instructions element

You can use the Delayed Payment Instructions element to generate a template that contains the instructions that explain how to complete payment for delayed payment types such as:

* [**Konbini**](/digital-river-api/payments/payment-integrations-1/digitalriver.js/payment-methods/konbini.md)–where the shopper must go to a convenience store to pay.
* [**Wire Transfer**](/digital-river-api/payments/payment-integrations-1/digitalriver.js/payment-methods/wire-transfer.md)–where the shopper has to go to their bank to wire money to the payment partner's bank.

Access the [Delayed Payment Instructions demo](https://tools.drapi.io/cm/delayed-payments/delayed-payment-instructions-builder) to view the example output generated by the element. You can style and arrange this output using custom CSS in your application.

For details on using the element in a purchase flow, refer to [Handling pending payment orders](/digital-river-api/order-management/creating-and-updating-an-order.md#handling-pending-payment-orders) on the [Processing orders](/digital-river-api/order-management/creating-and-updating-an-order.md) page.

## Creating a Delayed Payment Instructions element

To create a Delayed Payment Instructions element, use the `createElement` function exposed through the DigitalRiver Object. You can localize the content by using the localization functionality of DigitalRiver.js.

The Delayed Payment Instructions element also requires an `options` object. The `options` object requires the following attributes:

| Attribute          | Description                       |
| ------------------ | --------------------------------- |
| sourceId           | The source ID.                    |
| sourceClientSecret | The client secret for the source. |

{% tabs %}
{% tab title="Example" %}
{% code overflow="wrap" %}

```javascript
let options = {
    "sourceId": "fc8b2df1-2a57-4b2d-82bb-dc62081d76c4",
    "sourceClientSecret": "fc8b2df1-2a57-4b2d-82bb-dc62081d76c4_deb0d81e-0666-4189-a1c3-ed677b1a5b2a"
}
 
let delayedPaymentInstructions = digitalriver.createElement('delayedpaymentinstructions', options);
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Delayed Payment Instructions element functions

### delayedPaymentInstructions.mount();

Call this function to place the created Delayed Payment Instructions element on your page.

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

```javascript
<div id="delayed-payment-container"></div>
 
delayedPaymentInstructions.mount("delayed-payment-container");
```

{% endtab %}
{% endtabs %}

## Delayed Payment Instructions element events

### delayedPaymentInstructions.on('event', handler);

Use this function to listen to events that you use to build and enhance your purchase flow.

| Event           | Triggered When                 |
| --------------- | ------------------------------ |
| [ready](#ready) | The created element is loaded. |

### Ready

A Ready event triggers when the Delayed Payment Instructions element has loaded.

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

```javascript
delayedPaymentInstructions.on('ready', function(event) {
    //delayed payment instructions element is ready
});
```

{% endtab %}
{% endtabs %}

| Key         | Value                      |
| ----------- | -------------------------- |
| elementType | delayedPaymentInstructions |


---

# 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/delayed-payment-instructions-element.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.