EPGJS examples

Merchants have many and different needs, thats why epgjs api is so open to modifications allowing them to customize not only the appearance but even the flow behavior.

Customization examples

Rendering a basic cashier

For those who want to delegate epgjs api to render a form and all its actions, some configuration needs to be done in order to tell the api where it needs to request info, what it needs to draw, etc.

EPGJS_COMM.setEpgBaseUrl(“https://epgjs-web-stg.easypaymentgateway.com/”);
EPGJS_STYLE.setCssTheme(EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME);
EPGJS_COMM.setMerchantPrePayCallback(prePayCallback)
EPGJS.renderCashier(authToken, 'epgjs-cashier-div');

This simple configuration will render a fully functional cashier. Lets explain the code lines purposes.

First we configure the epgjs communication object that will be used by the epgjs render object. With the first line of code epgjs is told to use a specific service url (web service url) to perform register/disable accounts and prepay operations.

Second line of code will set epgjs css theme that the cashier will use, this theme will set the cashiers styles classes that will be created by the merchant in a separated file.

In the third line we are setting a callback for the prepay operation. Prepay operation is done before charge operation and will return a single use prepayToken that needs to be sent to merchants backend to call the charge operation. That’s why we need to set a prepay callback that will call to the merchants backend to perform the charge operation.

Finally we use the epgjs render object to render the whole cashier telling the api where do we want to render the cashier, in this case it will be drawn in ‘epgjs-cashier-div’

Render cashier to register creditcards

The next epgjs configuration will only show a creditcard registration form giving the control to the merchant to perform some operations on a success card registration case:

EPGJS_COMM.setEpgBaseUrl(“https://epgjs-web-stg.easypaymentgateway.com/”);
EPGJS_STYLE.setCssTheme(EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME);
EPGJS_COMM.setShowOnlyCardRegister(true);
EPGJS_COMM.setOnlyRegisteredAccounts(false);
EPGJS_COMM.setMerchantRegisterAccountCallback(registerAccountCallback);
EPGJS.renderCashier(authToken, 'epgjs-cashier-div');

Like in previous example, the base url to perform several operations (register, disable, prepay) needs to be setted, default theme as well.
Show only card registration is setted to true meanwhile setting registration account to false.
Also a new configuration is added, adding extra behaviour to be executed after account registration.
After that, again the cashier is rendered inside the provided div, in this case ‘epgjs-cashier-div’.

Render cashier only showing registered accounts

If only showing the actual customer accounts is the only need, is possible to be done with the next configuration:


EPGJS_COMM.setEpgBaseUrl(web); 
EPGJS_STYLE.setCssTheme(EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME); 
EPGJS_COMM.setMerchantPrePayCallback(prePayCallback); 
EPGJS_COMM.setOnlyRegisteredAccounts(true); 
EPGJS_COMM.setShowOnlyCardRegister(false); 
EPGJS.renderCashier(authToken, 'epgjs-cashier-div'); 

The only difference between previous examples is to set the flag to show only the registered accounts to true.

Render cashier for anonymous customers

This configuration is specially useful for those business that they don’t keep track of their customers (ecom business), so a random customer would be created. For this specific configuration, no authToken is needed but a merchantPublicKey. This would render a specific payment solution form that would act exactly the same way as the normal form but for anonymous users.

The way to configure this anonymous cashier would be the next:


EPGJS_COMM.setEpgBaseUrl(web);
EPGJS_STYLE.setCssTheme(EPGJS_STYLE.DEFAULT_BOOTSTRAP_THEME);
EPGJS_COMM.setMerchantPrePayCallback(prePayCallback);
EPGJS.renderRegisterAccount(pkey, paysol, 'ecom-div');

The only difference with basic configuration is to use the method “renderRegisterAccount” which takes not an auth token but a merchant public key. This public key will be provided to the merchant by EPG and will be able to use it freely on client’s side.

How to override default internationalization

By default, epgjs api renders its cashier on English language. What happens if a merchant wants to override default english translations or add a different language to be available for their customers.

To do this, all needed is to set a new I18n object with the following sentence:

EPGJS.setI18n(i18n);

By doing this and once we render the cashier again, all the overrided or new labels will be displayed. Next question would be the i18n structure and its sintaxis.

I18 object is a collection of key object, where the key is the desired language to translate a cashier. The object associated to the language contains all the labels used to render the cashier, as a key value object.

As an example:

{'en':{
	'validationError':{
  		'numbersOnly' : 'Numbers only',
  		'dateFormat' : 'Date format MMYY',
  		'minSize' : 'Min size {0}',
  		'maxSize' : 'Max size {0}',
  		'luhnCheck' : 'Field is not a valid number according to Luhn Algorithm',
  		'isoCode2' : 'Country ISO-Code 2',
  		'validIBAN' : 'Insert a valid IBAN Number',
		'latinCharacters' : 'Please use only latin letters, whitespace, comma, . \' or -',
		'emailOrNumbers' : 'Account can only be an email or numbers',
		'onlySixNumbers' : 'Neteller password can only have 6 digits',
        		'invalidExpDate' : 'Expiry date provided is invalid (MMYY)',
        		'expiredExpDate' : 'The expiry date you provided has already expired'
  	   },
	'account' : 'Account',
	'paymentMethod' : 'Payment Method',
	'paypal':{
		'email' : 'PayPal Email'
	},
  	'edit':'Edit',
      	'noallowed' : 'No Allowed',
      	'operationnoallowed':{
        		'onlycredit' : 'This payment solution only allow credit operations'
     	},
	'stopediting' : 'Back',
	'remove' : 'Remove',
	'registeraccount' : 'Register Account',
	'quickpay' : 'QuickPay',
	'paymentsolution' : 'Payment Solution',
	'register' : 'Register',
	'selectone' : 'Select one...',
	'pay' : 'Pay',
	'withdraw' : 'Withdraw',
	'CreditCards' : 'Credit Cards',
	'Neteller' : 'Neteller',
	'Skrill' : 'Skrill',
    	'astropayCards' : 'AstroPay Cards',
    	'ecoPayz' : 'EcoPayz',
	'creditcards':{
		'cardholdername' : 'Card Holder Name',
		'cardnumber' : 'Card Number',
		'cvv' : 'CVV / CVN',
		'expirationdate' : 'Expiration Date',
		'cardtype' : 'Card Type'
	},
  }
}

As shown in the example labels are wrapped in different object like validations, payment solutions names, operations, so overriding or adding new languages is relatively easy and quick.

For complete example take a look to the whole epgjs library where default (and basic labels) are defined.

How to override default theme

Every single element rendered with epgjs api is given a style class which has its corresponding styling. A desired action could be to change those rendered field’s styles to fit the web where the form is going to be embebed in.

This styles are controlled by a them which tells which style is going to be applied to a specific item. A theme is controlled by a JSON object that contains the elements visible in the next example:

{
   "epgjs-cashier-container": "container",
   "epgjs-cashier": "jumbotron panel-group",
   "cashier-edit-row": "row",
   "cashier-edit-activate-panel": "btn btn-primary btn-sm pull-right cashier-edit-button",
   "cashier-edit-deactivate-panel": "btn btn-warning btn-sm pull-right cashier-edit-button",
   "cashier-account-row": "panel",
   "cashier-account-row-heading": "panel-heading",
   "cashier-form-row-remove": "btn btn-danger btn-xs pull-right",
   "cashier-register-row": "panel",
   "cashier-register-row-heading": "panel-heading",
   "cashier-quickpay-row": "panel",
   "cashier-quickpay-row-heading": "panel-heading",
   "cashier-paysol-panel": "panel-body",
   "cashier-form-panel": "panel-body",
   "cashier-form-field": "form-group",
   "cashier-form-field-label": "",
   "cashier-form-field-text": "form-control",
   "cashier-form-field-expdate": "form-control",
   "cashier-form-field-password": "form-control",
   "cashier-form-field-cvv": "form-control",
   "cashier-form-field-dropdown": "form-control",
   "submit-button": "btn btn-default",
   "cashier-form-row-selected": "panel-primary"
}

So to be able to customize form and give a personal style would be enough to create a JSON object like the one before and make use of the EPGJS_STYLE object which will allow us to override the actual used theme:

EPGJS_STYLE.setCssTheme(theme);

 

Cookies Policy We need our cookies to make Easy Payment Gateway better. If you need more information click here.