How do I update the shipping options at checkout in BigCommerce

Question

I've written a custom app which uses a PHP server for the back end and the bigcommerce checkout/cart sdk with JS for the front end.

Basically this is what I want to do:

1. Retrieve Rates using my php app and a 3rd party api (This works)
2. Display said rates as selectable options (This works)
3. Update the checkout and consignment (This works but not 100%)
4. Update the cart shipping method and total (This is where I am stuck)

After I get the rates from the PHP server, I dynamically build the list's HTML.

I randomly assign shipping method id's (As I have no idea how this gets generated but it appears to be fairly random)

When I click on a shipping option this code runs (Please note that 'option' is a variable within a foreach loop

console.dir(checkoutObj);
 
if(checkoutObj.consignments.length < 1){

    console.log('no consign');

} else {

    var selectedShipping = checkoutObj.consignments[0].selectedShippingOption;
    selectedShipping.cost = parseFloat(option['grandtotmrkup']);
    selectedShipping.description = option['CarrierName'] + '-' + option['CarrierService'];
    selectedShipping.id = this.value;
    selectedShipping.type = 'weight_based_shipping';
    checkoutObj.consignments[0].shippingCost = parseFloat(option['grandtotmrkup']);
    checkoutObj.shippingCostBeforeDiscount = parseFloat(option['grandtotmrkup']);
    checkoutObj.shippingCostTotal = parseFloat(option['grandtotmrkup']);

    console.log('updated checkout obj');
    console.dir(checkoutObj);

    var updated = service.updateCheckout(checkoutObj);
 
    console.log('updated');
    console.dir(state.data.getCheckout());
    console.log('updating consignment');
    console.dir(
service.updateConsignment({'id':consignID,'shippingOptionId':shippingMethodId})
    );
    console.dir(state.data.getConsignments());

When it runs service.updateConsignment I get the following response for the consignments section of the object:

"consignments": [
  {
    "id": "5f732875d039f",
    "shippingCost": 0,
    "handlingCost": 0,
    "couponDiscounts": [],
    "discounts": [],
    "lineItemIds": [
      "4f557702-4f9d-45ec-943a-c72ea963ccc7"
    ],
    "selectedShippingOption": {
      "id": "4dcbf24f457dd67d5f89bcf374e0bc9b",
      "type": "freeshipping",
      "description": "Free Shipping",
      "imageUrl": "",
      "cost": 0,
      "transitTime": "",
      "additionalDescription": ""
    },
    "shippingAddress": {
      "firstName": "1",
      "lastName": "1",
      "email": "",
      "company": "",
      "address1": "1 street",
      "address2": "",
      "city": "MITCHAM",
      "stateOrProvince": "Victoria",
      "stateOrProvinceCode": "VIC",
      "country": "Australia",
      "countryCode": "AU",
      "postalCode": "3132",
      "phone": "",
      "customFields": [],
      "shouldSaveAddress": true
    },
    "availableShippingOptions": [
      {
        "id": "9ba45e71fe66e1cd757f022dcae331b0",
        "type": "shipping_pickupinstore",
        "description": "Pickup In Store",
        "imageUrl": "",
        "cost": 0,
        "transitTime": "",
        "isRecommended": false,
        "additionalDescription": ""
      },
      {
        "id": "4dcbf24f457dd67d5f89bcf374e0bc9b",
        "type": "freeshipping",
        "description": "Free Shipping",
        "imageUrl": "",
        "cost": 0,
        "transitTime": "",
        "isRecommended": true,
        "additionalDescription": ""
      }
    ]
  }
],

I'm not sure if it's because my shipping options aren't in the Available Shipping Options Section of the object?

Does anyone know how I can get my shipping methods in there? Or is this being caused because I append the methods dyanmically via HTML?

I'm new to BC so please excuse any ignorance.

Answer 1

I don't think you're going to be able to inject a shipping option into the checkout this way, I think you'd need to look at using the Shipping Methods API in your PHP app and then the options should be available as per usual.