DCCheckOut

DCCheckOut

DCCheckOut is the component for do the payment and submitting the order.

DCCheckOut methods
1. saveStep - On every success step saving the details.
2. getSDKInstance - Method to get digital commerce SDK instance.
3. nextStep - Advance user to next step.
4. acceptTermsAndConditions - Method to check whether user accepts vlocity terms and conditions.
5. loadPaymentCallback - Method to capture callback when payment is received.
6. loadTranslationLabels - Method to load translation labels.
7. useCheckoutSdk - useCheckoutSdk indicates if CheckoutSDK is used for Checkout process for "Community guest user": (a) if SF is the ONLY authentication server, then checkout process would use LWC Omniscript which calls VIP directly without using CheckoutSDK, i.e. useCheckoutSdk = false(b) If there is a 3rd party authentication server (firebase in our reference implementation), then we need to use LWC checkout components that calls the CheckoutSDK instead, i.e. useCheckoutSdk = true. For “Community login users” and “Light Experience users”, SF is always the only authentication server because they start out by logging into SF, so they would always use the LWC Omniscript which calls VIP directly without using CheckoutSDK, i.e. useCheckoutSdk = false Features
1. Login/signup.
2. Update Billing and Shipping Address.
3. Do the payment.
4. Create and Submit the Order.

Constructor

new DCCheckOut()

Example
Sample Usage -

Include the component in your template by adding <c-dc-check-out> custom tag
   
<c-dc-check-out due-today="900" due-monthly="90" catalog-code="phones" cart-context-key="key" checkout-api-url="URL" checkout-payment-url="URL"></c-dc-check-out>

KEY INFO -

 events fired : "vlocity-dc-sign-in", "vlocity-dc-save-billing-address","vlocity-dc-router" and "vlocity-dc-submit-order"

 Events registered :

    | Event Name                     | Event source component      | Callback Function          | Description                             |
    |--------------------------------|-----------------------------|----------------------------|-----------------------------------------|
    | vlocity-dc-checkout-next-step  | c-dc-total-bar              | nextStep()                 | Event triggered on click on next button |
    | vlocity-dc-checkout-success    | c-dc-review-order           | stepSuccessEventHandler()  |                                         |
    |                                | c-dc-sign-in                |                            |                                         |
    |                                | c-dc-update-billing-address |                            |                                         |

 Dependency - No dependencies

Sample with slots -

<c-dc-check-out>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</c-dc-check-out>

List of available slots -

| Slot names             | Dynamic     | Description                             | Impact                                 |
|------------------------|-------------|-----------------------------------------|----------------------------------------|
| dc-checkout            | -           | Wrapper for entire checkout             | Replaces entire component body totalbar|                   |
| dc-terms-conditions    | -           | Wrapper for terms & conditions checkbox | Replaces terms & condition checkbox    |                 |

Extends

Methods

(static) acceptTermsAndConditions(Object)

Method to handle user accepting terms and conditons.
Parameters:
Name Type Description
Object event

(static) disconnectedCallback()

disconnectedCallback () is invoked when c-dc-check-out is removed from the document’s DOM.

(static) getSDKInstance()

Method to get digital commerce SDK instance.

(static) initPaymentPostHook()

A custom function to be used by customers for customisation, any custom action after fetch offers call can be written here

(static) loadPaymentCallback()

Method to capture callback when payment is received.

(static) loadTranslationLabels()

Method to load translation labels.

(static) nextStep()

Method to trigger next checkout step.

(static) saveStep(Object)

Method to save the results on every step success.
Parameters:
Name Type Description
Object data

(static) updateSteps()

Method to advance progress indicator to the next step