VlocityDCCheckout

VlocityDCCheckout

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

VlocityDCCheckout methods
1. saveStep - On every success step saving the details.
2. nextStep - Advance user to next step.
3. acceptTermsAndConditions - Method to check whether user accepts vlocity terms and conditions.
4. loadPaymentCallback - Method to capture callback when payment is received.
Features
1. Login/signup.
2. Update Billing and Shipping Address.
3. Do the payment.
4. Create and Submit the Order.

Constructor

new VlocityDCCheckout()

Example
Sample Usage -

Include the component in your template by adding vlocity-dc-checkout custom tag
   
<vlocity-dc-checkout dueToday="900" dueMonthly="90" catalogCode="phones" cartContextKey="key" checkoutPaymentUrl="URL" orderId="orderId" .userInfo={email:"",name=""}></vlocity-dc-checkout>

KEY INFO -

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

 Events registered :

    | Event Name                     | Event source component            | Callback Function   | Description                             |
    |--------------------------------|-----------------------------------|---------------------|-----------------------------------------|
    | vlocity-dc-checkout-next-step  | vlocity-dc-totalbar               |  nextStep()         | Event triggered on click on next button |
    | vlocity-dc-checkout-success    | vlocity-dc-review-order           |  saveStep()         |                                         |
    |                                | vlocity-dc-signin                 |                     |                                         |
    |                                | vlocity-dc-update-billing-address |                     |                                         |

 Dependency - No dependencies

Sample with slots -

<vlocity-dc-checkout>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</vlocity-dc-checkout>

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

  • LitElement

Methods

(static) acceptTermsAndConditions(Object)

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

(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) nextStep()

Method to trigger next checkout step.

(static) openPaymentIframe()

Method to open braintree iframe for payment

(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