# Performing actions

In [Prebuilt Checkout](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout), various callback functions can be assigned to properties in its[ configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout). Some of these functions accept an optional `actions` parameter, which allows you to:

* [Display custom messages in the order summary section](#display-custom-order-summary-messages)
* [Customize the thank you page](#customize-the-order-confirmation)
* [Reject invalid address inputs](#reject-address-inputs)

{% hint style="info" %}
Some callbacks in the [checkout button configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button) also accept `actions`. For details, refer to [Performing actions on the checkout button](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button/performing-actions-on-the-checkout-button).
{% endhint %}

## Display custom order summary messages

You can use [`orderSummary`](#ordersummary) to render specific messages in the Prebuilt Checkout window.

### `orderSummary`

The `orderSummary` property in [`actions`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/performing-actions) allows you to specify whether you want a customized message to be displayed in the [`middle`](#middle) and/or the [`bottom`](#bottom) of this section in Prebuilt Checkout.

You might find this useful if you'd like to, as an example, inform customers that the order summary amounts aren't final until they've selected a shipping option, provided applicable tax identification numbers, and applied the payment.

#### `middle`

This property allows you to access the `middle` of the window's [`orderSummary`](#ordersummary) section.

#### `bottom`

This property allows you to access the `bottom` of the window's [`orderSummary`](#ordersummary) section.

#### `addCustomMessage(message, showInfoIcon)`

This function displays a customized message in the [`middle`](#middle) or [`bottom`](#bottom) of [`orderSummary`](#ordersummary). It accepts an optional string representing the message you want displayed and an optional boolean, which determines whether Digital River displays an information icon next to your message.

The default value of `showInfoIcon` is `true`.

#### `deleteCustomMessage()`

This function deletes any customized messages that exists in the [`middle`](#middle) or [`bottom`](#bottom) of [`orderSummary`](#ordersummary).

{% tabs %}
{% tab title="Add and delete custom message" %}
When [`onInit`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/..#oninit) executes, the following procedure loads your message in the middle of the order summary section.

<pre class="language-javascript"><code class="lang-javascript"><strong>config.onInit = (checkoutSession, actions) => {
</strong><strong>     actions.orderSummary.middle.addCustomMessage('A message in the middle');  
</strong>};
...
config.onAddressComplete = (address, actions) => {
     actions.orderSummary.middle.deleteCustomMessage();
     actions.orderSummary.bottom.addCustomMessage('A new message at the bottom');
};
</code></pre>

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2FOxnVIc5wxcoDO9tlvw2o%2Fmessage%20in%20the%20middle.png?alt=media&#x26;token=37cce38a-1ec7-4da6-97e7-76fa45a10bbb" alt=""><figcaption></figcaption></figure>

After users successfully submit their address information and [`onAddressComplete`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/..#onaddresscomplete) executes, the middle message is deleted, and a different message is added to the bottom.

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2F69YHdhWBdLwMgt4zFGyF%2Fmessage%20at%20the%20bottom.png?alt=media&#x26;token=27aa6feb-5e1d-4424-9b35-eb459386396e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Add custom message without icon" %}
When [`onInit`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/..#oninit) executes, the following procedure loads your message, without an information icon, in the middle of the order summary section.

```javascript
config.onInit = (checkoutSession, actions) => {
     actions.orderSummary.middle.addCustomMessage('A message in the middle', false);  
};
```

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2FdPvKu6Vq7WgGegzT9Qiw%2Fmessage%20in%20the%20middle%20w-o%20icon.png?alt=media&#x26;token=17710911-bb2c-4003-816c-fb3284d1b825" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Customize the order confirmation

You can use [`thankYouPage`](#thankyoupage) to customize the order confirmation stage.

### `thankYouPage`

In [`actions`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/performing-actions), the `thankYouPage` property, which defines the [order confirmation stage](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#order-confirmation), exposes [`replaceDefaultMessage()`](#replacedefaultmessage-message-showcheckcircleicon).

#### `replaceDefaultMessage(message, showCheckCircleIcon)`

If you omit [`options.thankYouPage`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/..#customize-order-confirmation), then you can use `replaceDefaultMessage()` to modify the [default order confirmation](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#order-confirmation).

This function accepts a string, which represents the message you want displayed.

If you'd like the order's identifier injected into this message, add `{{orderId}}` to the string. When the template renders, Digital River dynamically replaces this placeholder with the order's `id` in our system or, if you passed `upstreamId` in the [create checkout-session request](https://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions#drop-in-checkout-sessions), that value.

The function also accepts an optional boolean that determines whether Digital River displays a circle check icon (a visual cue that the purchase was successful) before your customized message.

The default value of `showCheckCircleIcon` is `true`.

Invoke `replaceDefaultMessage()` inside [`onInit`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/..#oninit) and make sure to pass `checkoutSession` to this callback function.

{% tabs %}
{% tab title="Custom message" %}
When `onInit` executes, the following procedure loads your replacement message in [`thankYouPage`](#thankyoupage).

```javascript
config.onInit = (checkoutSession, actions) => {
     actions.thankYouPage.replaceDefaultMessage('<p>A customized thank you message. The order number is #{{orderId}}.</p>');  
};
```

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2Fr3SGrKoVCfn5x9AzWzfG%2Fmessage%20on%20the%20thank%20you%20page.png?alt=media&#x26;token=12dc1de5-f9ea-457c-9a20-773174182ee8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Custom message without icon" %}
When `onInit` executes, the following procedure loads your replacement message without a check circle icon in [`thankYouPage`](#thankyoupage).

```javascript
config.onInit = (checkoutSession, actions) => {
     actions.thankYouPage.replaceDefaultMessage('<p>A customized thank you message without a circle check icon. The order number is #{{orderId}}.</p>', false);  
};
```

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2F0kDGm6LfQmP0yA9CtNAU%2Fmessage%20w-o%20icon%20on%20the%20thank%20you%20page.png?alt=media&#x26;token=9b94c108-fd9e-4c86-bf56-d92299de1b3e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Reject address inputs

The [`reject()`](#reject) function, exposed by [`actions`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/performing-actions), allows you to refuse shipping and billing inputs that you deem invalid.

### `reject()`

If invoked in [`onAddressComplete`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/..#onaddresscomplete), then `reject()` (1) blocks customers from proceeding to the checkout's next stage, and (2) displays an error message.

It accepts an optional string representing the error message you'd like displayed. If you don't define this parameter, Digital River displays a default message.

{% tabs %}
{% tab title="Custom error message" %}

```javascript
config.onAddressComplete = (address, actions) => {
    ...
    return actions.reject('Your customized error message');
};
```

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2FemhoFIvYKAhPyo70dh19%2Fimage.png?alt=media&#x26;token=5cfb2b40-4dc1-4f84-8d2c-edc1951dcb98" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Default error message" %}

```javascript
config.onAddressComplete = (address, actions) => {
    ...
    return actions.reject();
};
```

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2FkteOSIwEZEpcIk0R8aQl%2Fimage.png?alt=media&#x26;token=a5fab923-d128-4a69-b428-8103acbc7d17" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

You can use `reject()` to screen out specific address categories. For example, with a regular expression and `reject()`, you can prevent customers from shipping products to P.O. boxes.

{% tabs %}
{% tab title="Event handler" %}

```javascript
config.onAddressComplete = (address, actions) => {
    if (address.address.shipping === null) {
        console.log("This is a checkout that only contains digital products. No shipping validation needed");
    }
    else {
        let line1 = address.address.shipping.address.line1;
        let line2 = address.address.shipping.address.line2;
        let combinedLines;
        if (line2 !== undefined) {
            combinedLines = line1 + line2;
        }
        else {
            combinedLines = line1;
        }
        const regexPostOfficeBox = /\b[P|p]*(OST|ost)*\.*\s*[O|o|0]*(ffice|FFICE)*\.*\s*[B|b][O|o|0][X|x]\b/;
        let isPostOfficeBox = regexPostOfficeBox.test(combinedLines);
        if (isPostOfficeBox) {
            return actions.reject('We cannot ship to a post office box.\nPlease provide a different shipping address.');
        }
    }
};
```

{% endtab %}

{% tab title="Prebuilt Checkout" %}

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2Fws9GF2sQqbK2XDizLkOL%2Fimage.png?alt=media&#x26;token=a7ed5f8e-2e43-4447-90a1-3a6115c65ff8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}