Web App JavaScript Integration Guide

This page provides step-by-step instructions for incorporating Vesta Payment Protect or Vesta Payment Guarantee into your eCommerce site using the VestaJS library. The steps take you through setting up your application, building a payment form, and submitting a transaction to Vesta for evaluation.

Overview

This page provides all of the details you will need to complete the VestaJS integration:

  • Prerequisites - Obtain authentication credentials and ensure that you have all of the necessary information available before starting work.
  • Authentication - Send your account name and password to Vesta to authenticate your application.
  • Initialization - Map field names from your application and your gateway to Vesta’s field names so that Vesta can analyze your transactions.
  • Enable the Sandbox Environment - Set the correct base paths to use during development and testing.
  • Collect Payment Details - Build a web form using VestaJS classes to collect payment details.
  • Provide the Order ID - Send Vesta your order ID to help keep track of the order.
  • Transaction Evaluation - Use a one-step or two-step flow to obtain a risk evaluation from Vesta for the transaction and submit the transaction to your gateway for authorization and payment.
  • Send Vesta the Transaction Status - Notify Vesta of the final transaction status.

The VTClasses section provides a complete list of of the values Vesta accepts as classTags, which you will use to identify elements of your application that are important for Vesta’s risk analysis.

Prerequisites

Ensure that you have the following items before beginning development:

  • Authentication Credentials - Obtain your API user name and password from the Authentication step of the Certification process. You will use them to authenticate your application.
  • Gateway and eCommerce Platform Documentation - You will need to map the fields used by your payment gateway and your eCommerce platform to the fields that Vesta uses to detect fraud. You must identify the transaction response field from your gateway and the shopping cart fields from your eCommerce platform.

Authentication

In the authentication step, you will include the VestaJS library in your application and use the library to send your user name and password to Vesta.

If your application is not a single-page, you must run the authentication code on every page that uses the VestaJS library.

Follow the steps below to authenticate your application:

  1. Include the VestaJS library in your application by adding the <script> tag shown below to every page that will use the features of the library:

    <script src='https://vt-vestajsapp-demo.azurewebsites.net/static/vestaExtension.js' />
    
  2. Call the VestaExtensionJS.setAuthentication() function and pass your account name and password as parameters:

    window.VestaExtensionJs.setAuthentication('account-name', 'password')
    

Vesta will track your application’s authentication status as the customer uses the shopping cart and payment pages.

Initialization

During initialization, map your shopping cart and transaction response fields to Vesta’s field IDs and add, remove, and update items in the shopping cart.

If your application is not a single-page, you must run the initialization code on every page that uses the VestaJS library.

Follow the steps below to initialize your application and modify the shopping cart contents:

  1. Use the window.VestaExtensionJs.setVestaCartKeys() function to map Vesta’s shopping cart object field IDs to your shopping cart object field IDs:

    window.VestaExtensionJs.setVestaCartKeys({
            itemDescription: 'description',
            itemId: 'id',
            itemLabel: 'name',
            itemPrice: 'price',
            itemQuantity: 'quantity',
            itemTax: 'tax',
            items: 'cartItems',
            totalPrice: 'totalPrice',
            totalQuantity: 'totalQuantity',
            totalTax: 'totalTax'
          })
    

    The code sample below shows the structure of the Vesta cart item object that you must map to your application’s shopping cart keys:

    CartItem {
        id: number,
        name: string
        description: string
        price: number
        sizes ? : string[]
        imageUrls ? : string[]
        quantity ? : number
    }
    

    Quantity: Use the quantity field to add or remove units of an item and to modify the shopping cart contents.

  2. Map your gateway’s transaction response fields to Vesta’s transaction response fields as shown below:

    window.VestaExtensionJs.setCardResponseKeys({
        interface CardResponseDetailsKeys {
            avsResponseCode: 'gateway-avs-response-field',
            cvvResponseCode: 'gateway-cvv-response-field',
            addressVerification: 'gateway-address-response-field',
            cardAuthorization: 'gateway-auth-response-field',
            cardVerification: 'gateway-verify-response-field',
            paymentGateway: 'gateway-name-response-field',
            binNumber: 'gateway-bin-number-response-field'
        }
    })
    

    Vesta will use this mapping during the Transaction Evaluation step to identify information in the transaction response that is important for fraud detection.

    NOTE: This only applies on first-level HTTP response objects. For other levels, you must provide a wrapper HTTP response for first-level objects.

    NOTE: Your payment gateway must be supported by Vesta and should have been set in the payment processor setting during the onboarding process.

  3. Override the VestaJS getCart() functions. The functions should update your shopping cart object and support your application’s behavior. Vesta automatically updates the VestaJS cart object. The getCart() functions return an array of CartItem objects that have been mapped to your application’s cart keys.

