# 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**](https://docs.digitalriver.com/digital-river-api/payments/payment-integrations-1/digitalriver.js/payment-methods/konbini)–where the shopper must go to a convenience store to pay.
* [**Wire Transfer**](https://docs.digitalriver.com/digital-river-api/payments/payment-integrations-1/digitalriver.js/payment-methods/wire-transfer)–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](https://docs.digitalriver.com/digital-river-api/order-management/creating-and-updating-an-order#handling-pending-payment-orders) on the [Processing orders](https://docs.digitalriver.com/digital-river-api/order-management/creating-and-updating-an-order) 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 |