Table of Contents

Submitting to cart

How to submit things to cart

During the checkout flow, the customer is often asked to provide information and select e.g. a payment and shipping method before being allowed to submit the cart and convert it to an order.

In this section we will go though all the different things you can do when submitting to the cart, e.g.

  • Billing & Delivery details
  • User creation during checkout
  • Payment & shipping method selection
  • Applying vouchers
  • Paying with loyalty points
  • Using gift cards
  • Creating subscription orders
  • Paying with a saved card - and saving a card
  • Opt-ins
  • Using custom fields

To submit something to card you submit a form with the id ordersubmit and input fields representin the features you want to implement:

<form name="ordersubmit" id="ordersubmit" method="post" role="form">

    <!--Insert form content here-->

    <button type="submit" name='@GetValue("CartV2.CurrentStepButtonName")' id='@GetValue("CartV2.CurrentStepButtonName")'>@Translate("Update_order", "Update order")</button>
    <button type="submit" name='@GetValue("CartV2.NextStepButtonName")' id='@GetValue("CartV2.NextStepButtonName")'>@Translate("Create_order", "Create order")</button>
</form>

In order for the cart to receive this information, the input fields being submitted must have specific IDs, names & values. You can read more about each feature below.

Billing details

To add billing address details to an order, use input fields with the IDs listed below. Most map directly to standard user fields, but a few are for billing-specific information like an EAN-number or a VAT-number.

Field name & id Notes
EcomOrderCustomerCompany
EcomOrderCustomerName
EcomOrderCustomerTitle
EcomOrderCustomerFirstName
EcomOrderCustomerSurname
EcomOrderCustomerMiddleName
EcomOrderCustomerHouseNumber
EcomOrderCustomerInitials
EcomOrderCustomerPrefix
EcomOrderCustomerAddress
EcomOrderCustomerAddress2
EcomOrderCustomerZip
EcomOrderCustomerCity
EcomOrderCustomerCountry This field influences which payment methods & shipping methods can be selected.
EcomOrderCustomerRegion
EcomOrderCustomerPhone
EcomOrderCustomerFax
EcomOrderCustomerCell
EcomOrderCustomerEmail
EcomOrderCustomerVatRegNumber
EcomOrderCustomerEAN
EcomOrderCustomerRefId
EcomOrderCustomerComment Maps to the customer comment order field.

Since the billing country is important for determining which payment & shipping methods should be shown, you should make sure to preselect any default option and also find a way to update the cart when the user selects one of the commerce countries on the solution:

<!--Billing Address Fields-->
<div>
    <!--Personal Fields-->
    <div>
        <input type="text" name="EcomOrderCustomerTitle" id="Title" value='' />
        <input type="text" name="EcomOrderCustomerFirstName" id="EcomOrderCustomerFirstName" value='' />
        <input type="text" name="EcomOrderCustomerSurname" id="EcomOrderCustomerSurname" value='' />
        <input type="text" name="EcomOrderCustomerEmail" id="EcomOrderCustomerEmail" value='' />
        <input type="text" name="EcomOrderCustomerPhone" id="EcomOrderCustomerPhone" value='' />
    </div>

    <!--Address Fields-->
    <div>
        <input type="text" name="EcomOrderCustomerAddress" id="EcomOrderCustomerAddress" value='' />
        <input type="text" name="EcomOrderCustomerAddress2" id="EcomOrderCustomerAddress2" value='' />
        <input type="text" name="EcomOrderCustomerHouseNumber" id="EcomOrderCustomerHouseNumber" value='' />
        <input type="text" name="EcomOrderCustomerZip" id="EcomOrderCustomerZip" value='' />
        <input type="text" name="EcomOrderCustomerCity" id="EcomOrderCustomerCity" value='' />
        <input type="text" name="EcomOrderCustomerRegion" id="EcomOrderCustomerRegion" value='' />
        <select name="EcomOrderCustomerCountry" id="EcomOrderCustomerCountry" onchange="updateCart();">
            @foreach (var country in GetLoop("Countries"))
            {
                if (country.GetString("Ecom:Country.IsCustomerCountryOrDefault") == "true")
                {
                    <option value='@country.GetValue("Ecom:Country.Code2")' selected>@country.GetValue("Ecom:Country.Name")</option>
                }
                else
                {
                    <option value='@country.GetValue("Ecom:Country.Code2")'>@country.GetValue("Ecom:Country.Name")</option>
                }
            }
        </select>
    </div>
