Salesforce – Openpay Payment Plugin

Integration Guide

Audience

This document is for technical personal assigned to integrate Openpay into an existing Commerce Cloud shop solution.

Overview

This document describes the technical integration of Openpay link cartridge.

Openpay is a next generation payment solution that allows customers to buy now and pay over a flexible timeframe without interest, giving them added cash flow confidence. Creating a seamless omni channel experience (in-store, online and through our app), we service several brands across multiple industries including retail, healthcare, automotive and home improvement.

We offer our customers convenient terms, and our merchants the opportunity to increase their incremental sales with a higher ATV.

Our customers are empowered to live their best life; with more choice, time and flexibility.

The Openpay link cartridge features include:

  1. Openpay payment method – Storefront and widget configurations fulfilled natively within SFCC Business Manager, designed for Salesforce Commerce Cloud API version 16.2 or higher, based on SiteGenesis 2.
  2. Category page widget – Highly configurable, display a personalised promotional message or installments and plan duration based on a set minimum and maximum product value which is visible upon hover-over state.
  3. Product Page Widget – Highly configurable, merchandise take home price or simple text based promotional message based on a set minimum and maximum product value.
  4. Pop-up Widget – Upload a bespoke logo and banner image, in addition create your unique headline and terms via a pop-up lightbox banner.
  5. Checkout Widget – Merchandise one or two Openpay installment options upon selection of Openpay payment method.
  6. Accelerator Widget – Create a unique message to display in the mini-cart should the Openpay minimum spend value not be fulfilled.
  7. Transaction management – View an order, order status or process full or partial refunds natively using Openpay order level transaction management within SFCC Business Manager.
  8. All features are optimised to mobile breakpoint.
  9. All features customisable to inherit the font family, colour and size of the website.
  10. All features can be enabled/disabled at a product, category and store level.

Compatibility

Designed for Commerce Cloud API version 16.2 or higher, based on SiteGenesis 2.

Integration Components

Components

Openpay integration has the following cartridge:

  • int_openpay_controllers – This cartridge has controllers necessary for integration on SiteGenesis Site. The files can be changed to meet customers’ requirements.
  • int_openpay_pipelines – This cartridge has pipelines necessary for integration on SiteGenesis Site. The files can be changed to meet customers’ requirements.
  • int_openpay_core – This cartridge has core files and scripts necessary for integration on SiteGenesis Site. The files can be changed to meet customers’ requirements.
  • Int_openpay_sfra – This cartridge is the openpay integration cartridge for Store Front Reference Architecture Sites
  • bm_openpay – Business Manager extension cartridge for transaction management, for both SiteGenesis and SFRA sites.

Get PlanID

To begin the checkout of a customer that chooses Openpay payment method on your website, a POST request must be submitted to request a PlanID. This happens when the order is placed after the summary page.  The request contains the orders total price and an auth token issued by Openpay. The response to this request provides a unique PlanID that is saved to the order object as a custom attribute.

Prepare Redirect

Once a PlanID is received a handover URL is composed that is used for redirection to Openpay. It contains all relevant information like return URL, cancel URL, customer and order information beside the PlanID.

Business Manager Configurations

For the Openpay integration to work, the following needs to be configured in the Business manager.

Import System Objects

Go to Menu > Administration > Site Development > Import & Export. Upload and import the meta file system-objects.xml which is available in metadata folder of the cartridge bundle. On successful import of this meta file you will be new site preference groups and fields are detailed below.

Custom Site Preferences

