Retail:Developers Guide/How-to/How to add an action in the payment toolbar

Contents 1 Introduction 2 Implementation 2.1 Create a new button 2.2 Create the payment processor 2.3 Create the paid orders loader

Introduction

In the payment toolbar appear usually only the payment types configured in the POS Terminal window. This toolbar can be extended with new buttons and actions that add new elements to the payments table that are not technically payments like on-credit sales, gift cards, bonuses, etc...

These new kind of payment elements must be managed properly in the server side to do the right actions instead of saving a real payment and also must be managed properly in the client side when loading receipts from the server.

This document explains how to implement all these actions.

Implementation

Create a new button

This section explains how to create a new button in the payments toolbar:

This button has been created with the following javascript code:

 
OB.OBPOSPointOfSale.UI.ToolbarPayment.prototype.sideButtons.push({
command: 'PaymentProcessorEmpty',
label: 'Test',
permission: 'org.openbravo.retail.posterminal.PaymentProcessorEmpty',
stateless: false,
action: function (keyboard, txt) {
  var amount = OB.DEC.number(OB.I18N.parseNumber(txt || ''));
  amount = _.isNaN(amount) ? keyboard.receipt.getPending() : amount;
  keyboard.receipt.addPayment(new OB.Model.PaymentLine({
      'kind': 'org.openbravo.retail.posterminal.PaymentProcessorEmpty',
      'name': 'Test',
      'description': 'Description',
      'amount': amount
    }));
  } 
});

Basically this registers a new button definition to the object OB.OBPOSPointOfSale.UI.ToolbarPayment.prototype.sideButtons. This button definition has the following properties.

• command: Is the identifier of the command
• label: The button label.
• permission: Security permission that defines whether the button is active or not.
• stateless: Defines whether the button has an state or not. I it is stateless it cannot receive a keyboard input as a parameter.
• action: the function performed when executed the action.

In this case the payment added by the action has the following properties:

• kind: The payment search key or the java class name that processes this payment. This is explained in the next section.
• name: The label displayed in the payments details
• description: The description displayed in the payments details
• amount: The paid amount.

Create the payment processor

For payments that are not technically payments, you must create a server side java class that processes this payment.

In the payment object the kind property defines the java class name to use. This java class must implement the interface PaymentProcessor. This is an example of a java class that does not do anything. This is the right action for on-credit payment definitions:

 
 ************************************************************************************
 * Copyright (C) 2012 Openbravo S.L.U.
 * Licensed under the Openbravo Commercial License version 1.0
 * You may obtain a copy of the License at http://www.openbravo.com/legal/obcl.html
 * or in the legal folder of this module distribution.
 ************************************************************************************
 */
 
package org.openbravo.retail.posterminal;
 
import java.math.BigDecimal;
 
import org.codehaus.jettison.json.JSONObject;
import org.openbravo.model.common.invoice.Invoice;
import org.openbravo.model.common.order.Order;
 
public class PaymentProcessorEmpty implements PaymentProcessor {
 
  public void process(JSONObject payment, Order order, Invoice invoice, BigDecimal writeoff) {
    // Do nothing
  }
}

Create the paid orders loader

When a paid order is loaded in the POS the model returned by the server side does not contain this kind of payments and must be generated according the information returned. This is done adding a processor that is executed when a paid order is loaded. this processor has the following structure:

 
function paymentProcessor(model) {
  // Adds the payments to the model.
}

And it is registered using the following javascript code:

 
OB.Model.modelLoaders.push(paymentProcessor);

Category: Retail Developers Guide