</div>

Delivery details

Delivery address details are submitted to cart in the same way as billing details – and are in fact almost identical to billing details.

The 'Copy customer info to delivery info fields if empty'-checkbox allows you to copy billing address field values to the delivery address fields if no part of the delivery address has been filled out.

Field name & id Notes
EcomOrderDeliveryCompany
EcomOrderDeliveryName
EcomOrderDeliveryFirstName
EcomOrderDeliveryTitle
EcomOrderDeliverySurname
EcomOrderDeliveryHouseNumber
EcomOrderDeliveryMiddleName
EcomOrderDeliveryInitials
EcomOrderDeliveryPrefix
EcomOrderDeliveryAddress
EcomOrderDeliveryAddress2
EcomOrderDeliveryZip
EcomOrderDeliveryCity
EcomOrderDeliveryCountry
EcomOrderDeliveryRegion
EcomOrderDeliveryPhone
EcomOrderDeliveryFax
EcomOrderDeliveryCell
EcomOrderDeliveryEmail

Creating a user during checkout

To create a user or update an existing user during checkout, submit a field with the name and ID EcomUserCreateNewOrUpdate alongside fields specifying the username and password.

Field name & Id Notes
EcomUserCreateNewOrUpdate Older implementations used EcomUserCreateNew
EcomUserCreateUserName
EcomUserCreatePassword
EcomUserCreateConfirmPassword

Payment methods

Payment methods are submitted to cart using input elements with the name EcomCartPaymethodID and an id of the type EcomCartPaymethodID_{PaymentMethodID}, with PaymentMethodID replaced by a valid id.

Some payment methods support rendering a payment form inline directly in the cart template, others require you to progress in the checkout flow. This part is payment-method specific, and the content of the payment form typically comes from a template selected on the payment method.

<!--Payment Methods-->
@foreach (var paymentmethod in GetLoop("Paymethods")) //Loop through payment methods
{
    <div class="radio">
        <label >
            @if (@paymentmethod.GetString("Ecom:Cart.Paymethod.IsSelected") == "true") // check if payment method is selected
            {
                <input type="radio" name="EcomCartPaymethodID" id='EcomCartPaymethodID_@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' value='@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' checked='checked' />
            }
            else
            {
                <input type="radio" name="EcomCartPaymethodID" id='EcomCartPaymethodID_@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' value='@paymentmethod.GetValue("Ecom:Cart.Paymethod.ID")' />
            }
            @paymentmethod.GetValue("Ecom:Cart.Paymethod.Name")

        </label>
    </div>
}

<!--Inline Payment Forms-->
@if (!string.IsNullOrWhiteSpace(GetString("Ecom:Cart.PaymentInlineForm")))
{
     @GetString("Ecom:Cart.PaymentInlineForm")
}

Shipping methods

Shipping methods are submitted to cart using input elements with the name EcomCartShippingMethodId and an id of the type EcomCartShippingMethodId_{ShippingMethodID} with ShippingMethodID being replaced by a valid id.

Some shipping methods will ask the customer to select e.g. a parcel shop and a parcel type and so on - that's shipping method specific, and is handled in a template selectdd on the shipping method.

