Return Options Step

The step in which the user selects return options for their selected products and replacement options if applicable.

Example Flow

Example Response (Basic)

{
  "type": "return_options",
  "nextType": "important_information",
  "payload": {
    "confirmButtonText": "Confirm",
    "additionalStoreCredit": {
      "amount": 15.00,
      "currencyCode": "GBP"
    },
    "userDetails": {
      "address": {
        "line1": "House No. 24",
        "line2": "Radial View",
        "city": "London",
        "county": "Greater London",
        "country": "United Kingdom",
        "postcode": "SW1A 2JR"
      },
      "fullName": "John Smith",
      "countryCode": "GB",
      "mobileNumber": "+447836567737"
    },
    "products": [
      {
        "id": "O111111",
        "returnOptions": [
          {
            "text": "Replacement",
            "type": "replacement",
            "description": "Return your item and get a replacement within 3-5 business days."
          },
          {
            "text": "Standard refund",
            "type": "refund",
            "description": "Timing depends on your original payment."
          },
          {
            "text": "Store credit",
            "type": "store_credit",
            "description": "Get a gift card via email once your return has been approved."
          }
        ],
      },
      {
        "id": "O444444",
        "returnOptions": [
          {
            "text": "Replacement",
            "type": "replacement",
            "description": "Return your item and get a replacement within 3-5 business days."
          },
          {
            "text": "Standard refund",
            "type": "refund",
            "description": "Timing depends on your original payment."
          },
          {
            "text": "Store credit",
            "type": "store_credit",
            "description": "Get a gift card via email once your return has been approved."
          }
        ],
      }
    ]
  }
}

Properties

* indicates required field

FieldDescription
type*The current step_type.
nextType*The next step_type in the journey.
payload*Contains the details of the return options.
payload.confirmButtonText*The text displayed in the confirmation button.
payload.additionalStoreCreditAny additional store credit the user will receive.
payload.additionalStoreCredit.amountThe amount of additional store credit the user will receive.
payload.additionalStoreCredit.currencyCode(GBP, USD, EUR)
payload.userDetailsThe user's details, used to pre-populate the change address form.
payload.userDetails.address*Object containing the user's address.
payload.userDetails.countryCode*The user's country code. (ISO 3166-1 alpha-2).
payload.userDetails.fullNameThe user's full name.
payload.userDetails.mobileNumberThe user's mobile number.
payload.products*See below

Products

FieldDescription
payload.products[].id*The unique identifier for the product.
payload.products[].returnOptions*See below
payload.products[].replacementSelector*See below

Return Options