Group ID: Openpay General Config

  • Is Openpay Enabled (isOpenpayEnabled – Boolean) – To enable or disable Openpay widgets in a single point
  • Merchant ID (openpayMerchantID – String) – API Merchant ID that is received from Openpay while merchant register account in Openpay
  • Openpay Auth Token (openpayJamAuthToken – String) – API Authorization Token that merchant receives from Openpay
  • Openpay Handover URL (openpayHandoverURL – String) – Redirection end point to Openpay
  • Plan Duration (openpayPlanDuration – Enum of Strings) – Plan duration settings which merchant offers to customers
  • Widget Minimum Price (openpayMinPrice – Number) – Minimum purchase value to apply Openpay widget
  • Widget Maximum Price (openpayMaxPrice – Number) – Maximum purchase value to apply Openpay widget
  • Widget Style (openpayWidgetStyle – String) – Inline CSS style that need to be applied on widgets
  • Choose Logo (openpayLogoType – Enum of Strings) – Preset logo styles that Merchant can choose according to storefront theme
  • Storefront Controller Cartridge Name (openpayControllerCartridge – String) – Site Genesis default controller cartridge name to take the common controller code from
  • Storefront Core Cartridge Name (openpayCoreCartridge – String) – Site Genesis default core cartridge name that custom cartridge can take core files from
  • User Agent (openpayUserAgent – String) – User Agent for service call – Sample value: Openpay SFRA Cartridge/1.0.0 (Salesforce Commerce Cloud/1.0.0: Merchant/ 30000000000001183|abfea8e7-9c15-4889-bc44-0df8a05ad73c)
  • Service ID (openpayServiceID – String) – Service ID as in Business Manager Menu > Administration > Operations >  Services for the site

Group ID: Openpay Category  Config

  • Show Category Page Widget (isOpenpayShowOncategory – Boolean) – To enable or disable widget on category landing page
  • Show Product Widget (isOpenpayShowOnproduct – Boolean) – To enable or disable widget on product details page
  • Category widget format (categoryOpenpayWidgetFormat – Enum of Strings) – Preset widget formats that Merchant can choose for category landing page that suits for storefront theme
  • Category Tag Message (Promotion) (categoryOpenpayTagMessage – String) – Promotional text content of widgets on category landing page
  • Product widget format (productOpenpayWidgetFormat – Enum of Strings) – Preset widget formats that Merchant can choose for product details page that suits for storefront theme
  • Product Tag Message (Promotion) (productOpenpayTagMessage – String) – Promotional text content of widgets on product details page
  • Widget Text (Promotion) (openpayWidgetTextType2 – String) – Additional promotional messages on widgets
  • Widget Text (No. of payment and amount) (openpayWidgetTextType1 – String) – Promotional text on widget to hold number of payments and amount
  • Information link type (openpayInfoLink – Enum of Strings) – Text of the link for showing popup content on product details page widget
  • Hyperlink Style (openpayBrandLink – String) – Inline CSS style for the info link

Group ID: Openpay Checkout Config

  • Show Checkout Widget (isOpenpayShowOncheckout – Boolean) – To enable or disable widget on payment form
  • Checkout Widget Text(No. of payment and amount) (checkoutWidgetText – String) – Promotional text on checkout widget
  • Checkout widget format (checkoutOpenpayWidgetFormat – Enum of Strings) – Preset widget formats that Merchant can choose according to storefront theme
  • Checkout Widget Style (openpayCheckoutWidgetStyle – String) – Inline CSS style for customizing widget
  • Select Two Plans (openPaySelectTwoPlans – List of Strings) – Controls the plans on widget
  • Style from Openpay Button (openpayButtonStyle – String) – Inline CSS style for customizing button on widget
  • Background Color from Openpay Button when you mouseover it (openpayButtonHoverBackgroundColor – String) – HTML color code for mouse hover effect on button
  • Text from Openpay Button (openpayButtonText – String) – Caption on widget button
  • Show Accelerator Widget (isOpenpayShowOnminicart – Boolean) – To enable or disable widget on Minicart
  • Accelerator Text (openpayAcceleratorText – String) – Promotional text on minicart widget

Group ID: Openpay Popup Config

  • Openpay Pop-Up Background Color (openpayPopUpBackgroundColor – String) – HTML color code for setting background for popup content on product details page
  • Openpay Tagline (openpayTagline – String) – Tagline on popup content
  • Openpay Pop-Up Opacity (openpayPopUpOpacity – String) – Background opacity of Popup
  • Openpay Price Range Box (openpayPriceRangeBox – String) – Text content to show on price range box of popup content
  • Openpay Pop Up Picture (openpayPopUpPicture – Image) – Theme image to set as header background of popup content

Please ask your Openpay account manager for your Live credentials.