Enable the Sandbox Environment

By default, VestaJS targets the production environment. During development, you should use the sandbox environment with your sandbox credentials.

Run the code below, prior to any transactions, after the VestaJS script is loaded to enable the sandbox environment:

window.VestaExtensionJs.setTransactionUrls({
        initiate: '/api/v1/transactions/sandbox/initiate',
        cartUpdate: '/api/v1/transactions/sandbox',
        evaluate: '/api/v1/transactions/sandbox/evaluate'
      })

Note: The endpoint URLs must not include the trailing / character.

Prior to running any transactions, run the code below to ensure that there are no previously set transaction configurations still running:

Window.VestaExtension.removeTransactionUrls()

Collect Payment Details

Create web forms for shipping, billing, and card information. You must assign the correct class to the form container element and to each <input> element. The example below shows a shipping info form:

   <Paper className={`address_form ${ShippingClassTags.PARENT_TAG}`}>
     <label>Shipping Information< label>
         <label>Delivery Method< label>
             <select required className={`address_form input ${ShippingClassTags.DELIVERY_METHOD}`} value={shippingObj.deliveryMethod} name="deliveryMethod" onChange={bindShippingDetails}>
               <option value="Mail">Mail</option>
               <option value="Virtual">Virtual</option>
             </select>
             <label>Careers Name</label>
             <select required name="carrier" value={shippingObj.carrier} onChange={bindShippingDetails} className={`address_form input ${ShippingClassTags.CARRIER}`}>
               <option value="FedEx">FedEx</option>
               <option value="LBC">LBC</option>
               <option value="UPS">UPS</option>
               <option value="JNT">JNT</option>
             </select>
             <label>Class</label>
             <input required type='text' className={`${ShippingClassTags.CLASS}`} name="shipping_date" value={shippingObj.shipping_date} onChange={bindShippingDetails} />
             <div style={{
          height:
          30
          }} />
             <Divider />
             <label>Amount</label>
             <input required className={ShippingClassTags.AMOUNT} type='text' name="amount" value={shippingObj.amount} onChange={bindShippingDetails} />
             <div style={{
          height:
          10
          }} />
             <label>Currency</label>
             <input required className={ShippingClassTags.CURRENCY_CODE} type='text' name="currency_code" />
             <div style={{
        height:
        30
        }} />
             <div style={{
        height:
        0
        }} />
             <Divider />
             <div style={{
        height:
        10
        }} />
             <label>Pickup Location</label>
             <input className={ShippingClassTags.PICKUP_LOCATION} type='text' name="pickuplocation" />
             <div style={{
        height:
        10
        }} />
             <label>Delivery Date (yyyy-dd-mm)</label>
             <input required className={ShippingClassTags.DELIVERY_DATE} type='text' name="deliverydate" />
             <label>Pickup Time (HH:mm AM/PM)</label>
             <input className={ShippingClassTags.PICKUP_TIME} type='text' name="pickuptime" />
             <div style={{
        height:
        10
        }} />
   </Paper>
   

In the example above, the <Paper/> container is assigned the ShippingClassTags.PARENT_TAG class, while the <input> element for the amount field is assigned the ShippingClassTags.AMOUNT class.

Note: Each parent element, like <Paper/>, is set as a container with PARENT_TAG, and child fields, like <input/>, use specific tags depending on the use case.

The complete list of VtClass objects is included at the bottom of this page. Use the list of classes to create billing and card info forms.

Vesta updates the Vesta transaction object each time the customer clicks out of one of the text entry fields.

Partial Payments

Use the PartialPaymentClassTags class to split the transaction across multiple payment methods:

<Paper className={` address_form ${PartialPaymentClassTags.PARENT_TAG}`}>
  <label>{`${title}`}</label>
  <input
    type='text'
    value={props.value}
    onChange={handleChange}
    required
    className={`${${PartialPaymentClassTags.CREDIT_CARD }`}
  />
</Paper>

Note: Each payment type should be used only once.

Gift Card Information