<!--Shipping methods-->
@foreach (var shippingmethod in GetLoop("Shippingmethods"))
{
    <div class="radio">
        <label>
            @if (shippingmethod.GetString("Ecom:Cart.Shippingmethod.IsSelected") == "true")
            {
                <input type="radio" name="EcomCartShippingmethodID" onclick="updateCart();" id='EcomCartShippingmethodID_@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' value='@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' checked="checked" />
            }
            else
            {
                <input type="radio" name="EcomCartShippingmethodID" onclick="updateCart();" id='EcomCartShippingmethodID_@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' value='@shippingmethod.GetValue("Ecom:Cart.Shippingmethod.ID")' />
            }
            @shippingmethod.GetValue("Ecom:Cart.Shippingmethod.Name")
        </label>
    </div>

    <!--Shippingmethod Content - e.g. Parcel shops or Parcel types-->
    if (!string.IsNullOrWhiteSpace(shippingmethod.GetString("Ecom:ShippingProvider.Content")))
    {
        @shippingmethod.GetString("Ecom:ShippingProvider.Content")
    }
}

Vouchers

Vouchers are applied to an order by submitting a valid voucher code in a field with the ID EcomOrderCustomerVoucher.

<!--Vouchers-->
<input type="text" name="EcomOrderCustomerVoucher" id="EcomOrderCustomerVoucher" value='@GetString("Ecom:Order.Customer.VoucherCode")' />

Loyalty points

To apply loyalty points to an order, you submit a field with the id EcomOrderPointsToUse and a value in loyalty points. In this example we first check if the current user is logged in - if she is, we retrieve her points balance and check if it's possible to use points on an order.

@{
    var isLoggedIn = Dynamicweb.Security.UserManagement.User.IsExtranetUserLoggedIn();
    var currentUser = Dynamicweb.Security.UserManagement.User.GetCurrentExtranetUser();

    double pointsbalance = 0;
}

<!--Pay with points-->
@if (isLoggedIn)
{
    pointsbalance = Dynamicweb.Ecommerce.Services.Loyalty.GetPointsBalance(currentUser.ID);

    <div>Your points: @pointsbalance</div>

    @if (pointsbalance > 0)
    {
        <input type="text" name="EcomOrderPointsToUse" id="EcomOrderPointsToUse" value='@GetValue("Ecom:Order.PointsToUse")' />
    }
    else
    {
        <input type="text" name="EcomOrderPointsToUse" id="EcomOrderPointsToUse" value='' disabled title='No loyalty points available' />
    }
}

Gift Cards

Gift cards are applied to an order by submitting a valid gift card code in a field with the id EcomOrderGiftCardCode.

<input type="text" name="EcomOrderGiftCardCode" id="EcomOrderGiftCardCode" value="" />

Subscription orders

To create a subscription order you must first check if the payment method supports subscription orders. If it does, submit a boolean field with the id & name EcomRecurringOrderCreate alongside an interval. an interval unit, a start date and an end date.

Field Name & ID Value Notes
EcomRecurringOrderCreate
EcomOrderRecurringInterval -
EcomOrderRecurringIntervalUnit 0 = days, 1 = weeks, 2 = months
EcomOrderRecurringEndDate
EcomOrderRecurringEndDate_year
EcomOrderRecurringEndDate_month
EcomOrderRecurringEndDate_day
EcomOrderRecurringStartDate 
@if (@GetBoolean("Ecom:Order.PaymentMethod.RecurringSupport") == true)
{
    <!--Checkbox to create recurring orders-->
    <input type="checkbox" name="EcomRecurringOrderCreate" id="EcomRecurringOrderCreate" checked='@GetBoolean("Ecom:User.CreateNew")' />

    <!--Interval-->
    <input type="text" name="EcomOrderRecurringInterval" id="EcomOrderRecurringInterval" value='1' />
    <select name="EcomOrderRecurringIntervalUnit" id="EcomOrderRecurringIntervalUnit" value="0">
        <option value="0">Days</option>
        <option value="1" selected>Weeks</option>
        <option value="2">Months</option>
    </select>

    <!--Start Date-->
    <input type="date" name="EcomOrderRecurringStartDate" id="EcomOrderRecurringStartDate" min='@DateTime.Today.ToString("yyyy-MM-dd")' value='@DateTime.Today.ToString("yyyy-MM-dd")' />

    <!--End Date-->
    <input type="date" name="EcomOrderRecurringEndDate" id="EcomOrderRecurringEndDate" min='@DateTime.Today.AddDays(7).ToString("yyyy-MM-dd")' value='@DateTime.Today.AddDays(7).ToString("yyyy-MM-dd")' />
}