Test credentials can be found under Testing section.

Open Group Openpay Checkout Configuration and find the field Select Two Plans (openPaySelectTwoPlans). Set two values, for example, 2 and 3.

Order custom attributes

  • Openpay Plan ID (openpayPlanID – String)
  • Online Order Status (openpayOrderStatus – String)
  • Openpay Payment Method (openpayIsOpOrder – Boolean)
  • Online Plan Status (openpayPlanStatus – String)
  • Openpay Refund History (openpayRefundHistory – text)

Category custom attributes

  • setCategoryOpenpayflag – Enum of Strings

Product custom attributes

  • Show Openpay widget (showOpenpayWidget – Boolean)

Payment Methods and Payment Processor

In Business Manager section <your-site> Merchant Tools > Ordering > Payment Processors create (click new button) a new Payment Processor named ‘OPENPAY’. In section Ordering > Payment Methods create a new payment method by clicking ‘New’ button, set ID as OPENPAY, name it Openpay – Buy now. Pay smarter. and set the payment processor you created before.

(Alternatively, you can upload and import payment method meta file, metadata/payment-method.xml, which is available in the cartridge bundle, in BM Ordering > Import/Export > Import & Export > Payment Methods. Import does NOT contain the payment processor. It has to be created.)

 

Openpay utlizes Commerce Cloud’s default configurations of payment method to restrict payments based on minimum and maximum ranges, countries or currencies.

Please refer Merchandizing your site > Ordering > Managing credit/debit cards in Commerce Cloud’s documentation portal to learn how to configure min/max ranges, countries and currencies restrictions on payments done via Openpay.

HTTP Services

To configure necessary service in Business Manager Section > Administration > Operations > Import & Export first upload and then import (Service Import) file metadata/services.xml.

Import Content Assets

If your site uses a shared library then edit the metadata/content-assets.xml file in cartridge bundle, to change the line

<library xmlns=”http://www.demandware.com/xml/impex/library/2006-10-31″>

to

<library xmlns=”http://www.demandware.com/xml/impex/library/2006-10-31″  library-id=”Site’sSharedLibraryID”>

Go to Merchant Tools > Content > Import & Export: Import and Export Files, then click on Upload button and upload metadata/content-assets.xml file.

Go to Merchant Tools > Content > Import & Export: Libraries, then click on Import button and import the uploaded content-assets.xml file.

Upload Content Images

 Go to Merchant Tools > Content > Import & Export: Content Image Upload, then click on Upload button.

On the Content Image page go to section titled as ‘Directories’, under library’s directory structure, create new directory namely ‘openpay’ under library > images directory. Select the ‘openpay’ directory and upload all images from metadata/images/openpay folder in cartridge bundle.

Scheduled Jobs

Go to Administration > Operations > Import & Export: Import & Export Files, then click on Upload button.

Click on the Upload File browser field and upload metadata/jobs.xml. Go to Administration > Operations > Import & Export: Jobs and click on Import button. From the file list, select the radio button that corresponds to jobs.xml and press next button. After validating the file, continue import pressing Next button.

 Go to Administration > Operations > Jobs and open newly added job – Openpay-Update-OrderStatus and open Job Steps. Two Job Steps are set by default, one for SFRA based sites and the other for SGJC based sites. Remove unwanted Job Step and choose relevant sites in required flow.

Job Step Parameter:

  • paymentDelayMinutes: This determines the time delay based on which the job must skip new orders, to provide the customer enough time to finish the payment. This value is in Minutes.

Integration to Sitegenesis

Integration may vary based on the SiteGenesis application version. SiteGenesis version 13.1 is used to demonstrate Openpay integration.

Openpay will be offered as another payment method for the shopper to be selected on the Billing Page.

When the shopper selects to Continue, they will be redirected to the Openpay site shopper is identified and . If the shopper selects to Cancel the transaction, they will be returned back to the Billing page. Upon return to Commerce Cloud the shopper will be presented with the Order receipt page with their order number.

 

In both cases, the cartridge can first be downloaded from Commerce Cloud’s Xchange marketplace: https://xchange.Commerce Cloud.com/community/marketplace