VestaJS supports the following gift card providers: American Express, Discover, Visa and Mastercard. You must set one of the supported providers as the brand name and provide the merchant’s name who issued the gift card as shown below:

    <div className={`address_form ${GiftCardClassTags.PARENT_TAG}`} style={{ backgroundColor: "white", padding: "8px", marginTop: "20px" }}>
      <h4>Gift Information</h4>
      <Divider />
      <label>Brand Name</label>
      <select className={`address_form input ${GiftCardClassTags.BRAND_NAME}`}>
        <option value='Amex'>Amex</option>
        <option value='Discover'>Discover</option>
        <option value='VISA'>Visa</option>
        <option value='MC'>MC</option>
      </select>
      <label>Merchant Name</label>
      <input required type='text' className={`${GiftCardClassTags.MERCHANT_NAME}`} placeholder='Merchant Name' name='merchant-name' />
    </div>

Provide the Order ID

If you use an order ID to identify the order, use the code below to provide it:

<Paper className={`order_form  ${OrderClassTags.PARENT_TAG }`}>
      <label>Order Number</label>
      < label className={`${OrderClassTags.ORDER_NUMBER}`} name='order_number' />
</Paper>

The code above tags an element to automatically fetch the order number for the transaction. You must implement this function before the transaction is finished.

PayPal ID

If you are using PayPal as the payment method, you need to provide the valid PayPal ID before completing the transaction:

const overrideGetPapaylId =  () => {
      return '0VF52814937998046'
    }
    window.VestaTxCompleteListener.getPaypalId = overrideGetPapaylId

Transaction Evaluation

When your customer is ready to check out, obtain an evaluation of the transaction risk from Vesta. The transaction evaluation steps depend on whether you use Payment Guarantee or Payment Protect and whether you want to use a one-step or two-step process. The workflow that you choose depends on your business requirements:

  • One-step - Submit a transaction to your gateway for authorization before submitting it to Vesta for evaluation in order to potentially increase the number of transactions you accept.

  • Two-step - Submit a transaction to Vesta for evaluation before sending it to your gateway for processing, potentially saving processing fees for known, fraudulent transactions. Obtain a second, updated evaluation after submitting the transaction to your gateway for authorization in order to increase the number of transactions you can accept.

In the Initialization step, you mapped your gateway’s transaction response fields to Vesta’s transaction response fields. You must be sure that that mapping occurs on the same page and before you call the VT_FINAL_ACTION function.

Payment Guarantee

One-step: Click here to view step-by-step instructions for one-step transaction evaluation using Payment Guarantee.
  1. Set your authorization flow to one-step as shown in the sample code below:
    window.VestaExtensionJS.setAuthFlowConfig({ 
       authType: 'SINGLE-STEP' 
    })
    
  2. Create a transaction submission button by assigning the VT_FINAL_ACTION class to a button, as shown in the sample code below:
    <Button id='final_complete'
            className={`blue {VtClass.VT_FINAL_ACTION }`}
            type='submit'
    >Shop Again</Button> 
    

    When your customer clicks the button, submit the transaction to your gateway and capture the response as normal.

    When the gateway responds, Vesta will identify the response in the DOM and automatically capture the values for the required fields and analyze the transaction for fraud.

  3. Capture Vesta’s fraud analysis response by overriding the window.VestaTxCompleteListener.onComplete() function as shown below:
       window.VestaTxCompleteListener.onComplete = (error?: boolean, result?, errorMessage?: any) => {
       console.log('actual result ===>', error, result, errorMessage)
       if (error) {
          console.log('some error happened', error)
       } else {
       }
     }
    

    Vesta returns guaranteed or not guaranteed.

  4. Review Vesta’s response and decide whether to submit the transaction for payment and fulfill the order or reject the transaction due to risk. If you choose to submit a transaction that is not guaranteed to your gateway for payment, you assume all of the risk associated with the transaction.
  5. Follow the steps in the Send Vesta the Final Transaction Status section to notify Vesta of your decision.


