How To: Create an Umbraco member and email the customer their password at checkout using uCommerce

One of the uCommerce questions I see getting asked about quite a lot is how to email the customer their password during the checkout process

Out of the box uCommerce creates a new Umbraco member for you when you tick the "Create Customers As Members" checkbox on the catalog group configuration screen (below).

SNAGHTMLbe47195

However it doesn't email the customer their password when they complete their order -which is a pain as it means the next time the customer visits, they have to reset their password (a backwards step/barrier to entry) before being able to complete their order.

How To Email The Customer Their Password On Checkout

As Søren mentioned here, you should create your own checkout pipeline.

If you're not familiar with uCommerce's concept of pipelines, pipelines are basically a way of running your own code at different stages of an order's lifecycle -whether it's updating the basket or a change of status e.g. "Delivered". Pipelines are where any actions you would like to trigger when the order changes should be placed. I'll blog about pipelines separately as they're good to learn about if you're not already familiar with them.

Rather than writing about how to write a uCommerce pipeline to create a new customer and email them their password from scratch, I have just committed an example pipeline to the uCommerce Razor Store repository on BitBucket which does exactly that. So going forwards all installs of the uCommerce Razor Demo Store will be able to take advantage of this pipeline.

This post is instead about how to configure the CreateMemberForCustomerTask pipeline task.

What Information Does It Email?

The CreateMemberForCustomerTask uses uCommerce's standard email service so you will need to configure a new email type "NewUserAccount" in the uCommerce backend:

image

The task passes any extra values you may need through the QueryString so in your macro you can use the following QueryString Parameter keys:

  • customerId (the uCommerce Id for the customer)
    memberId (the Umbraco member Id)
    orderNumber (the friendly order number e.g. WEB-123)
    orderGuid (the reference you should use to get the order)
    User.Username (the user's login name -their email address)
    User.Password (the user's password)
  • That should give you enough to get the order, customer or member and use it as you need to in your email.

How To Configure The CreateMemberForCustomerTask Pipeline Task

Firstly, download the latest version of the uCommerce Razor Demo Store. If you've already installed the uCommerce Razor Demo Store on your site I highly recommend backing up your files.

Upload UCommerce.RazorStore.dll to your /bin folder (this is the assembly with the new CreateMemberForCustomerTask pipeline task in it).

Finally, you will need to edit your checkout pipeline configuration file (\Umbraco\uCommerce\Pipelines\Checkout.config) and replace the existing CreateMemberForCustomerTask node with this one:

<component id="Checkout.CreateMemberForCustomer"
			service="UCommerce.Pipelines.IPipelineTask`1[[UCommerce.EntitiesV2.PurchaseOrder, UCommerce]], UCommerce"
			type="UCommerce.RazorStore.Pipelines.Checkout.CreateMemberForCustomerTask, UCommerce.RazorStore">
    <parameters>
        <emailTypeName>NewUserAccount</emailTypeName>
        <!-- By prefixing the key with _, it won't display in the admin section -->
        <passwordKey>_password</passwordKey>
    </parameters>
</component>

 

Once you've done that your uCommerce will use the new custom pipeline instead of it's standard. Easy eh!

But I Want The User To Set Their Own Password

No problem, I've got you covered. In it's default configuration mode, the CreateMemberForCustomerTask pipeline task will create a random password where no password has been set and will email that (it generates the password based on the same word lists that the default uCommerce task does but this may change).

To allow the customer to specify their password during the checkout process you will need to add a custom property to their PurchaseOrder with a key that matches the one specified in your config above (by default I would recommend prefixing this key with an underscore (_) as this hides it from the uCommerce admin backend).

Setting this property is simple. Using the uCommerce Razor Demo Store as an example, I would add it to the \macroScripts\uCommerce\Address.cshtml macroScript as that's the first time you get their email address. You will need to add a password field to your form somewhere and then use this in the postback logic:

Add The New Form Elements

Add the following HTML to the billing form:

<div class="span12">        
    <div class="span5 control-group">
        @{
            var isCreatingAnAccount = !String.IsNullOrWhiteSpace(TransactionLibrary.GetBasket().PurchaseOrder["_password"]);
            var isChecked = isCreatingAnAccount ? "checked" : "";
        }
        <label><input type="checkbox" name="create-account" checked="@isChecked" /> Save my account details</label>
    </div>
    <div class="span5 control-group">
        <label>Password</label>
        <input type="password" class="span12" name="account-password" />
    </div>
</div>

 

This will check whether the user would like to set their password or not, you may like to add some validation around it e.g. "if the checkbox is set" then make the password field mandatory, that will produce something that looks like this:

SNAGHTMLc0b9599

Store The User's Password

The last thing you'll need to do is store the value on postback. At the top of Address.cshml there is some logic that processes the post, you'll need to alter the first part:

if (request.HttpMethod == "POST" && request.Form.AllKeys.Any(x => x == "update-addresses"))
{
    if (!String.IsNullOrWhiteSpace(request.Form["create-account"]))
    {
        var basket = TransactionLibrary.GetBasket().PurchaseOrder;
        // This key must match the one you have set in the Checkout.config file
        basket["_password"] = request.Form["account-password"];
        // You shouldn't need to call TransactionLibrary.ExecuteBasketPipeline() here as it will be called later in the process (and isn't necessary here)
        basket.Save();
            
    }
    TransactionLibrary.EditBillingInformation(
...

 

That should be it. Now when the checkout pipeline is called (after payment is taken) then the customer should be emailed their password.

Author

Tim

comments powered by Disqus