Once downloaded, please import the cartridge into your UX studio. Please refer following article on how to install UX studio: Getting started > Installing or updating UX studio in Commerce Cloud’s documentation portal.

Please refer to following articles if you need assistance with how to connect UX studio with your sandbox and registering (installing) cartridge to sandbox:

  • Getting started > connection to a server > in Commerce Cloud’s documentation portal.
  • Getting started > Registering your cartridge > in Commerce Cloud’s documentation portal.

To integrate Openpay into SiteGenesis a few changes have to be made depending on whether Javascript controllers or Pipelines are being used.

Javascript Controllers – How to integrate Openpay redirect based payment into SFCC checkout process

In file <default Site Genesis controllers cartridge>/cartridge/scripts/hooks.json add a new hook definition for Openpay processor script by adding

{

                                                “name”:”app.payment.processor.OPENPAY”,

                                                “script”:”./payment/processor/OPENPAY”

                                }

into the ‘hook’ array of the json.

Move OPENPAY.js  from folder int_openpay_controllers/reference/scripts/payment/processor/ to folder <default Site Genesis controllers cartridge>/cartridge/scripts/payment/processor/.

In SiteGenesis controller COPlaceOrder.js (<default Site Genesis controllers cartridge >/cartridge/controllers/COPlaceOrder.js) in function start() at around line 175 after the call of function handlePayments(order) add another “else if” branch to the response handling.

 

else if (handlePaymentsResult.redirected) {

        return Transaction.wrap(function () {

            return {

                error: false

            };

        });

    }

In the same file, in function handlePayments(order) at around line 71 after the call of function handlePayments(order) add another “else if” branch to return a response indicating a redirect to openpay.

 

else if (authorizationResult.redirected) {

                    return {

                        redirected: true

                    };

                }

For promotional widget at billing page

In < default Site Genesis core cartridge>/cartridge/templates/default/checkout/billing/paymentmethods.isml make following changes

  • Before code which displays payment method radio buttons, paste the following script:

<isscript>

                             var showOpenpay = dw.system.Site.current.getCustomPreferenceValue(‘isOpenpayEnabled’);

                             var openpayMinPrice = dw.system.Site.current.getCustomPreferenceValue(‘openpayMinPrice’);

                             var openpayMaxPrice = dw.system.Site.current.getCustomPreferenceValue(‘openpayMaxPrice’);

                             var basketObject = dw.order.BasketMgr.getCurrentBasket();

                             var totalPrice = Number(basketObject.totalGrossPrice);

                            

                             if(showOpenpay){

                                           if(!empty(openpayMinPrice)){

                                                          openpayMinPrice = parseFloat(openpayMinPrice, 10);

                                                         

                                                          if(openpayMinPrice > totalPrice){

                                                                        showOpenpay = false;

                                                          }

                                                         

                                                          if(!empty(openpayMaxPrice)){

                                                                        openpayMaxPrice = parseFloat(openpayMaxPrice, 10);

                                                                       

                                                                        if(openpayMaxPrice > openpayMinPrice && openpayMaxPrice < totalPrice){

                                                                                      showOpenpay = false;

                                                                        }

                                                          }

                                           }

                                           else if(!empty(openpayMaxPrice)){

                                                          openpayMaxPrice = parseFloat(openpayMaxPrice, 10);

                                                         

                                                          if(openpayMaxPrice < totalPrice){

                                                                        showOpenpay = false;

                                                          }

                                           }

                             }

                             </isscript>

  • Inside the loop which displays payment method radio buttons, keep the following code snippet:

<iscomment>Ignore OPENPAY method if it is not supposed to be displayed</iscomment>

                                                          <isif condition=“${!(paymentMethodType.value.toLowerCase().equals(‘openpay’) && showOpenpay)}”><iscontinue/></isif>

  • After <iscomment>

Custom processor

————————————————-

</iscomment>

add the below mentioned code snippet :

<div class=”payment-method <isif condition=”${!empty(pdict.selectedPaymentID) && pdict.selectedPaymentID==’OPENPAY’}”>payment-method-expanded</isif>” data-method=”OPENPAY“>

