Search code examples
spartacus-storefront

Enquiry about custom checkout flow in spartacus


I have some questions around checkout in spartacus. These are the 2 scenarios that I need to implement for one of my project:

Spartacus version: 4.3

Checkout Steps:

Checkout Bundle (custom step) >> Shipping Address >> Delivery Address >> Payment >> Review Order

  1. For a certain product, said Product A. It will skip the entire checkout steps and go straight to Review Order step.
  2. For a certain, said Product B. It will have bundle step and based on the bundle selection, it will determine if it required to go to Payment Step.

Issues:

  • After I have redefined the steps and create custom guard, it still doesn’t allowed me pass to the review-order step. For some reason the Spartacus libraries check if the shipping, deliver or payment Info have existed in the cart before proceed to the review-order step. Is there any work around this issue?

Snapshot of the code below:

// default-checkout.config.ts

export const checkoutConfig: PSCheckoutConfig = {
  checkout: {
    steps: [
      {
        id: 'bundle', 
        name: 'checkoutProgress.bundle',
        routeName: 'checkoutBundle',
        type: []
      },
      {
        id: 'shippingAddress',
        name: 'checkoutProgress.shippingAddress',
        routeName: 'checkoutShippingAddress',
        type: [CheckoutStepType.SHIPPING_ADDRESS],
      },
      {
        id: 'deliveryMode',
        name: 'checkoutProgress.deliveryMode',
        routeName: 'checkoutDeliveryMode',
        type: [CheckoutStepType.DELIVERY_MODE],
      },
      {
        id: 'paymentDetails',
        name: 'checkoutProgress.paymentDetails',
        routeName: 'checkoutPaymentDetails',
        type: [CheckoutStepType.PAYMENT_DETAILS],
      },
      {
        id: 'reviewOrder',
        name: 'checkoutProgress.reviewOrder',
        routeName: 'checkoutReviewOrder',
        type: [CheckoutStepType.REVIEW_ORDER],
      },
    ]
  },
};

//  checkout.module.ts  
ConfigModule.withConfig(<CmsConfig>{
      cmsComponents: {
        CheckoutProgress: {
          component: PSCheckoutProgressComponent,
        },
        CheckoutBundle: {
          component: PSCheckoutBundleComponent,
          guards: [RequireBundleGuard],
        },
        CheckoutPaymentDetails: {
          component: PSCheckoutPaymentDetailsComponent,
          guards: [RequirePaymentGuard, CustomCheckoutStepsSetGuard],
        },
        CheckoutReviewOrder: {
          component: PSCheckoutReviewOrderComponent,
          guards: [CustomCheckoutStepsSetGuard]
        },
      },
    }),
  ],


Solution

  • I discuss this question with our checkout experts in the team.

    even if customer would like to combine multiple steps into a single step, the necessary info ( shipping, delivery and payment info ) still have to be generated via a single API call, as described in this note:

    2998330 - SAP Commerce Cloud, single-page checkout via ycommercewebservices OCC APIs v2

    Take Express checkout for example - it doesn't skip steps, but rather relies on pre-existing defaults in the user account.

    We don't think there is a way that Spartacus can be configured to skip those checkout info requirements, other than potentially replacing services or something like that.

    Moreover, from server implementation perspective, we don't even know if the backend will accept ootb to place an order with some info missing - this is something the customer can try to figure out with postman.

    Bottom line, it does not sound like something that would work ootb and it probably requires customization. These are checkout customizations that customers would have to do themselves.

    Again the source code in 2998330 - SAP Commerce Cloud, single-page checkout via ycommercewebservices OCC APIs v2 might be a good reference for start.