Documentation Home

Paymetrics Quick Start

Broadleaf Commerces offers an out-of-the-box Paymetrics XiPay solution that requires little configuration and is easily set up.
This implementation should be useful for those with a simple checkout flow.

You must have completed the Paymetrics Environment Setup before continuing

Adding Paymetrics Checkout Support

These instructions assume integration with the default Heat Clinic Demo Site provided with the framework.

  1. In your core applicationContext.xml, replace the block of text
    <!-- Scan DemoSite Sample Payment Gateway Implementation -->
    ...
    <!-- /End DemoSite NullPaymentGateway Config -->

with

    <context:component-scan base-package="com.broadleafcommerce.payment.service.gateway"/>
    <context:component-scan base-package="com.broadleafcommerce.vendor.paymetrics"/>
    <bean class="com.broadleafcommerce.vendor.paymetrics.service.payment.PaymetricsGatewayType"/>

    <bean id="mySampleConfigurationServices" class="org.springframework.beans.factory.config.ListFactoryBean">
        <property name="sourceList">
            <list>
                <ref bean="blaymetricsConfigurationService"/>
            </list>
        </property>
    </bean>
    <bean class="org.broadleafcommerce.common.extensibility.context.merge.LateStageMergeBeanPostProcessor">
        <property name="collectionRef" value="mySampleConfigurationServices"/>
        <property name="targetRef" value="blPaymentGatewayConfigurationServices"/>
    </bean>

    <bean id="blVariableExpressions" class="org.springframework.beans.factory.config.ListFactoryBean">
        <property name="sourceList">
            <list>
                <ref bean="blPaymetricsVariableExpression" />
            </list>
        </property>
    </bean>
  1. On your checkout page, replace your credit card form with the following:
  <blc:transparent_credit_card_form action="" method="post">
      <div id="xipay-form-fields" style="width: 200px; border: solid 1px; clear:both;">
          <script th:src="[[${'https://qaapp02.xisecurenet.com/diecomm/Preloader/EN.ashx?GUID=' + #paymetrics.getGuid()}]]" type="text/javascript" language="javascript"></script>
      </div>
      <script type="text/javascript" language="javascript" th:inline="javascript">
          UpdatePaymentPageContent([[${#paymetrics.generateClientToken()}]]);
      </script>
  </blc:transparent_credit_card_form>

Note - if the html that includes your credit card form (the above code) is loaded over ajax instead of a page load, the XiPay script will not work. This is inherent to XiPay and is not a Broadleaf issue.

  1. (Optional) Override BroadleafPaymetricsController to add custom logic for handling the response from the above form's submission.
@Controller
public class MyPaymetricsController extends BroadleafPaymetricsController {

    @Override
    @RequestMapping(value = "/return", method = RequestMethod.GET)
    public String returnEndpoint(Model model, HttpServletRequest request, RedirectAttributes redirectAttributes, Map<String, String> pathVars) throws PaymentException {

        /*
         * Custom logic
         */

        return super.process(model, request, redirectAttributes);
    }

    @Override
    @RequestMapping(value = "/error", method = RequestMethod.GET)
    public String errorEndpoint(Model model, HttpServletRequest request, RedirectAttributes redirectAttributes, Map<String, String> pathVars) throws PaymentException {

        /*
         * Custom error logic
         */

        redirectAttributes.addAttribute(PAYMENT_PROCESSING_ERROR, request.getParameter(PAYMENT_PROCESSING_ERROR));
        return getOrderReviewRedirect();
    }
}

Note - you do not need to override the Paymetrics controller. It has logic to do all standard handling of transactions and errors. Only do this if you want to customize it.

The process method will decrypt the response and translate it into a form Broadleaf understands, before initiating checkout and performing all other necessary actions. It will return a redirect to the confirmation page.

Done!

At this point, all the configuration should be complete and you are now ready to test your integration with Paymetrics XiPay. Add something to your cart and proceed with checkout.