<iscomment>Openpay</iscomment>

<isinclude template=”util/modulesopenpay”/>

<div class=”checkout-logo”>

<iscontentasset aid=”${‘openpay’+dw.system.Site.getCurrent().getCustomPreferenceValue(‘openpayLogoType’).value}” />

</div>

<isdisplayopenpayatcheckout context=”checkout” issfra=”${false}” totalprice=”${pdict.OrderTotal}” />

</div>

  • In < default Site Genesis core cartridge>/cartridge/templates/default/checkout/pt_checkout.isml, after the line <isinclude template=”checkout/pt_checkout_UI”/> add below mentioned code :

<link rel=”stylesheet” href=”${URLUtils.staticURL(‘/css/openpaystyle.css’)}” />

For promotional widget at mini cart for cart values lesser than minimum allowed values

  • In <default Site Genesis core cartridge>/cartridge/templates/default/checkout/cart/minicart.isml , after the anchor tag with class “mini-cart-link-checkout” add the below mentioned code :

<iscomment>Openpay</iscomment>

                                           <isinclude template=”util/modulesopenpay”/>

                                           <isdisplayacceleratorwidget context=”minicart” issfra=”${false}” totalprice=”${pdict.Basket.getAdjustedMerchandizeTotalPrice(false).add(pdict.Basket.giftCertificateTotalPrice)}”/>

For promotional widget product detail page

In <default Site Genesis core cartridge>/cartridge/templates/default/product/components/pricing.isml, just before the isif condition <isif condition=”${!empty(pdict.OrgProduct)}”> , place the below mentioned code :

<iscomment>Openpay</iscomment>

                             <isinclude template=”util/modulesopenpay”/>

                             <isdisplayopenpaymessage context=”product” issfra=”${false}” productid=”${pdict.Product.ID}” productprice=”${(SalesPrice ? SalesPrice : StandardPrice)}”/>

For promotional widget category landing page

  • In <default Site Genesis core cartridge>/cartridge/templates/default/product/producttile.isml, just before <iscomment>Promotion</iscomment> ,place the below mentioned code :<iscomment>Openpay</iscomment>

               <isinclude template=”util/modulesopenpay”/>

               <isdisplayopenpaymessage context=”${‘category’}” issfra=”${false}” productid=”${Product.ID}” productprice=”${(prices[prices.length-2].value)}”/>

  • In <default Site Genesis core cartridge>/cartridge/templates/default/product/pt_productdetails.isml, after the line <link rel=”canonical” href=”${URLUtils.url(‘Product-Show’,’pid’, pdict.Product.ID)}”/> add the below mentioned code :

<link rel=”stylesheet” href=”${URLUtils.staticURL(‘/css/openpaystyle.css’)}” />

  • In <default Site Genesis core cartridge>/cartridge/templates/default/search/pt_productsearchresult.isml, inside the head tag add the below mentioned code :

<iscomment>Add  template-specific header information here.</iscomment>