Two-step: Click here to view step-by-step instructions for two-step transaction evaluation using Payment Guarantee.
  1. Set your authorization flow to pre-auth as shown in the sample code below:
    window.VestaExtensionJS.setAuthFlowConfig({ 
       authType: 'PRE' 
    })
    
  2. Create a transaction submission button by assigning the VT_FINAL_ACTION class to a button, as shown in the sample code below:
    <Button id='final_complete'
            className={`blue {VtClass.VT_FINAL_ACTION }`}
            type='submit'
    >Shop Again</Button> 
    

    When your customer clicks the button, the transaction details will be sent to Vesta for review. Vesta returns a preauth decision with one of the following values:

    • Guaranteeable - Vesta thinks the transaction is safe. Send the transaction to your bank for authorization.
    • Not Guaranteed - Vesta thinks the transaction is risky. You may choose to cancel the transaction to save the processing fees.

    Based on Vesta’s response, you can decide whether to cancel the transaction or submit it to the gateway for authorization or payment:

    • Cancel the transaction - If you choose to cancel the transaction, follow the steps in the Send Vesta the Transaction Status section to notify Vesta of your decision.
    • Submit the transaction for authorization - If you submit the transaction for authorization and your gateway authorizes it, you may request an updated evaluation based on the bank’s response.
    • Submit the transaction for payment - If you choose to submit a transaction that is not guaranteed for payment, you assume the fraud risk associated with the transaction.
  3. Set your authorization step to post-auth as shown in the sample code below:
    window.VestaExtensionJS.setAuthFlowConfig({ 
       authType: 'POST' 
       customerName: 'Customer-Name-From-Registration' 
    }) 
    

    The customerName value must match the customer name that was provided during registration.

  4. Submit the transaction to your gateway and capture the response as normal.

    When the gateway responds, Vesta will identify the response in the DOM and automatically capture the values for the required fields and analyze the transaction for fraud.

    Vesta returns guaranteed or not guaranteed.

  5. Capture Vesta’s fraud analysis response by overriding the window.VestaTxCompleteListener.onComplete() function as shown below:
    window.VestaTxCompleteListener.onComplete = (error?: boolean, result?, errorMessage?: any) => {
          console.log('actual result ===>', error, result, errorMessage)
          if (error) {
            console.log('some error happened', error)
          } else {
          }
        }
    

    If you choose to submit a transaction that is not guaranteed to your gateway for payment, you assume all of the risk associated with the transaction.

  6. Review Vesta’s response and decide whether to submit the transaction for payment and fulfill the order or reject the transaction due to risk.

  7. Follow the steps in the Send Vesta the Transaction Status section to notify Vesta of the final results of the transaction.


Payment Protect

One-step: Click here to view step-by-step instructions for one-step transaction evaluation using Payment Protect.
  1. Set your authorization flow to one-step as shown in the sample code below:
    window.VestaExtensionJS.setAuthFlowConfig({ 
       authType: 'SINGLE-STEP' 
    })
    
  2. Create a transaction submission button by assigning the VT_FINAL_ACTION class to a button, as shown in the sample code below:
    <Button id='final_complete'
            className={`blue {VtClass.VT_FINAL_ACTION }`}
            type='submit'
    >Shop Again</Button> 
    

    When your customer clicks the button, submit the transaction to your gateway and capture the response as normal.

    When the gateway responds, Vesta will identify the response in the DOM and automatically capture the values for the required fields and analyze the transaction for fraud.

  3. Capture Vesta’s fraud analysis response by overriding the window.VestaTxCompleteListener.onComplete() function as shown below:
       window.VestaTxCompleteListener.onComplete = (error?: boolean, result?, errorMessage?: any) => {
       console.log('actual result ===>', error, result, errorMessage)
       if (error) {
          console.log('some error happened', error)
       } else {
       }
     }
    

    The response includes the following information:

    • Score - The risk score is a number from 0 to 100 that indicates how risky the transaction is. A higher number indicates a riskier transaction.
    • Insights - Insights give information about why Vesta assigned the risk score. For example, the customer’s phone number may not match the billing address phone number.
    • Risk Band - The risk band adds usable information to the risk score and has one of the following values: very safe, safe, moderate, risky, or very risky.
  4. Based on the response, submit the transaction to the bank for payment or cancel the transaction.
  5. Follow the steps in the Send Vesta the Transaction Status section to notify Vesta of your decision.


