This section contains instructions for further development and customisation of Dibs.
Content
One-click purchase
One-click purchase
End users who are already logged into the website, can save their credit cards at Dibs at the time of first purchase, and then in subsequent purchases use the saved credit card (only if logged in), without having to re-enter the card details every time they make a purchase. Dibs calls this a "subscription".
Enable subscriptions
To enable subscriptions contact Dibs to enable it for your merchant account. Then enable the saveCreditCardsAtDibs optoin in the Litium.Studio.AddOns.Dibs.dll.config
You should then modify your checkout page to allow the users to choose the saved cards on subsequent purchases.
Checkout page modifications
You may use the webcontrols comming with the Dibs plugin to show the user a drop down list to choose from saved cards, or built your own radio buttons.
Following example shows how the Litium Accelerator B2C code is modified to use these webcontrols.
Step 1
Modify the web.config to include the tag prefix. In web.config system.web>pages>controls add following.
<add tagPrefix="Dibs" namespace="Litium.Studio.AddOns.Dibs.WebControls" assembly="Litium.Studio.AddOns.Dibs"/>
Step 2
Modify the wwwroot\Site\CMS\Templates\B2C\UserControls\CheckOut\PaymentMethodSelection.ascx as shown below.
<div class="paymentmethodscontainer hide-for-small">
<Ecom:PaymentMethodRepeater runat="server" ID="PaymentMethodRepeater" OnItemDataBound="PaymentMethodRepeaterOnItemDataBound">
<ItemTemplate>
<asp:Panel runat="server" ID="PaymentMethodContainer">
<div class="paymentmethod row">
<div class="large-10 column">
<div class="checkbox">
<asp:RadioButton data-customformname="PaymentMethod" OnCheckedChanged="RadioButtonOnChecked" runat="server" AutoPostBack="True" id="PaymentMethodRadioButton" />
</div>
<div class="name">
<strong>
<asp:Label runat="server" AssociatedControlID="PaymentMethodRadioButton">
<Ecom:PaymentMethodDisplayName runat="server" />
</asp:Label>
</strong>
</div>
<div class="cost">
<Ecom:ShoppingCartPanel runat="server">
<Klarna:IsKlarnaPartPayment runat="server">
<OnTrue>
<Klarna:IsPartialPaymentsAsSeperateMethods runat="server" OnPreRender="KlarnaExistPreRender">
<OnFalse>
<Klarna:PartPaymentOptionsDropDownList ID="PartPaymentOptionsDropDownListKlarna" runat="server"
Visible="true" AutoPostBack="true" DisplayCurrencySymbol="true" OnSelectedIndexChanged="PartPaymentChangedKlarna" />
</OnFalse>
</Klarna:IsPartialPaymentsAsSeperateMethods>
</OnTrue>
<OnFalse>
-
<web:WebSiteString Name="PaymentMethodCost" runat="server" />
<Ecom:PaymentMethodCost DisplayCurrencySymbol="True" runat="server" />
</OnFalse>
</Klarna:IsKlarnaPartPayment>
<Klarna:PartPaymentOptionPanel runat="server">
<table>
<tr>
<td>CampaignCode</td><td><Klarna:PartPaymentOptionCampaignCode runat="server" /></td>
</tr>
<tr>
<td>UseCase</td> <td><Klarna:PartPaymentOptionUseCase runat="server" /></td>
</tr>
</table>
</Klarna:PartPaymentOptionPanel>
<Dibs:CanSaveCardAtDibs runat="server">
<OnTrue>
<Dibs:HasSavedCards runat="server" OnPreRender="DibsExistPreRender">
<OnTrue>
<Dibs:SavedCardsDropDownList ID="SavedCardsDropDownList" runat ="server" ShowPayWithNewCardOption="true" AutoPostBack="true" OnSelectedIndexChanged="PaymentOptionsChanged" />
</br>
<Dibs:SavedCardInfoRepeater runat="server">
<ItemTemplate>
<Dibs:SavedCardInfoCCCategory runat="server" />
<Dibs:SavedCardInfoCCPart runat="server" />
<Dibs:SavedCardInfoCCPrefix runat="server" />
<Dibs:SavedCardInfoCCType runat="server" />
<Dibs:SavedCardInfoExpM runat="server" />
<Dibs:SavedCardInfoExpY runat="server" />
</br>
</ItemTemplate>
</Dibs:SavedCardInfoRepeater>
</OnTrue>
</Dibs:HasSavedCards>
<Dibs:SaveCardAtDibs Text="SaveCard at dibs" runat="server" OnCheckedChanged="PaymentOptionsChanged" />
</OnTrue>
</Dibs:CanSaveCardAtDibs>
</Ecom:ShoppingCartPanel>
</div>
<div class="description">
<Ecom:PaymentMethodDescription runat="server">
</Ecom:PaymentMethodDescription>
</div>
</div>
<div class="large-2 column">
<Ecom:PaymentMethodImage runat="server" RenderSize="False" />
</div>
</div>
</asp:Panel>
</ItemTemplate>
</Ecom:PaymentMethodRepeater>
</div>
Step 3 Modify the code behind
Modify wwwroot\site\cms\templates\b2c\usercontrols\checkout\paymentmethodselection.ascx.cs to allow the drop down box to correctly postback and work inside the update panel.
protected void PaymentOptionsChanged(object sender, EventArgs e)
{
var partPaymentsList = sender as WebControl;
var parent = partPaymentsList.Parent;
while (parent.ID != "PaymentMethodContainer")
{
parent = parent.Parent;
}
var paymentMethodRadioButton = (RadioButton)parent.FindControl("PaymentMethodRadioButton");
var paymentMethodId = paymentMethodRadioButton.Attributes[_paymentMethodId];
ChangePaymentMethod(paymentMethodId);
}
protected void DibsExistPreRender(object sender, EventArgs e)
{
var hasDibsSavedCards = (DibsCtrl.HasSavedCards)sender;
if (hasDibsSavedCards.IsTrue)
{
foreach (Control control in hasDibsSavedCards.Controls)
{
if (control is OnTrueFalseControl.OnTrueFalseTemplateItem)
{
var savedCardsDropDown = (DibsCtrl.SavedCardsDropDownList)control.FindControl("SavedCardsDropDownList");
Control parent = savedCardsDropDown.Parent;
while (!(parent is PaymentMethodRepeaterItem))
{
parent = parent.Parent;
}
if (parent is PaymentMethodRepeaterItem)
{
var paymentMethodId = ((PaymentMethodRepeaterItem)parent).CurrentPaymentMethod.ID;
PaymentInfoCarrier paymentInfoCarrier =
CurrentState.Current.ShoppingCart.OrderCarrier.PaymentInfo.FirstOrDefault();
if (paymentInfoCarrier != null)
{
PaymentMethod selectedPaymentMethod =
ModuleECommerce.Instance.PaymentMethods.Get(paymentInfoCarrier.PaymentMethod,
paymentInfoCarrier.PaymentProvider,
WebControlState.Token);
if (selectedPaymentMethod.ID != paymentMethodId)
{
savedCardsDropDown.Style["display"] = "none";
savedCardsDropDown.Attributes["data-customforms"] = "disabled";
}
var container = (Panel)parent.FindControl("PaymentMethodContainer");
savedCardsDropDown.DataBind();
if (savedCardsDropDown.Items.Count <= 0)
{
container.Style["display"] = "none";
}
else
{
container.Style["display"] = "block";
}
}
}
}
}
}
}
Below is a sample screenshot generated from test code above.
Deleting saved cards
You can remove the saved cards from the user by calling the DibsProvider.RemoveDibsCardInfo() method.
/// <summary>
/// Removes the dibs card information.
/// </summary>
/// <param name="personId">The person identifier.</param>
/// <param name="cardInfo">The card information.</param>
public static void RemoveDibsCardInfo(Guid personId, CardInfo cardInfo)
The CardInfo parameter passed is the databound items of the "SavedCardInfoRepeater" web control.
Obtaining list of saved cards for logged in user
You may get this list of saved cards by calling the api method DibsProvider.GetDibsSavedCreditCardInfo
/// <summary>
/// Gets the dibs saved credit card information.
/// </summary>
/// <param name="personId">The person identifier.</param>
/// <returns></returns>
public static List<CardInfo> GetDibsSavedCreditCardInfo(Guid personId)
Usage:
var savedCards = DibsProvider.GetDibsSavedCreditCardInfo(CurrentState.Current.Token.UserID);
The following code is the SavedCardInfoRepeater control source for reference.
using Litium.Foundation;
using Litium.Foundation.Modules.WebControls;
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Litium.Studio.AddOns.Dibs.WebControls
{
/// <summary>
/// Repeater for Dibs saved credit card info.
/// If datasource is not set, will attempt to databind if the current logged in user can be found.
/// </summary>
public class SavedCardInfoRepeater : TypedRepeater<CardInfo, SavedCardInfoRepeaterItem>
{
//to check whether control is already databound.
private bool _dataBound;
/// <summary>
/// Renders the control to the specified HTML writer.
/// </summary>
/// <param name="writer">The <see cref="T:System.Web.UI.HtmlTextWriter"/> object that receives the control content.</param>
protected override void Render(HtmlTextWriter writer)
{
if (!_dataBound)
DataBind();
base.Render(writer);
}
/// <summary>
/// Databind. If datasource is not set, will attempt to databind for the saved cards of current logged in user..
/// </summary>
public override void DataBind()
{
_dataBound = true;
if (DataSource == null)
{
//obtain the part payment options for current order carrier., if available.
try
{
if (!WebControlState.CMS.CurrentState.Token.IsAnonymousUser)
{
DataSource = DibsProvider.GetDibsSavedCreditCardInfo(WebControlState.CMS.CurrentState.Token.UserID);
}
}
catch (Exception ex)
{
Solution.Instance.Log.CreateLogEntry("Dibs: could not obtain saved card info", ex, Foundation.Log.LogLevels.ERROR);
}
}
base.DataBind();
}
}
/// <summary>
/// Saved Card information repeater item.
/// </summary>
public class SavedCardInfoRepeaterItem : System.Web.UI.WebControls.RepeaterItem, ICardInfoIntroducer
{
/// <summary>
/// Initializes a new instance of the <see cref="SavedCardInfoRepeaterItem"/> class.
/// </summary>
/// <param name="itemIndex">The index of the item in the <see cref="T:System.Web.UI.WebControls.Repeater" /> control from the <see cref="P:System.Web.UI.WebControls.Repeater.Items" /> collection of the control.</param>
/// <param name="itemType">One of the <see cref="T:System.Web.UI.WebControls.ListItemType" /> values.</param>
public SavedCardInfoRepeaterItem(int itemIndex, ListItemType itemType)
: base(itemIndex, itemType)
{
}
/// <summary>
/// Gets the Current CardInfo
/// </summary>
public CardInfo CurrentCardInfo
{
get
{
return (CardInfo)DataItem;
}
}
}
}
Paying by saved card using API (without using the SavedCardsDropDownList web control)
If you wish to use the API directly to pay by a saved card, follow the steps below.
- Obtain the list of saved cards using DibsProvider.GetDibsSavedCreditCardInfo() method and show the list to user, and allow the user to select a saved card.
- When the user has selected a card, add the DibsProvider.DibsVerifyId CheckoutflowInfo value as shown below. For example, following code shows a typical selected index changed event that will be fired when user selects an option, and what you should be doing in that event.
/// <summary>
/// When selected index changed.
/// </summary>
/// <param name="e">A <see cref="T:System.EventArgs"/> that contains the event data.</param>
protected override void OnSelectedIndexChanged(EventArgs e)
{
base.OnSelectedIndexChanged(e);
if (SelectedIndex >= 0)
{
CurrentState.Current.ShoppingCart.CheckoutFlowInfo.SetValue(DibsProvider.DibsVerifyId, SelectedItem.Value);
}
}
- If you have a "Pay using a new card" option, the "Value" of DibsProvider.DibsVerifyId should be zero. Below is an example.
//if paying by new card option is selected.
CurrentState.Current.ShoppingCart.CheckoutFlowInfo.SetValue(DibsProvider.DibsVerifyId, "0");
- You should aslo notify before you call the ExecutePayment method, whether the user has authorized to save the card by setting DibsProvider.SaveCard checkout flow info key to true. Typically, you would show a checkbox to the user to decide whether to save the card or not. Typical CheckedChanged event would look as follows:
/// <summary>
/// Raises the <see cref="E:System.Web.UI.WebControls.CheckBox.CheckedChanged" /> event of the <see cref="T:System.Web.UI.WebControls.CheckBox" /> control. This allows you to handle the event directly.
/// </summary>
/// <param name="e">A <see cref="T:System.EventArgs" /> that contains the event data.</param>
protected override void OnCheckedChanged(EventArgs e)
{
CurrentState.Current.ShoppingCart.CheckoutFlowInfo.SetValue(DibsProvider.SaveCard, Checked.ToString(CultureInfo.InvariantCulture));
base.OnCheckedChanged(e);
}
- You can call the PaymentInfo.ExecutePayment method as usual after above changes. A typical ExecutePayment method in the Checkout page code would look as follows.
private void ExecutePayment(PaymentInfo paymentInfo)
{
try
{
//Flow 1: if you are using an existing saved card, following call is made in your users saved card selection event.
//CurrentState.Current.ShoppingCart.CheckoutFlowInfo.SetValue(DibsProvider.DibsVerifyId, CardInfo.VerifyID);
//Flow 2: if you want a new card saved., following two calls are made in your event handlers.
//CurrentState.Current.ShoppingCart.CheckoutFlowInfo.SetValue(DibsProvider.DibsVerifyId, 0);
//CurrentState.Current.ShoppingCart.CheckoutFlowInfo.SetValue(DibsProvider.SaveCard, true);
ExecutePaymentResult result = paymentInfo.ExecutePayment(CurrentState.Current.ShoppingCart.CheckoutFlowInfo, CurrentState.Current.Token);
//paymentInfo.ExecutePayment() returns here only if it is Flow 1 above.
//if it is flow2, then it will redirect to Dibs site and will come back to Success url or Cancel Url.
if (result != null)
{
if(result is Litium.Studio.AddOns.Dibs.DibsPaymentResult)
{
var dibsResult = (Litium.Studio.AddOns.Dibs.DibsPaymentResult)result;
HandlePaymentResult(result.Success, result.ErrorMessage + ": " + dibsResult.DibsResultCode + " " + dibsResult.DibsReplyText);
}
else
{
HandlePaymentResult(result.Success, result.ErrorMessage);
}
}
}
catch (ShoppingCartItemInvalidException cartInvalid)
{
ErrorPanel.AddAndShowErrorMessages(String.Format("{0}: {1}",
CurrentState.Current.WebSite.Strings[CheckOutStringConstants.StringPaymentUnsuccessful],
Server.HtmlEncode(cartInvalid.Message)));
}
catch (PaymentProviderException ex)
{
ErrorPanel.AddAndShowErrorMessages(String.Format("{0}, {1}: {2}",
CurrentState.Current.WebSite.Strings[CheckOutStringConstants.StringPaymentUnsuccessful],
CurrentState.Current.WebSite.Strings[CheckOutStringConstants.StringExternalMessage],
Server.HtmlEncode(ex.Message)));
ShoppingCartPanel.RebindShoppingCart();
}
catch (ArgumentOutOfRangeException)
{
ErrorPanel.AddAndShowErrorMessages(CurrentState.Current.WebSite.Strings[CheckOutStringConstants.StringPaymentUnsuccessful]);
ShoppingCartPanel.RebindShoppingCart();
}
}
Back to the top