CommerceSitecore

Sitecore Commerce – Buy now pay smarter

Why pay today when you could pay smarter? Online and offline businesses can offer their customers to pay in instalments. Recently started working for a client who has a chain of physical stores. On the stores, they offer this ability to their customer to pay in instalments using Openpay.

Openpay is an online credit facility for shopping online or in-store, and the interesting part is, it’s always interest-free.

The retail website(atozshopping.com for argument sake) for online shopping is built using Sitecore and Sitecore Commerce(SXC). The customers could only pay through Creditcard and Paypal. We started working with integrating Openpay for online shopping.

This is how the high-level architecture would look like

 

Openpay

 

Benefits:

  1. The customers will have the same experience on atozshopping as they get in a store
  2. There will be a potential increase in sales, as the Openpay customers can buy on atozshopping

Openpay eCommerce Flow: 

The Openpay end to end flow with any retail website looks like

OpenpayFlow

 

Integration Steps:

  1. Create Openpay merchant account
  2. Expose an API on Storefront to Create a new plan. Plan is a ubiquitous term in Openpay world. It indicates the number of instalments etc.
  3. Once we have the PlanId, create a URL to redirect customers to Openpay.
  4. The URL is used to redirect customers to Openpay where they can sign in and lodge the plan
  5. When customers lodge the plan, we redirect them back to the website to capture the amount.
  6. Expose another API to capture the amount. Openpay will call this API after a customer submits the plan.
  7. Once the amount is captured, we finalize the order.

New Plan API:

The new plan API would call an API endpoint in Sitecore commerce to get a create a new plan and it’s PlanId. The Sitecore commerce engine would API would call a command to run CreateOpenPayUrl pipeline. This pipeline has a block to call Openpay and create a plan.

CreatePlanBlock looks like.

Constant.ApiToken is an authentication token we get when we create a merchant account.

The ResponseNewLineOrder looks like

The response we get has a PlanId and TransactionToken. The CreateURLBlock would create a URL

When we get the URL, we set it to an anchor tag(or button) on FE.

OpenpayWidget

When customers click on that ‘Pay with Openpay’ link, it takes them to Openpay site. In Openpay,

  1. Customers login
  2. Choose a plan(4month or 6month etc)
  3. Submit Plan

Once this plan is submitted, the users get redirected back to our retail website. We specified the redirect uri(CallbackUrl) as part of the first call.

When customers land back on our website(hit our mvc endpoint), we call Commerce Engine to finalize the order. The customers are redirected to the order confirmation page. In case of an error, we redirect customers back to the payment page where they see the error message. We display a generic error to the customers, “We were unable to process Openpay transaction, please select any other payment option to proceed or retry later”.

OpenpayCommerceFlow

 

Capture Amount API: This API is used to receive a response from Openpay when customers submit and complete a plan in Openpay. The API looks like

Just like CreateURLCommand and Pipelines we will have

  1. A Command to capture the amount
  2. The command will call a pipeline
  3. The pipeline has a block which calls Openpay to capture the payment.

 

CapturePaymentBlock looks like

Happy Coding!

Technical and Business considerations: There are few considerations, keep them in mind while going for Openpay

  1. Openpay has a transaction limit of 15,000 dollars.
  2. Openpay at the moment only provides a full redirect integration option. There is not a lightbox(modal) experience.

Leave a Reply

Your email address will not be published. Required fields are marked *