@sokhadze/payze-js NPM

comment: <> ( View Demo)

comment: <> ( Report Bug)

About The Project

Payze is the best software platform for running an internet business. We handle money movement flow for our customers by giving them tools they need.

Getting Started

Installation

Install payze package in your project
```
npm install @payze/payze-js
```

Basic Usage

Import payze-js SDK
```
import {Payze} from "@payze/payze-js";
```
initialize payze
```
const payze = Payze('TransactionId');
```

include following html

 <div id="card">
   <div id="card-info">

   </div>

   <div id="pay">

   </div>
 </div>

Render Card Elements

 payze.renderCardInfo();
 payze.renderPayButton();

Customization

Customize Card information inputs

 // setInputStyles method updates styling of one of the available inputs, 
 // it accepts 2 arguments, 
 // Argument #1 is object containing css styles
 // Argument #2 is name of the input to be styled, supported names are: PAN, NAME, DATE, CVV
 // Example usage: 
 payze.setInputStyles({'font-size': '14px', 'color': 'lightblue'}, 'PAN');

 // input styles will not be rendered until updateStyles method is called

PAN: Primary Account Number input
NAME: Cardholder Name input
DATE: Expiration Date input
CVV:
Card Verification Number input

Customize Pay Button

 // setButtonStyles method updates styling the pay button, 
 // it accepts 1 argument, an object containing css styles
 // Example usage: 
 payze.setButtonStyles({
   'font-size': '14px',
   'border': '0px solid grey',
   'border-radius': '0px',
   'padding': '10px',
   'margin': '10px 0px'
 });

 // button styles will not be rendered until updateStyles method is called

Render Customized Element Styles

 // updateStyles method renders the updated styles from one of the above mentioned methods
 payze.updateStyles();

 // NOTE: payze.renderCardInfo and payze.renderPayButton should be called after payze.updateStyles method call