Two-step: Click here to view step-by-step instructions for two-step transaction evaluation using Payment Protect.
  1. Set your authorization flow to pre-auth as shown in the sample code below:
    window.VestaExtensionJS.setAuthFlowConfig({ 
       authType: 'PRE' 
    })
    
  2. Create a transaction submission button by assigning the VT_FINAL_ACTION class to a button, as shown in the sample code below:
    <Button id='final_complete'
            className={`blue {VtClass.VT_FINAL_ACTION }`}
            type='submit'
    >Shop Again</Button> 
    

    When your customer clicks the button, the transaction details will be sent to Vesta for review. Vesta returns a preauth decision with one of the following values:

    • Score - The risk score is a number from 0 to 100 that indicates how risky the transaction is. A higher number indicates a riskier transaction.
    • Insights - Insights give information about why Vesta assigned the risk score. For example, the customer’s phone number may not match the billing address phone number.
    • Risk Band - The risk band adds usable information to the risk score and has one of the following values: very safe, safe, moderate, risky, or very risky.

    Based on Vesta’s response, you can decide whether to cancel the transaction or submit it to the gateway for authorization:

    • Cancel the transaction - If you choose to cancel the transaction, follow the steps in the Send Vesta the Transaction Status section to notify Vesta of your decision.
    • Submit the transaction for authorization - If you submit the transaction for authorization and your gateway authorizes it, you may request an updated evaluation based on the bank’s response.
  3. Set your authorization step to post-auth as shown in the sample code below:
    window.VestaExtensionJS.setAuthFlowConfig({ 
       authType: 'POST' 
       customerName: 'Customer-Name-From-Registration' 
    }) 
    

    The customerName value must match the customer name that was provided during registration.

  4. Submit the transaction to your gateway and capture the response as normal.

    When the gateway responds, Vesta will identify the response in the DOM and automatically capture the values for the required fields and analyze the transaction for fraud.

    Vesta returns updated score, insight, and risk band values.

  5. Capture Vesta’s fraud analysis response by overriding the window.VestaTxCompleteListener.onComplete() function as shown below:
    window.VestaTxCompleteListener.onComplete = (error?: boolean, result?, errorMessage?: any) => {
          console.log('actual result ===>', error, result, errorMessage)
          if (error) {
            console.log('some error happened', error)
          } else {
          }
        }
    
  6. Review Vesta’s response and decide whether to submit the transaction for payment and fulfill the order or reject the transaction due to risk.

  7. Follow the steps in the Send Vesta the Transaction Status section to notify Vesta of the final results of the transaction.


Send Vesta the Transaction Status

Use the /transactions/transactionStatus endpoint to send Vesta any final details about the transaction. Whether a transaction is risky and you decide to cancel the order, or the transaction is safe and you decide to accept it, Vesta uses the final transaction status to improve our recommendations for your future transaction.

Send a PATCH request to the transactions/transactionStatus endpoint with the Order Number, the transaction ID, an Oder Status value, and Payment Status in the body of the request. The Order Status field accepts the following values: Cancelled, Fulfilled, Paid, or Partially Paid. The Payment Status field accepts the following values: Captured, Declined, Issuer Declined, or Voided.

VTClasses

The code below lists all of the constants that Vesta accepts as classTags values that you can use when building your applications. Use the VTClasses to create application elements that Vesta can watch for transaction, user, and device information, which is required as part of our fraud analysis. See the Collect Payment Details section for an example of using class tags to build a payment form that sends payment information to Vesta.

//default class tags 
export class VtClass { 
    public static readonly VT_ACTION = 'vesta_action' 
    public static readonly VT_FINAL_ACTION = 'vesta_final_action' 
    public static readonly VT_FINAL_AUTH = 'vesta_final_auth 
    public static readonly VT_CART_ACTION = 'vesta_cart_action' 
} 
 
// item 
export class ItemClassTags { 
    public static readonly PARENT_TAG = 'vesta_item_container' 
    public static readonly ITEM_LIST_CONTAINER = 'vesta_item_container' 
    public static readonly LABEL = 'vesta_item_container_label' 
    public static readonly PRICE = 'vesta_item_container_price' 
    public static readonly TOTAL_PRICE = 'vesta_item_container_total_price' 
    public static readonly QUANTITY = 'vesta_item_container_quantity' 
    public static readonly IS_INCLUDED = 'vesta_item_container_is_included' 
    public static readonly ID = 'vesta_item_container_id' 
    public static readonly IS_DESCRIPTION = 'vesta_item_container_description' 
} 
 
 
// order card 
export class OrderClassTags { 
    public static readonly PARENT_TAG = 'vesta_order_container' 
    public static readonly ORDER_NUMBER = 'vesta_order_container_order_number' 
} 
 