<link rel=”stylesheet” href=”${URLUtils.staticURL(‘/css/openpaystyle.css’)}” />

  • In <default Site Genesis core cartridge>/cartridge/js/app.js, after the method $(‘.privacy-policy’).on(‘click’, function (e) {, add the below mentioned code :

$(‘.openpay-overview’).on(‘click’, function (e) {

        e.preventDefault();

        dialog.open({

            url: $(e.target).attr(‘href’),

            options: {

                           }

        });

    });

Integration on SFRA Storefront

Below integration steps will give you access to following features that can be controlled by configurations mentioned in section 2.2.

  • Promotional widget on category landing page
  • Promotional widget on product details page
  • Promotional widget on mini cart encouraging customers to shop more to avail Openpay’s buy now pay later feature
  • Promotional widget on Checkout-Billing page
  • Checkout integration with Openpay that provides Openpay as a payment option in billing page and a redirect-based solution that helps customers to choose and transact with easy plans of Openpay.

Upload cartridge

Upload int_openpay_sfra and bm_openpay cartridges to your active code version in SFCC instance using UX Studio (Eclipse).

 

Login to SFCC instance and open following page:

Administration >  Sites >  Manage Sites > {Your SFRA Site} – Settings

Inside the input box which is labelled as ‘Cartridges:’ prepend the cartridge name int_openpay_sfra separated by a colon (:)

In the same way, open the following page:

Administration >  Sites >  Manage Sites > Business Manager – Settings

Prepend the cartridge name bm_openpay in the input box which is labelled as ‘Cartridges:

Following changes need to be made on your custom storefront cartridge from which you build SCSS and client side JS files:

– File: {custom storefront cartridge}/cartridge/client/default/js/checkout/checkout.js

On the global variable declaration section, add the following line

var openpayCheckout = require(‘./openpayCheckout’);

(You can copy the above path if the cartridges int_openpay_sfra and custom storefront cartridge are inside the same folder. Else path of the required file is to be changed as per the relative path in your file system.)

In the same file add the following line segment inside any section where plugins are getting initialized.

// Openpay

openpayCheckout.init();

(For example, include the above lines after the following existing code

              members.initialize();

)

File: {custom storefront cartridge}/cartridge/client/default/js/components/miniCart.js

On the global variable declaration section, add the following line

var openpayMiniCart = require(‘./openpayMiniCart’);

(You can copy the above path if the cartridges int_openpay_sfra and custom storefront cartridge are inside the same folder. Else path of the required file is to be changed as per the relative path in your file system.)

Find the function definition as module.exports = function () { and at the beginning add the following lines

// openpay

openpayMiniCart.init();

Find the mouseenter event handing function $(‘.minicart’).on(‘mouseenter focusin touchstart’, function () { find the ajax call in it starting with $.get(url, function (data) {. Find code $.spinner().stop(); and keep the following code below it.

// Openpay

openpayMiniCart.show(url);

File: {custom storefront cartridge}/cartridge/client/default/js/cart/cart.js

On the global variable declaration section, add the following line

var openpayMiniCart = require(‘../components/openpayMiniCart’);

Find the ajax call inside the method “$(‘body’).on(‘change’, ‘.quantity-form > .quantity’, function () {“

and add the below mentioned code after “validateBasket(data);”

openpayMiniCart.init();

File: {custom storefront cartridge}/cartridge/client/default/js/checkout/billing.js

Inside the method “updateBillingInformation”, replace “updateBillingAddressFormValues(order);” with

updateBillingAddressFormValues(order, customer);

Update the parameters list of “function updateBillingAddressFormValues(order) {“ with

updateBillingAddressFormValues(order, customer) {

Inside the method “updateBillingAddressFormValues”, after the condition “if (!billing.billingAddress || !billing.billingAddress.address) return;” add the below mentioned code:

var email = order.orderEmail ? order.orderEmail : ”;

    if(customer.registeredUser){

               email = customer.profile.email;

    }

And replace “$(‘input[name$=_email]’, form).val(order.orderEmail);” with 

“$(‘input[name$=_email]’, form).val(email);”

File: {custom storefront cartridge}/cartridge/client/default/js/product/base.js

On the global variable declaration section, add the following line

var openpayContent = require(‘./openpayContent’);

(You can copy the above path if the cartridges int_openpay_sfra and custom storefront cartridge are inside the same folder. Else path of the required file is to be changed as per the relative path in your file system.)

In the same file find the module.exports = { section, find addToCart: function () { function definition. Inside it after all the event definitions, add the following lines

// Openpay

openpayContent.init();

File: {custom storefront cartridge}/cartridge/client/default/scss/global.scss

Add the following line at the end of other @import section

@import “openpaystyle.css”;

(You can copy the above path if the cartridges int_openpay_sfra and custom storefront cartridge are inside the same folder. Else path of the imported file is to be changed as per the relative path in your file system.)

– After making above mentioned changes on client side JS and SCSS files, build them.

– int_openpay_sfra has already built files (int_openpay_sfra/cartridge/static/) that were built from base cartridge which can be removed if custom storefront cartridge has its own path of built files.

Following files are overriding templates on top your storefront custom cartridge. Actual custom changes in those files are mentioned below, so you can reuse your customized storefront templates with following custom changes in it.

Template 1: int_openpay_sfra/cartridge/templates/default/product/productDetails.isml

<iscomment>Openpay</iscomment>

<isset name=“openpayAppliedPrice” value=“${product.price.type == ‘range’ ? product.price.min.sales.decimalPrice : (product.price.type == ‘tiered’ ? product.price.startingFromPrice.sales.decimalPrice : product.price.sales.decimalPrice)}” scope=“page” />

<isinclude template=“util/modulesopenpay”/>

<isdisplayopenpaymessage context=“${‘product’}” productid=“${product.id}” productprice=“${openpayAppliedPrice}”/>

Template 2: int_openpay_sfra/cartridge/templates/default/product/productTile.isml

<iscomment>Openpay</iscomment>

<isset name=“openpayAppliedPrice” value=“${product.price.type == ‘range’ ? product.price.min.sales.decimalPrice : (product.price.type == ‘tiered’ ? product.price.startingFromPrice.sales.decimalPrice : product.price.sales.decimalPrice)}” scope=“page” />

<isinclude template=“util/modulesopenpay”/>

<input type=“hidden” class=“openpay-widget-plp” value=“${URLUtils.https(‘OpenpayContent-Show’)}”>

<isdisplayopenpaymessage context=“${‘product’}” productid=“${product.id}” productprice=“${openpayAppliedPrice}”/>

Template 3: int_openpay_sfra/cartridge/templates/default/checkout/cart/miniCart.isml

<iscomment>Openpay</iscomment>

              <isinclude template=“util/modulesopenpay”/>

              <isdisplayacceleratorwidget context=“minicart” issfra=“${true}” totalprice=“${pdict.totals.subTotal}”/>

Template 4: int_openpay_sfra/cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsSummary.isml

Add iselse condition for the if condition <isif condition=“${payment.paymentMethod === ‘CREDIT_CARD’}”>

<iselse>

             <isprint value=”${payment.paymentMethod}” />

Template 5: int_openpay_sfra/cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsContent.isml

Add iselse condition for the if condition <isif condition=“${paymentOption.ID === ‘CREDIT_CARD’}”>

<iselse>

               <iselse>

                             <div class=“tab-pane ${paymentOption.ID.toLowerCase() + ‘-content’}” id=“${paymentOption.ID.toLowerCase() + ‘-content’}” role=“tabpanel”>

                            <isif condition=“${paymentOption.ID.toLowerCase() === ‘openpay’}”>

                                           <isinclude template=“util/displayopenpayatcheckout” />

                      </isif>

                        </div>

Template 6: int_openpay_sfra/cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsTabs.isml

Add below mentioned code in top of the isml :

<isscript>

var showOpenpay = dw.system.Site.current.getCustomPreferenceValue(‘isOpenpayEnabled’);

var openpayMinPrice = dw.system.Site.current.getCustomPreferenceValue(‘openpayMinPrice’);

var openpayMaxPrice = dw.system.Site.current.getCustomPreferenceValue(‘openpayMaxPrice’);

var orderTotal = pdict.order.totals.grandTotal;

var totalPrice = Number(orderTotal.replace(/[^0-9.-]+/g,”));

if(showOpenpay){

              if(!empty(openpayMinPrice)){

                            openpayMinPrice = parseFloat(openpayMinPrice, 10);                           

                             if(openpayMinPrice > totalPrice){

                                           showOpenpay = false;

                             }                           

                             if(!empty(openpayMaxPrice)){

                                           openpayMaxPrice = parseFloat(openpayMaxPrice, 10);

                                           if(openpayMaxPrice > openpayMinPrice && openpayMaxPrice < totalPrice){

                                                          showOpenpay = false;

                                           }

                             }

              }

              else if(!empty(openpayMaxPrice)){

                             openpayMaxPrice = parseFloat(openpayMaxPrice, 10);                            

                             if(openpayMaxPrice < totalPrice){

                                           showOpenpay = false;

                             }

              }

}

</isscript>

And for the if condition <isif condition=“${paymentOption.ID === ‘CREDIT_CARD’}”>, add the below mentioned iselse condition :

<iselseif condition=“${paymentOption.ID.toLowerCase() != ‘openpay’ || (paymentOption.ID.toLowerCase() == ‘openpay’ && showOpenpay)}”>

              <li class=“nav-item” data-method-id=“${paymentOption.ID}”>

                             <a class=“nav-link ${paymentOption.ID.toLowerCase() + ‘-tab’}” data-toggle=“tab” href=“${‘#’ + paymentOption.ID.toLowerCase() + ‘-content’}” role=“tab”>

                                           <isprint value=“${paymentOption.name}” />

                             </a>

               </li>

Template 7:

int_openpay_sfra/cartridge/templates/default/checkout/checkout.isml

Add the below mentioned code snippet before the button <button class=“btn btn-primary btn-block place-order”

<input type=“hidden” class=“openpay-isopenpayURL”      value=“${URLUtils.https(‘OpenpayCheckout-IsOpenpay’)}”>

<input type=“hidden” class=“openpay-redirectURL”      value=“${URLUtils.https(‘OpenpayCheckout-Redirect’)}”>

Activating the Business Manager Refund Extension

For the Openpay integration to work, the following needs to be configured in the Business manager.

  • Upload the cartridge bm_openpay into server.
  • Go to Demandware > Administration > Manage Sites > Business Manager > Settings > Cartridges input field add cartridge name “bm_openpay”.
  • Administration > Organization > Roles > Administrator > Business Manager Modules> Select context (select your site ) > enable the Openpay transactions management .
  • Merchant Tools > Openpay > Transactions Management > Click on the “APPROVED “ order ID for which you want to refund the transaction.

Testing

This section provides the credentials for test user and test merchant account on Openpay Training Environment to create and check your Openpay plan.

Test Jam Token

30000000000001183|abfea8e7-9c15-4889-bc44-0df8a05ad73c

Test User

Username: AppTestUser@xx.yy
Password: Test123

Test Merchant / Retailers Account

https://retailer.myopenpay.com.au/training
Username: adminmag
Password: Test123

Checkout Data Flow

Once the cartridge is installed and integrated based on instructions, please try to place an order on your sandbox to test the functionality.

  • On billing page, you should see following option of Openpay:

  • After you click on Place order on Order summary page then you should be redirected to Openpay website for choosing the right premium. If you are not registered then you will be asked for creating an account otherwise you see the following login page:

Once you login then you will be prompted to choose the premium and fill/verify your billing address:

  • Once you click on Commit then you will be automatically redirected to Commerce Cloud storefront confirmation page like one below:

Category Landing Widget

To enable the Category Landing Page Widget, do the following configuration changes

  1. Go to Business Manager > Merchant Tools > Site Preferences > Custom Preferences. Open Group – Openpay Category and Product Configuration and set the field ‘Show Category Page Widget (isOpenpayShowOncategory)’ to Yes.
  2. Go to Business Manager > Merchant Tools > Products and Catalogs > Catalogs. Open Site Catalog and navigate to category (on which you need to show the widget on storefront) and edit it. Click on ‘Category Attributes’ and scroll down to reach section titled ‘Custom’. Find attribute ‘setCategoryOpenpayflag’ and choose the value on drop down as ‘Entire Category’ (Or ‘Selected Products’). Apply the change to save.

Product details page widget

Product details page Popup content

Minicart widget

Checkout widget

To refund the transaction: Go to > Merchant Tools > Openpay > Transactions Management > click on  the order Id from the list of orders which has to be refunded > Enter the amount to be refunded and click on ‘Refund’

Download

SFCC cartridge can be downloaded from here:

openpay-LINK-integration

Version Control Table

# Date Version Description
1 02-Jul-2019    19.2.0 Added new scheduled job to regularly update OnlineOrderstatus
2 25-Jun-2019      19.1.1         
  • Email ID is mandatory on Guest Checkout
  • SFRA Cartridge is compatible with latest SFRA base cartridge
3 21-Mar-2019

19.1.0

 

  • Product List / Category Page Widget
  • Product Details Page Widget
  • Product Details Page info pop up
  • Mini-cart Dropdown Accelerator Widget
  • Checkout Page Widget
  • SFRA Cartridge