Saved cards

Saved cards - or more properly saved payment methods - are saved by submitting a boolean field with the id EcomOrderSavedCardCreate_{PaymethodID} alongside a field specifying the name of the saved card. You should ensure that the payment method supports saved cards - at the time of writing this is supported by Stripe, ChargeLogic and QuickPay Payment Window.

To use a saved card submit a field with the ID EcomCartSavedCardID_{SavedCardId}, with {SavedCardId} being the id of a saved card. Make sure you clear any previously selected payment method when a saved card is submitted.

<!--Saving a card -->
@foreach (var paymentmethod in GetLoop("Paymethods")) //Loop through payment methods
{
    if (paymentmethod.GetString("Ecom:Cart.Paymethod.SupportSavedCard") == "true" && @paymentmethod.GetString("Ecom:Cart.Paymethod.IsSelected") == "true") // Check if this method supports saved cards & is selected
    {
        <input type="checkbox" name="EcomOrderSavedCardCreate" id="EcomOrderSavedCardCreate_@paymentmethod.GetString("Ecom:Cart.Paymethod.ID")" value="true" />
        <input type="text" name="EcomOrderSavedCardName" id="MySavedCardName" value='My @paymentmethod.GetValue("Ecom:Cart.Paymethod.Name") Card' />
    }
}
<!-- Using a card -->
@{
    var savedcards = GetLoop("SavedCards");
}
@if (savedcards.Any()) //Checks if this user has any saved cards
{
    foreach (var savedcard in savedcards)
    {
        <div class="radio">
            <label>
                @if (@savedcard.GetString("Ecom:SavedCard.IsSelected") == "true") //Checks if the saved card is selected
                {
                    <input type="radio" name="EcomCartSavedCardID" id="EcomCartSavedCardID_@savedcard.GetString("Ecom:SavedCard.ID")" value="@savedcard.GetString("Ecom:SavedCard.ID")" checked="checked" />
                }
                else
                {
                    <input type="radio" name="EcomCartSavedCardID" id="EcomCartSavedCardID_@savedcard.GetString("Ecom:SavedCard.ID")" value="@savedcard.GetString("Ecom:SavedCard.ID")" />
                }
                @savedcard.GetString("Ecom:SavedCard.Name")

            </label>
        </div>
    }
}

To allow the customer to see/edit/remove a saved card use a customer center app.

Opt-ins

From the cart you can change the value of the Email permission field on the logged in user, and the user can be asked to accept the Terms & Conditions.

A setting on the cart - Use email subscription - can be used in templates.

//Email permission
@if (GetString("Ecom:Cart.UseNewsletterSubscription") == "True")
{
    <input type="checkbox" name="EcomOrderSubscribeToNewsletter" id="EcomOrderSubscribeToNewsletter" checked='@GetBoolean("Ecom:Order.Customer.NewsletterSubscribe")' />
    <label for="EcomOrderSubscribeToNewsletter">Subscribe to newsletter</label>
}
// Terms & Conditions
    <input type="checkbox" name="EcomOrderCustomerAccepted" id="EcomOrderCustomerAccepted" />
    <label for="EcomOrderCustomerAccepted">Accept terms & conditions</label>

Custom field

Custom fields – such as order fields or a coupon field – are posted to the cart using input elements which take the system name as the field name. No ID is necessary.

<div>
    <label for="Coupons">Coupon</label>
    <input  type="text" name="Coupons" value='' />
</div>
<div>
    <label for="TrackingURLFromERP">TrackingURLFromERP</label>
    <input type="text" name="TrackingURLFromERP" value='' />
</div>

Other fields

Finally, a small set of order fields are used primarily on integrated solutions. Although you can of course submit values to them from frontend this is not the typical case.

Field Name & ID Notes
EcomCartRequisition
EcomOrderReference
EcomOrderShippingDate
EcomOrderIntegrationId
Improve this doc
To top