FieldDescription
returnOptions*A list of return options available for the product.
returnOptions[].text*The text description of the return option.
returnOptions[].type*The type of the return option (replacement
returnOptions[].description*The description of the return option.
returnOptions[].unavailableReasonThe reason why the return option is unavailable, the option cannot be selected if present.

Replacement Selector

To enable the replacement selector, add one the the following example objects per relevant product.

The variants should include the current product variant which is pre selected in the popup.

To have pre selected sizing options, the product.size object defined in the product_selection step should include values for all replacement options e.g. size.cup, size.band, size.width.

You may include any additional properties within a size object. These properties will be included in the replacementDetails.size object.

Simple Sizing

{
  "replacementSelector": {
    "isEnabled": true,
    "variants": [
      {
        "id": "0111111",
        "image": "https://someimage.png",
        "colour": "Alloy | Chambray",
        "sizes": [
          { "value": "7", "id": "some-id" },
          { "value": "8", "disabled": true }
        ]
      }
    ]
  }
}

FieldDescription
replacementSelectorContains the details of the replacement options
replacementSelector.isEnabled*Whether the replacement selector is enabled
replacementSelector.variants*List of available variants
replacementSelector.variants[].colour*The variant colour
replacementSelector.variants[].id*The variant id
replacementSelector.variants[].isLowStockWhether the variant has low stock
replacementSelector.variants[].sizes*Available sizes for this variant
replacementSelector.variants[].sizes[].value*Size value
replacementSelector.variants[].sizes[].disabledWhether the size is unavailable
replacementSelector.variants[].sizes[].idOptional size ID

Tabbed Sizing

Displays sizes in tabs

{
  "replacementSelector": {
    "isEnabled": true,
    "variants": [
      {
        "id": "0111111",
        "image": "https://someimage.png",
        "colour": "Alloy | Chambray",
        "isLowStock": true,
        "tabContent": {
          "name": "width",
          "label": "Width",
          "items": [
            {
              "name": "regular",
              "label": "Regular",
              "sizes": [
                { "value": "7", "disabled": true },
                { "value": "8", "id": "some-id-1" }
              ]
            },
            {
              "name": "wide",
              "label": "Wide",
              "sizes": [
                { "value": "7", "id": "some-id-2" },
                { "value": "8", "disabled": true },
              ]
            }
          ]
        }
      }
    ]
  }
}
FieldDescription
replacementSelectorContains the details of the replacement options
replacementSelector.isEnabled*Whether the replacement selector is enabled
replacementSelector.variants[].colour*The variant colour
replacementSelector.variants[].id*The variant id
replacementSelector.variants[].isLowStockWhether the variant has low stock
replacementSelector.variants[].tabContent*Tab configuration for sizes
replacementSelector.variants[].tabContent.name*Identifier for the tab
replacementSelector.variants[].tabContent.label*Display label for the tab
replacementSelector.variants[].tabContent.items*List of tab items
replacementSelector.variants[].tabContent.items[].name*Tab item name
replacementSelector.variants[].tabContent.items[].label*Tab item label
replacementSelector.variants[].tabContent.items[].sizes*Sizes available in this tab

Size Components

For when a size compromises of multiple components, e.g a bra which has a cup and band size.

{
  "replacementSelector": {
    "isEnabled": true,
    "variants": [
      {
        "image": "https://someimage.png",
        "colour": "Sand",
        "hexCodes": [
          "#DAB297"
        ],
        "sizeComponents": [
          {
            "name": "band",
            "label": "Band",
            "options": [
              { "value": "28", "disabled": true },
              { "value": "30", "id": "some-id-1" }
            ]
          },
          {
            "name": "cup",
            "label": "Cup",
            "options": [
              { "value": "A", "disabled": true },
              { "value": "B", "id": "some-id-2" }
            ]
          }
        ]
      }
    ]
  }
}
FieldDescription
replacementSelectorContains replacement options for each variant of the product
replacementSelector.isEnabled*Whether the replacement selector is enabled
replacementSelector.variants[].hexCodesColor hex codes for swatch display
replacementSelector.variants[]A list of variants
replacementSelector.variants[].colour*The variant colour
replacementSelector.variants[].id*The variant id
replacementSelector.variants[].isLowStockWhether the variant has low stock
replacementSelector.variants[].sizeComponents*List of size component groups
replacementSelector.variants[].sizeComponents[].name*Component identifier
replacementSelector.variants[].sizeComponents[].label*Component display label
replacementSelector.variants[].sizeComponents[].options*Available options for component
replacementSelector.variants[].sizeComponents[].options[].value*Option value
replacementSelector.variants[].sizeComponents[].options[].disabledWhether option is unavailable
replacementSelector.variants[].sizeComponents[].options[].idOptional size ID

selected_products example

[
    {
        "id": "O444444",
        "name": "CrossFlex Activity Bra",
        "image": "some-image-url.jpg",
        "colour": "Black",
        "quantity": 5,
        "productType": "bra",
        "size": {
          "displayName": "10C",
          "sizeSystem": "UK",
        },
        "price": {
          "amount": 149.99,
          "currencyCode": "GBP"
        },
        "returnOption": { // the selected return option
            "text": "Replacement",
            "type": "replacement"
        },
        "replacementDetails": { // the selected variant including replacement options
          "id": "0222222",
          "colour": "Dreamy Peach",
          "size": {
            "displayName": "12D",
            "band": "12",
            "cup": "D",
            "id": "some-id"
          }
        },
        "returnReason": {
            "id": "arrived-damaged",
            "text": "Item arrived damaged"
        },
        "attachments": ["attachment1.jpg", "attachment2.jpg"],
    }
]