---
updatedAt: 2026-03-16T19:35:06.000Z
agentTools:
  projectIndex: https://docs.withreach.com/llms.txt
---

# Getting started

This guide provides information and step-by-step instructions on integrating Reach's Drop-In API into your application.

# Step 1. Set up your environment for success

The following topics cover the setup required before making requests to the API, including acquiring necessary credentials and configuring your environment.

## Credentials

Before you get started, you will need the following credentials:

* **Merchant ID (MID)**: This credential represents your account within the Reach system.
* **HMAC secret**:  Use this credential to validate notifications.
* **API Username and password**: You need these credentials to authorize requests sent to the Drop-In API. For more information, see [Authentication](https://docs.withreach.com/reference/authentication). Requests sent to the Session API and the Order API are authorized using HTTP Basic Authorization. The API username and password supplied to you by Reach are used to create the Authorization header key/value pair. If you need support getting these credentials, contact your Reach representative or email [sales@withreach.com](sales@withreach.com).

> <strong>For example</strong>
>
> If your username is "account" and password is "secret," the base64-encoded value of account:secret is the string value "YWNjb3VudDpzZWNyZXQ=".
>
> The Basic Authorization header for requests to the API would be Authorization:\
> Basic YWNjb3VudDpzZWNyZXQ=

<CardCallout type="warning" title="Important">
  Never save your MID or API credentials in any publicly accessible project or repository, especially not in client-side code. Instead, store this information in environment variables outside your project.

  You must send all API requests over a secure TLS 1.2 connection.
</CardCallout>

<Embed url="https://www.youtube.com/watch?v=-KfV9ZBhBGQ" href="https://www.youtube.com/watch?v=-KfV9ZBhBGQ" typeOfEmbed="youtube" html="%3Ciframe%20class%3D%22embedly-embed%22%20src%3D%22%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252F-KfV9ZBhBGQ%253Fstart%253D64%2526feature%253Doembed%26display_name%3DYouTube%26url%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253D-KfV9ZBhBGQ%26image%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252F-KfV9ZBhBGQ%252Fhqdefault.jpg%26type%3Dtext%252Fhtml%26schema%3Dyoutube%22%20width%3D%22854%22%20height%3D%22480%22%20scrolling%3D%22no%22%20title%3D%22YouTube%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%3B%20encrypted-media%3B%20picture-in-picture%3B%22%20allowfullscreen%3D%22true%22%3E%3C%2Fiframe%3E" />

## Webhook URL

Use the webhook to send notifications from Drop-In to your backend administration system or database.

## Web server

You will also need a web server for Drop-In integrations. Typically, this is the server hosting your existing store. A web server lets your app talk to the Drop-In API without exposing sensitive information like credentials or billing details.

## Session request and response

A session request **requires** the following parameters:

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>
        Parameter
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `MerchantReference`
      </td>

      <td>
        The supplier's unique identifier.
      </td>
    </tr>

    <tr>
      <td>
        `Currency`
      </td>

      <td>
        Specify the [three-character ISO-4217 currency code](https://www.iban.com/currency-codes) used to process the payment.
      </td>
    </tr>

    <tr>
      <td>
        `Items`
      </td>

      <td>
        This object includes the list of items to be paid. This array must contain at least one `Item`. Each Item object must include `Name`, `Amount`, and `Quantity` properties.
      </td>
    </tr>

    <tr>
      <td>
        `BillingProfile`
      </td>

      <td>
        Reach can store your customer's billing information, which can be retrieved later using the `BillingProfileId` returned in the request response.
        The request body requires either `BillingProfile`, `BillingProfileReference`, or `BillingProfileId`. If you provide the `BillingProfile`, the request will create a new billing profile. Otherwise, use `BillingProfileReference` or `BillingProfileId` to refer to an existing billing profile.
      </td>
    </tr>

    <tr>
      <td>
        `AutoCapture`
      </td>

      <td>
        Drop-In supports two options for capturing funds from a transaction once the session has created and authorized the order: auto and delayed capture.
        This parameter flags whether a payment should be captured immediately or sometime in the future, such as when the product has shipped. For more information, see [Auto capture](https://docs.withreach.com/docs/getting-started-drop-in#step-2a-integrating-drop-in-with-auto-capture) and [Delayed capture](https://docs.withreach.com/docs/getting-started-drop-in#step-2b-integrating-drop-in-with-delayed-capture).
      </td>
    </tr>

    <tr>
      <td>
        `CompleteUrl`
      </td>

      <td>
        This is the URL for your "success" page. The [Create a new session](https://docs.withreach.com/reference/createsession) request redirects the shopper to this page
      </td>
    </tr>

    <tr>
      <td>
        `CancelUrl`
      </td>

      <td>
        This is the URL for your "cancel" page. If the transaction is not completed successfully, the [Create a new session](https://docs.withreach.com/reference/createsession) request redirects the shopper to this page.
      </td>
    </tr>
  </tbody>
</Table>

A session response contains the following parameters in a JSON object. This object contains useful information about the shopper's order, which you can store in your database and use to retrieve information about the session in the future.

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>
        Parameters
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `SessionId`
      </td>

      <td>
        This is a unique identifier for your customer's session. The [rch.js library](https://docs.withreach.com/docs/drop-in-rchjs-guide) will use it to instantiate the Drop-In app on your checkout page.
      </td>
    </tr>

    <tr>
      <td>
        `State`
      </td>

      <td>
        The following values indicate the state of the session:
        `CREATED`: The session has been successfully created.
        `REDIRECTED`: The session has been redirected.
        `COMPLETED`: The session is complete.
        `CANCELED`: The session was cancelled.
        `FAILED`:  The session has failed.

        * _Note_: The video below accidentally describes the order states instead of the session states. The information provided here about the session is correct.
      </td>
    </tr>

    <tr>
      <td>
        `MerchantReference`
      </td>

      <td>
        The supplier's unique identifier.
      </td>
    </tr>

    <tr>
      <td>
        `Currency`
      </td>

      <td>
        Displays the [three-character ISO-4217 currency code](https://www.iban.com/currency-codes) used to process the payment.
      </td>
    </tr>

    <tr>
      <td>
        `TotalAmount`
      </td>

      <td>
        The total value of the order is displayed in the customer's preferred currency.
      </td>
    </tr>

    <tr>
      <td>
        `Items`
      </td>

      <td>
        This object contains the list of items to be paid. This array must contain at least one `Item`. Each Item object contains the `Name`, `Amount`, and `Quantity` properties.
      </td>
    </tr>

    <tr>
      <td>
        `ViaAgent`
      </td>

      <td>
        Indicates that an agent created this session, not the end consumer. If false or not present, the session is assumed to have been placed by the end consumer. You can set this optional Boolean parameter to true in the session request.
      </td>
    </tr>
  </tbody>
</Table>

# Step 2. Integrating Drop-In with auto or delayed capture

Capture types determine how and when Drop-In collects shoppers' payments after placing orders. Choose one of the following capture types and follow the corresponding Drop-In integration instructions:

* **[Auto capture](https://docs.withreach.com/docs/getting-started-drop-in#step-2a-integrating-drop-in-with-auto-capture)**: This method captures the payment automatically when the session ends, and the order is created successfully. It is ideal for businesses that have products ready to sell and want to simplify the payment process.
* **[Delayed capture](https://docs.withreach.com/docs/getting-started-drop-in#step-2b-integrating-drop-in-with-delayed-capture)**: This method lets the supplier keep an order authorized while holding the funds. They can do this until they are ready to ship the order and collect the payment. Use this feature if your business needs more time to prepare products for shipping.

## Step 2a. Integrating Drop-In with auto capture

By integrating using auto capture, you are instructing Reach to automatically capture the transaction funds as soon as the Session has created and authorized the Order.

There are the **3 Steps** to the Auto Capture implementation:

<Image align="center" alt="Auto Capture implementation flow" caption="Auto capture implementation flow" title="autoCapture.png" src="https://files.readme.io/710fec5a558c5bc4e5b97dab3d7e8bf82841e427469dbfce6650005b3a778df0-Reach_-_Page_30_1.png" width="100% " />

### Step 2a.1. Create a new session with auto capture

This step shows you how to create a new session request using the [Session API](https://docs.withreach.com/reference/createsession). This new session request occurs when a shopper adds items to their cart and goes to the checkout page on your website. For more information, see our [Reach Drop-In API](https://docs.withreach.com/reference/authentication) section.

<Embed url="https://www.youtube.com/watch?v=-KfV9ZBhBGQ" href="https://www.youtube.com/watch?v=-KfV9ZBhBGQ" typeOfEmbed="youtube" html="%3Ciframe%20class%3D%22embedly-embed%22%20src%3D%22%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252F-KfV9ZBhBGQ%253Fstart%253D123%2526feature%253Doembed%2526start%253D123%26display_name%3DYouTube%26url%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253D-KfV9ZBhBGQ%26image%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252F-KfV9ZBhBGQ%252Fhqdefault.jpg%26type%3Dtext%252Fhtml%26schema%3Dyoutube%22%20width%3D%22854%22%20height%3D%22480%22%20scrolling%3D%22no%22%20title%3D%22YouTube%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%3B%20encrypted-media%3B%20picture-in-picture%3B%22%20allowfullscreen%3D%22true%22%3E%3C%2Fiframe%3E" />

To create a session using auto capture, send a [/session](https://docs.withreach.com/reference/createsession) request and include the required parameter:

1. Go to the [Session API](https://docs.withreach.com/reference/createsession) in the [Reach Drop-In API](https://docs.withreach.com/reference/authentication).
2. Choose the programming language you want to use for code generation, such as Node.js.

<Image align="center" alt="Programming language" caption="Programming language" src="https://files.readme.io/44d97937be5ea4ae3927353c55b9cea6d9d7377c27f33b607bf0808396f7ca63-Language.png" />

3. Provide your API username and password in the **Credentials** fields. The request will combine your credentials into a base64-encoded string and send it in an Authorization header to verify your request.

<Image align="center" alt="Credential fields" caption="Credential fields" src="https://files.readme.io/dc5e7618d9c5533ebadbf3ff84284642c228131f3004006032428efd6885347b-Credentials.png" />

4. Click **API REQUEST** and select the library you want to use to make the Session API request from the **LIBRARY** dropdown list, such as **API**.

<Image align="center" alt="Library dropdown list" caption="Library dropdown list" src="https://files.readme.io/e8202f1958e30dcb97859a9cc575d292f22d0af3828d02c28878309347b4c0c4-Library.png" />

5. Set the `AutoCapture` boolean to `true` in the request body to enable auto-capture for capturing funds from a transaction once the session has been created and the order has been authorized. Also, include the required parameters to create the session as specified in [Create a new session](https://docs.withreach.com/reference/createsession). Some additional parameters are conditionally required depending on your customer's country of origin, which you can find on the <Anchor label="Country-specific fields" target="_blank" href="https://docs.withreach.com/reference/country-spec">Country-specific fields</Anchor>  page.

<CardCallout type="brand" title="Best practice">
  To see a fully built request, click **EXAMPLES** and select a request example from the **Request Example** dropdown list. You can copy this code into your project and adapt it to your project's requirements.

  <img src="https://files.readme.io/b1bc4175ecff425f6891f8ea6c24094b993867480b027cccce4138794c70594d-Examples.png" alt="Request examples" />
</CardCallout>

6. Click **Try It!** to send the session request.

<Image align="center" alt="Try It! button" caption="Try It! button" src="https://files.readme.io/6405dc92c95d3ea3e4757277ede71b1bc03433731b97876cfd7782fb37d5f2c3-Try_It.png" />

You will receive a JSON object in the response. This object contains valuable information about your customer's order, which can be stored in your database and used to retrieve information about the session in the future. To see if you enabled auto capture correctly, verify that you set the `AutoCapture` field to `true` in the response.  See [Session request and response](#session-request-and-response) for a description of the parameters and the [Session API](https://docs.withreach.com/reference/createsession) for a more detailed look at the API.

```Text Request example
    # Location
    POST https://api.withreach.com/v1/session
    
    #Headers
    Authorization: Basic YWNjb3VudDpzZWNyZXQ=
    Content-Type: application/json
    
    #Body
    {
        "MerchantReference": "unique_reference_provided_by_supplier",
        "Currency": "USD",
        "Items": [
            {
                "Name": "Item 1",
                "Amount": 10.00,
                "Quantity": 1
            },
            {
                "Name": "Item 2",
                "Amount": 12.00,
                "Quantity": 2
            }
        ],
        "BillingProfile": {
            "Name": "First Last",
            "Email": "email@example.org",
            "Address": {
                "Street": "123 Street",
                "City": "City",
                "Region": "AB",
                "Country": "CA",
                "Postcode": "X0X0X0",
                "Phone": "4031234567"
            }
        },
        "ShippingDetails": {
            "ShippingAmount": 0.00,
            "DutyAmount": 0.00,
            "Name": "First Last",
            "Email": "email@example.org",
            "Phone": "4031231234",
            "Address": {
                "Street": "123 Street",
                "City": "City",
                "Region": "AB",
                "Country": "CA",
                "Postcode": "X0X0X0"
            }
        },
        "AutoCapture": true,
        "CompleteUrl": "https://www.send-user-here-after-success-redirect.com",
        "CancelUrl": "https://www.send-user-here-after-failed-redirect.com"
    }
```
```json Response example
    #Headers
    Content-Type: application/json
    
    #Body
    {
        "SessionId": "91b64778-0d37-479c-ae9f-32f6685ac6ea",
        "State": "CREATED",
        "MerchantReference": "unique_reference_provided_by_supplier",
        "Items": [
            {
                "Name": "Item 1",
                "Amount": 10.00,
                "Quantity": 1
            },
            {
                "Name": "Item 2",
                "Amount": 12.00,
                "Quantity": 2
            }
        ],
        "Currency": "USD",
        "TotalAmount": 34.00,
        "BillingProfile": {
            "Name": "First Last",
            "Email": "email@example.org",
            "Address": {
                "Street": "123 Sreet",
                "City": "City",
                "Region": "AB",
                "Country": "CA",
                "Postcode": "X0X0X0",
                "Phone": "4031234567"
            }
        },
        "ShippingDetails": {
            "ShippingAmount": 0.00,
            "DutyAmount": 0.00,
            "Name": "First Last",
            "Email": "email@example.org",
            "Phone": "4031231234",
            "Address": {
                "Street": "123 Sreet",
                "City": "City",
                "Region": "AB",
                "Country": "CA",
                "Postcode": "X0X0X0"
            }
        },
        "AutoCapture": true,
        "CompleteUrl": "https://www.send-user-here-after-success-redirect.com",
        "CancelUrl": "https://www.send-user-here-after-failed-redirect.com"
    }
```

### Step 2a.2. Instantiate Drop-In using auto capture

Follow these steps to instantiate the Drop-In using auto capture:

1. Add an HTML container element to your page to hold the Drop-In.
2. Create a JavaScript method to complete the logic once the Drop-In is successful.
3. Create a JavaScript method to handle failure cases if the payment is not successful.
4. Add the Drop-In (rch.js) script to your page. See the [Drop-in rch.js guide](https://docs.withreach.com/docs/drop-in-rchjs-guide) for more detailed information about the `rch.js` file.
5. Call the Reach `init()` method and pass in an object with a `target`, `id`, `onSuccess`, and `onFailure` properties.

When finished, your page should look something like this:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        ...
        <script defer src="https://asset.withreach.com/dist/rch.js" onload="init()"></script>
        <script>
            function onSuccess() {
                <!-- Perform any actions after the Drop-In is completed (i.e., redirect to success URL). -->
                window.location.replace("/success/");
            }
            function onFailure(error) {
                <!-- Perform any actions to handle payment failure. -->
                document.querySelector("#message").innerHTML = 
                    "Oops! Something went wrong. More information: " + error.errorCode + 
                    ", " + error.errorMessage + " Please review your information.";
            }
            function init() {
                <!-- 91b64778-0d37-479c-ae9f-32f6685ac6ea is the session ID -->
                RCH_CC.rchInit({target:"#rch-dropin",id:"91b64778-0d37-479c-ae9f-32f6685ac6ea", onSuccess, onFailure});
            }
        </script>
        ...
        ...
    </head>
    <body>
        ...
        ...
        <div id=”rch-dropin”></div>
        ...
        ...
    </body>
</html>
```

The `onSuccess` method passed into the `init` method indicates that the payment was successfully initiated, allowing you to redirect the shopper to the success page.

<CardCallout type="warning" title="Note">
  The `onSuccess` method indicates that the payment process has been successfully initiated, not that the payment is complete. The payment is finalized only when you receive the  `ORDER_PROCESSED` notification.
</CardCallout>

The `onFailure` method passed into the `init` method is called when encountering an unrecoverable error inside the session. The error code and message are passed into `onFailure` and can be used to determine which action to take. For example, a message could be displayed to the end user indicating what failed.

### Step 2a.3. Receive notifications for auto capture

The Drop-In will notify you when it takes action against a Session or Order. To receive these notifications, you must configure your server to listen for them by creating an endpoint at the webhook URL provided to Reach during onboarding. See the [Notifications guide](https://docs.withreach.com/reference/notifications-2) for more details.

If the Order is processed successfully, you will receive notifications from `SESSION_COMPLETED`, `ORDER_AUTHORIZED`, and `ORDER_PROCESSED`.  The payment is complete once you receive the `ORDER_PROCESSED` notification.

<CardCallout type="warning" title="Note">
  For auto capture, the `SESSION_COMPLETED` and `ORDER_AUTHORIZED` notifications should be logged but not acted upon.
</CardCallout>

The `ORDER_PROCESSED` notification will look like this:

```json
{
  "EventType": "ORDER_PROCESSED",
  "Order": {
    "OrderId": "cc7236aa-d11b-436c-a29c-d26cecadc847",
    "State": "PROCESSED",
    "MerchantReference": "unique_reference_provided_by_supplier",
    "SessionId": "91b64778-0d37-479c-ae9f-32f6685ac6ea"
  }
}
```

Upon successfully receiving a notification, you should respond with HTTP status 200. If you reply with a status outside that range, we will resend the notification later. See the [Notifications guide](https://docs.withreach.com/reference/notifications-2) for more details.

## Step 2b. Integrating Drop-In with delayed capture

By integrating using delayed capture, the Order remains Authorized until you instruct Reach to capture the funds via an API request to the [Order API](/reference/order-api-guide-1).

There are **5 Steps** to the delayed capture implementation:

<Image align="center" alt="Delayed Capture implementation flow" caption="Delayed capture implementation flow" title="delayedCapture.png" src="https://files.readme.io/705d5f446fbdefb8222497043703e7c83f11391f06b999363c6fff54d7c5aa8b-Reach_-_Page_31.png" width="100% " />

### Step 2b.1. Create a new session with delayed capture

This step shows you how to create a new session request using the [Session API](https://docs.withreach.com/reference/createsession). This new session request occurs when a shopper adds items to their cart and goes to the checkout page on your website.  For more information, see our [Reach Drop-In API](https://docs.withreach.com/reference/authentication) section.

<Embed url="https://www.youtube.com/watch?v=-KfV9ZBhBGQ" href="https://www.youtube.com/watch?v=-KfV9ZBhBGQ" typeOfEmbed="youtube" html="%3Ciframe%20class%3D%22embedly-embed%22%20src%3D%22%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Fsrc%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252F-KfV9ZBhBGQ%253Fstart%253D123%2526feature%253Doembed%2526start%253D123%26display_name%3DYouTube%26url%3Dhttps%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253D-KfV9ZBhBGQ%26image%3Dhttps%253A%252F%252Fi.ytimg.com%252Fvi%252F-KfV9ZBhBGQ%252Fhqdefault.jpg%26type%3Dtext%252Fhtml%26schema%3Dyoutube%22%20width%3D%22854%22%20height%3D%22480%22%20scrolling%3D%22no%22%20title%3D%22YouTube%20embed%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%3B%20encrypted-media%3B%20picture-in-picture%3B%22%20allowfullscreen%3D%22true%22%3E%3C%2Fiframe%3E" />

To create a session using delayed capture, send a [/session](https://docs.withreach.com/reference/createsession) request and include the required parameters:

1. Go to the [Session API](https://docs.withreach.com/reference/createsession) in the [Reach Drop-In API](https://docs.withreach.com/reference/authentication).
2. Choose the programming language you want to use for code generation, such as Node.js.

<Image align="center" alt="Programming language" caption="Programming language" src="https://files.readme.io/44d97937be5ea4ae3927353c55b9cea6d9d7377c27f33b607bf0808396f7ca63-Language.png" />

3. Provide your username and password in the **Credentials** fields. The request will combine your credentials into a base64-encoded string and send it in an Authorization header to verify your request.

<Image align="center" alt="Credential fields" caption="Credential fields" src="https://files.readme.io/dc5e7618d9c5533ebadbf3ff84284642c228131f3004006032428efd6885347b-Credentials.png" />

4. Click **API REQUEST** and select the library you want to use to make the Session API request from the **LIBRARY** dropdown list, such as **API**.

<Image align="center" alt="Library dropdown list" caption="Library dropdown list" src="https://files.readme.io/62e5794b0ae7a04af64b2cb341a52ef0c26421cde9cc9ed83d36e6d18996b5e0-Library.png" />

5. Set the `AutoCapture` boolean to `false` in the request body to delay the capture of funds from a transaction after the session is created and the order is authorized. Also, include the required parameters to create the session as specified in [Create a new session](https://docs.withreach.com/reference/createsession). Some additional parameters are conditionally required depending on your customer's country of origin, which you can find on the <Anchor label="Country-specific fields" target="_blank" href="https://docs.withreach.com/reference/country-spec">Country-specific fields</Anchor> page.

<CardCallout type="brand" title="Best practice">
  To see a fully built request, click **EXAMPLES** and select a request example from the **Request Example** dropdown list. You can copy this code into your project and adapt it to your project's requirements.

  <img src="https://files.readme.io/b1bc4175ecff425f6891f8ea6c24094b993867480b027cccce4138794c70594d-Examples.png" alt="Request examples" />
</CardCallout>

6. Click **Try It!**  to send the session request.

<Image align="center" alt="Click the Try It! button" caption="Try It! button" src="https://files.readme.io/6405dc92c95d3ea3e4757277ede71b1bc03433731b97876cfd7782fb37d5f2c3-Try_It.png" />

You will receive a JSON object in the response. This object contains valuable information about your customer's order, which can be stored in your database and used to retrieve information about the session in the future. To see if you delayed capture correctly, verify that you set the `AutoCapture` field to `false` in the response.  See [Session request and response](#session-request-and-response) for a description of the parameters and the [Session API](https://docs.withreach.com/reference/createsession) for a more detailed look at the API.

```http Request example
# Location
POST https://api.withreach.com/v1/session

#Headers
Authorization: Basic YWNjb3VudDpzZWNyZXQ=
Content-Type: application/json

#Body
{
    "MerchantReference": "unique_reference_provided_by_supplier",
    "Currency": "USD",
    "Items": [
        {
            "Name": "Item 1",
            "Amount": 10.00,
            "Quantity": 1
        },
        {
            "Name": "Item 2",
            "Amount": 12.00,
            "Quantity": 2
        }
    ],
    "BillingProfile": {
        "Name": "First Last",
        "Email": "email@example.org",
        "Address": {
            "Street": "123 Street",
            "City": "City",
            "Region": "AB",
            "Country": "CA",
            "Postcode": "X0X0X0",
            "Phone": "4031234567"
        }
    },
    "ShippingDetails": {
        "ShippingAmount": 0.00,
        "DutyAmount": 0.00,
        "Name": "First Last",
        "Email": "email@example.org",
        "Phone": "4031231234",
        "Address": {
            "Street": "123 Street",
            "City": "City",
            "Region": "AB",
            "Country": "CA",
            "Postcode": "X0X0X0"
        }
    },
    "AutoCapture": false,
    "CompleteUrl": "https://www.send-user-here-after-success-redirect.com",
    "CancelUrl": "https://www.send-user-here-after-failed-redirect.com"
}
```
```json Response example
#Headers
Content-Type: application/json

#Body
{
    "SessionId": "91b64778-0d37-479c-ae9f-32f6685ac6ea",
    "State": "CREATED",
    "MerchantReference": "unique_reference_provided_by_supplier",
    "Items": [
        {
            "Name": "Item 1",
            "Amount": 10.00,
            "Quantity": 1
        },
        {
            "Name": "Item 2",
            "Amount": 12.00,
            "Quantity": 2
        }
    ],
    "Currency": "USD",
    "TotalAmount": 34.00,
    "BillingProfile": {
        "Name": "First Last",
        "Email": "email@example.org",
        "Address": {
            "Street": "123 Sreet",
            "City": "City",
            "Region": "AB",
            "Country": "CA",
            "Postcode": "X0X0X0",
            "Phone": "4031234567"
        }
    },
    "ShippingDetails": {
        "ShippingAmount": 0.00,
        "DutyAmount": 0.00,
        "Name": "First Last",
        "Email": "email@example.org",
        "Phone": "4031231234",
        "Address": {
            "Street": "123 Sreet",
            "City": "City",
            "Region": "AB",
            "Country": "CA",
            "Postcode": "X0X0X0"
        }
    },
    "AutoCapture": false,
    "CompleteUrl": "https://www.send-user-here-after-success-redirect.com",
    "CancelUrl": "https://www.send-user-here-after-failed-redirect.com"
}
```

### Step 2b.2. Instantiate Drop-In using delayed capture

To instantiate the most basic version of the Reach Drop-In, follow these steps:

1. Add an HTML container element to your page to hold the Drop-In.
2. Create a JavaScript method to complete the logic once the Drop-In is successful.
3. Create a JavaScript method to handle failure cases if the payment is not successful.
4. Add “Reach Drop-In” (rch.js) script to your page. See the [Drop-in rch.js guide](https://docs.withreach.com/docs/drop-in-rchjs-guide) for more detailed information about the `rch.js` file.
5. Call the Reach `init()` method and pass in an object with a `target`, `id`, and `onSuccess` property.

When complete, your page should look something like this:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        ...
        <script defer src="https://asset.withreach.com/dist/rch.js" onload="init()"></script>
        <script>
            function onSuccess() {
                <!-- Perform any actions after the Drop-In is completed (i.e., redirect to success URL). -->
                window.location.replace("/success/");
            }
            function onFailure(error) {
                <!-- Perform any actions to handle payment failure. -->
                document.querySelector("#message").innerHTML = 
                    "Oops! Something went wrong. More information: " + error.errorCode + 
                    ", " + error.errorMessage + " Please review your information.";
            }
            function init() {
                <!-- 91b64778-0d37-479c-ae9f-32f6685ac6ea is the session ID -->
                RCH_CC.rchInit({target:"#rch-dropin",id:"91b64778-0d37-479c-ae9f-32f6685ac6ea", onSuccess, onFailure});
            }
        </script>
        ...
        ...
    </head>
    <body>
        ...
        ...
        <div id=”rch-dropin”></div>
        ...
        ...
    </body>
</html>
```

The `onSuccess` method indicates that the payment was successfully initiated, allowing you to redirect the shopper to the success page

<CardCallout type="warning" title="Note">
  The `onSuccess` method does not indicate that the payment was completed, only that the payment process has been successfully initiated. The payment is not complete until you’ve received the  `ORDER_PROCESSED` notification.
</CardCallout>

The `onFailure` method passed into `init()`method is called when an unrecoverable error inside the session is encountered. The error code and message will be passed into `onFailure` and can be used to determine which action to take. For example, a message could be displayed to the end user indicating what failed.

### Step 2b.3. Receive notifications using delayed capture (PaymentAuthorized order)

The Drop-In will notify you when it takes action against a Session or Order. To receive these notifications, you must configure your server to listen for them by creating an endpoint at the webhook URL provided to Reach during onboarding. See the [Notifications guide](https://docs.withreach.com/reference/notifications-2) for more details.

You will receive a `SESSION_COMPLETED` and `ORDER_AUTHORIZED` notification once the user has submitted their payment. Once the `ORDER_AUTHORIZED` notification is received, you can mark the Order as ready to be captured in your system.

<CardCallout type="info" title="Note">
  The `SESSION_COMPLETED` is an informational notification indicating that the user has completed their interaction with the Drop-In. It should be logged but not actioned.
</CardCallout>

The `ORDER_AUTHORIZED` notification will look like this:

```json
{
  "EventType": "ORDER_AUTHORIZED",
  "Order": {
    "OrderId": "cc7236aa-d11b-436c-a29c-d26cecadc847",
    "State": "PAYMENT_AUTHORIZED",
    "MerchantReference": "unique_reference_provided_by_supplier",
    "SessionId": "91b64778-0d37-479c-ae9f-32f6685ac6ea"
  }
}
```

Upon successfully receiving a notification, you should respond with HTTP status 200. If you reply with a status outside that range, we will resend the notification later. See the [Notifications guide](https://docs.withreach.com/reference/notifications-2) for more details.

### Step 2b.4. Capture the order

When you can capture the order, send an HTTP POST to the Order API.  You will need the `OrderId` from within the `ORDER_AUTHORIZED` notification or by looking up the Session via an API call to get the embedded `OrderId` (`Session.Order.OrderId`).

See the [Order API guide](https://docs.withreach.com/reference/order-api-guide-1) for a more in-depth view of the Capture Order request.

```http Request example
   #Location
   POST https://api.withreach.com/v1/order/{OrderId}/capture

   #Headers
   Authorization: Basic YWNjb3VudDpzZWNyZXQ=
   
   #Body
   <empty>
```
```json Response example
   #Headers
   Content-Type: application/json
   
   #Body
   {
     "OrderId": "cc7236aa-d11b-436c-a29c-d26cecadc847",
     "State": "PROCESSED",
     "MerchantReference": "1234567890",
     "SessionId": "91b64778-0d37-479c-ae9f-32f6685ac6ea",
     "Reason": {
       "Code": "Captured",
       "Retryable": false
     }
   }
```

There are three different successful responses you can receive from the Capture Order request:

1. **Captured:** The Order was successfully captured.
2. **PendingNotification:** The Order capture attempt was successful. However, due to our third-party processor, the capture is pending completion, and you will be notified once it is completed.
3. **UnderReview:** The Order capture attempt was successful. Completion of the capture is pending an internal review by Reach’s team, and you will be notified once it is completed.

See the [Order API guide](https://docs.withreach.com/reference/order-api-guide-1) for a more in-depth view of the Capture Order response.

### Step 2b.5. Receive notifications (process the order)

Not all capture Order requests will be synchronous. If this was the case for your capture Order request, you must wait for the `ORDER_PROCESSED` notification to mark your Order as complete/captured.

The `ORDER_PROCESSED` notification will look like this:

```json
{
  "EventType": "ORDER_PROCESSED",
  "Order": {
    "OrderId": "cc7236aa-d11b-436c-a29c-d26cecadc847",
    "State": "PROCESSED",
    "MerchantReference": "unique_reference_provided_by_supplier",
    "SessionId": "91b64778-0d37-479c-ae9f-32f6685ac6ea"
  }
}
```

Upon successfully receiving a notification, you should respond with HTTP status 200. We will resend the notification if you reply with a status outside that range. See the [Notifications guide](https://docs.withreach.com/reference/notifications-2) for more details.

# Step 3. Get FX rates

To get a list of rates, send an HTTP GET request to the `getRates` API. Depending on the configuration of your Reach account, the `getRates` API will respond with either **Guaranteed** or **Spot Rates**. See [FX rates](https://docs.withreach.com/docs/fx-get-rates) for more information.

## Localization and getRates

The [Reach FX solution](https://docs.withreach.com/docs/reach-fx-solution-) supports local processing of payments in 100+ currencies, allowing you to display local currency dynamically based on your customer’s location.

<Image align="center" alt="getRates flow chart" caption="getRates flow chart" title="getRates.png" src="https://files.readme.io/977dc6c8b69a2e08bc2575a656f43812b774cf023bfe03a7ae2e637c910e4c62-Reach_-_Page_32.png" width="90% " />

## Understanding getRates

1. The supplier sends a `getRates` request to the `getRates` API.
2. The `getRates` API will respond with the list of currencies and their FX rates enabled in your Reach account.
3. The supplier displays a currency selector utilizing the `getRates` response details.
4. The shopper selects their preferred currency on the supplier's website.
5. The supplier calculates and displays the prices in the shopper's local currency.

```http getRates request example
GET https://api.sandbox.withreach.com/v2.2/getRates?merchantId=yourMerchantId
```

#### Spot rates

If you configured your account for spot rates, the response to `getRates` will include only a Currency code and an indicated Rate.

```json getRates response example for spot rates
{
  "Rates": [
    {      
       "Currency": "ZMW",
       "Rate": 13.059026
    },
    {    "Currency": "ZAR",
         "Rate": 15.326697
    },
  ]
}
```

<CardCallout type="info" title="Note">
  The rate indication serves only as an approximation of the converted prices based on current market rates. Due to market fluctuations, the foreign exchange rate used to settle the transaction may differ slightly from the indicated rate provided by getRates when the transaction is complete.
</CardCallout>

### Guaranteed rates

If you configured your account for guaranteed rates, the response to `getRates` will include the Currency Code, the Rate ID, the Expiry Date, and the Rate used when creating a session.

```Text getRates response example for guaranteed rates
{
  "RateOffers": [
     {      
        "Currency": "EUR",
        "Id": "e3ac01e4-f48b-4f38-ba31-cd2bf51d61ba",
        "Expiry": "2016-10-03T18:04:21.830514Z",
        "Rate": 0.9349
     },
     {      
        "Currency": "CAD",
        "Id": "8ca2b5a3-8120-4238-88ff-8811223aaef8",
        "Expiry": "2016-10-03T18:04:21.524409Z",
        "Rate": 1.3842
     }
  ]
}
```

<CardCallout type="info" title="Saving Rate Offers">
  Rate offers usually expire 24 hours after they are created, although longer expiry times may be available in special circumstances. For a better user experience, we recommend calling `getRates` twice daily. This approach allows for multiple non-expired rate offers. In such cases, the latest rate offer should be used for new visitors.
</CardCallout>

#### How to use your guaranteed rate (optional)

To guarantee your exchange rate, pass along the `RateOfferId `from the response when [creating a session](https://docs.withreach.com/reference/createsession).

```http Creating a session with the RateOfferId response example
POST /v1/session HTTP/1.1
Host: api.sandbox.withreach.com
Authorization: Basic YWNjb3VudDpzZWNyZXQ=
Content-Type: application/json
{
  "MerchantReference": "unique_reference_provided_by_supplier",
  "RateOfferId": "e3ac01e4-f48b-4f38-ba31-cd2bf51d61ba",
  "Items": [
    {
      "Name": "Item 1",
      "Amount": 10.0,
      "Quantity": 1
    },
    {
      "Name": "Item 2",
      "Amount": 12.0,
      "Quantity": 2
    }
  ],
  "BillingProfile": {
    "Name": "First Last",
    "Email": "email@example.org",
    "Address": {
      "Street": "123 Street",
      "City": "City",
      "Region": "AB",
      "Country": "CA",
      "Postcode": "X0X0X0",
      "Phone": "4031234567"
    }
  },
  "ShippingDetails": {
    "ShippingAmount": 0.0,
    "DutyAmount": 0.0,
    "Name": "First Last",
    "Email": "email@example.org",
    "Phone": "4031231234",
    "Address": {
      "Street": "123 Street",
      "City": "City",
      "Region": "AB",
      "Country": "CA",
      "Postcode": "X0X0X0"
    }
  },
  "AutoCapture": true,
  "CompleteUrl": "https://www.send-user-here-after-success-redirect.com",
  "CancelUrl": "https://www.send-user-here-after-failed-redirect.com"
}
```

# Step 4. Create a currency selector

Use the `getRates` Currency response to create a currency selector for your shoppers. See [FX rates](https://docs.withreach.com/docs/fx-get-rates) for more information.

<Image align="center" alt="Currency selector" caption="Currency selector" title="currencyPicker.png" src="https://files.readme.io/4f7d8be-currencyPicker.png" />

# Step 5. Calculate prices

Use the `getRates` response to calculate and display your product prices in the shopper's local or preferred currency. For more information, see [FX rates](https://docs.withreach.com/docs/fx-get-rates).

<Image align="center" alt="Calculate and display prices" caption="Calculate and display prices" title="convertedCurrency.png" src="https://files.readme.io/60e43b846c51ef49e0b767e15a44b311cc8e5289e2ed30422cd813aae6150620-SuppliertoShopperFX_1.png" />