//card container 
export class CardInfoClassTags { 
    public static readonly PARENT_TAG = 'vesta_card_info_container' 
    public static readonly RADIO = 'vesta-card-info-container-radio' 
    public static readonly NAME = 'vesta_card_info_container_name' 
    public static readonly NUMBER = 'vesta_card_info_container_number' 
    public static readonly EXPIRY_DATE = 'vesta_card_info_container_expiry_date' 
    public static readonly EXPIRY_MONTH = 'vesta_card_info_container_expiry_month' 
    public static readonly EXPIRY_YEAR = 'vesta_card_info_container_expiry_year' 
    public static readonly SECURITY_NO = 'vesta_info_container_security_no' 
    public static readonly BIN_NO = 'vesta_info_container_bin_no' 
    public static readonly GATE_WAY = 'vesta_info_container_gate_way' 
} 
 
//biller container 
export class BillingInfoClassTags { 
    public static readonly PARENT_TAG = 'vesta_billing_info_container' 
    public static readonly FULLNAME = 'vesta_billing_info_container_fullname' 
    public static readonly FIRSTNAME = 'vesta_billing_info_container_firstname' 
    public static readonly LASTNAME = 'vesta_billing_info_container_lastname' 
    public static readonly EMAIL = 'vesta_billing_info_container_email' 
    public static readonly PHONE_NO = 'vesta_billing_info_container_phone_no' 
    public static readonly ADDRESS_COUNTRY = 'vesta_billing_info_container_address_country' 
    public static readonly ADDRESS_PROVINCE = 'vesta_billing_info_container_address_province' 
    public static readonly ADDRESS_STATE = 'vesta_billing_info_container_address_state' 
    public static readonly ADDRESS_CITY = 'vesta_billing_info_container_address_city' 
    public static readonly ADDRESS_1 = 'vesta_billing_info_container_address_1' 
    public static readonly ADDRESS_2 = 'vesta_billing_info_container_address_2' 
    public static readonly ADDRESS_ZIPCODE = 'vesta_billing_info_container_address_zipcode' 
} 
 
 
//shipping container 
export class ShippingClassTags { 
    public static readonly PARENT_TAG = 'vesta_shipping_info_container' 
    public static readonly FULLNAME = 'vesta_shipping_info_container_fullname' 
    public static readonly FIRSTNAME = 'vesta_shipping_info_container_firstname' 
    public static readonly LASTNAME = 'vesta_shipping_info_container_lastname' 
    public static readonly EMAIL = 'vesta_shipping_info_container_email' 
    public static readonly PHONE_NO = 'vesta_shipping_info_container_phone_no' 
    public static readonly ADDRESS_COUNTRY = 'vesta_shipping_info_container_address_country' 
    public static readonly ADDRESS_PROVINCE = 'vesta_shipping_info_container_address_province' 
    public static readonly ADDRESS_STATE = 'vesta_shipping_info_container_address_state' 
    public static readonly ADDRESS_CITY = 'vesta_shipping_info_container_address_city' 
    public static readonly ADDRESS_1 = 'vesta_shipping_info_container_address_1' 
    public static readonly ADDRESS_2 = 'vesta_shipping_info_container_address_2' 
    public static readonly ADDRESS_ZIPCODE = 'vesta_shipping_info_container_address_zipcode' 
    public static readonly DELIVERY_METHOD = 'vesta_shipping_info_container_delivery_method' 
    public static readonly CARRIER = 'vesta_shipping_info_container_carrier' 
    public static readonly CLASS = 'vesta_shipping_info_class' 
    public static readonly AMOUNT = 'vesta_shipping_info_amount' 
    public static readonly CURRENCY_CODE = 'vesta_shipping_info_currency_code' 
    public static readonly PICKUP_LOCATION = 'vesta_shipping_info_pickup_location' 
    public static readonly PICKUP_TIME = 'vesta_shipping_info_pickup_time' 
    public static readonly DELIVERY_DATE = 'vesta_shipping_info_delivery_date' 
} 

export class GiftCardClassTags {
    public static readonly PARENT_TAG = 'vesta_gift_card_container'
    public static readonly BRAND_NAME = 'vesta_gift_card_container_brand_name'
    public static readonly MERCHANT_NAME = 'vesta_gift_card_container_merchant_name'
}

export class PartialPaymentClassTags {
    public static readonly PARENT_TAG = 'vesta_gift_partial_payment_container'
    public static readonly CREDIT_CARD = 'vesta_gift_partial_payment_container_creditcard'
    public static readonly GIFT_CARD = 'vesta_gift_partial_payment_container_giftcard'
    public static readonly PAYPAL = 'vesta_gift_partial_payment_container_paypal'
}