Payper-widget NPM

alt text

One-click payment.

Getting Started

Create a folder for the Payper source code.

Download the project using npm install or from the git repository

npm install payper-widget

The project has been designed so that you don't have to make any modifications to the source code or recompile. Out of the box, it is ready to be installed into your payment page.

Compiling

If you haven't already, install yarn.

npm install --global yarn

Install Webpack

npm install --save-dev webpack

To compile, use the command yarn wp to call Webpack to do the compiling.

When you're ready, copy the following to your project root:

build folder
payper-logo folder
index.html
payper.css

Adding your Company Logo

Your company logo must be symmetrical and be no larger than 100x100 pixels.

Within the root directory of the Payper Widget, create a folder called payper_logo.

Adding Logo Without Recompiling the project

Add your company logo in the payper-logo folder with the name logo.png.

If you prefer to use another file type or a different file name, you will have to recompile the project

Adding Logo with Intent to Recompile

Within the src\components\CompanyLogo\CompanyLogo file, update the line 9:

<img className="logo-image" src={window.location.href + '/payper_logo/logo.png'} />
Note - the image source path starts within the current folder

Replace logo.png with the file and path of your choice.
Recompile yarn wp

Adding the Widget to your Checkout Page

Your checkout page will need a dedicated <div> to be the Payper Widget's home. Call this <div id="payper-widget"> .

Calling the Payper Widget

Insert this script into your payment page;

<script src="./build/index.js" id="Payper-Script" data-config="{'values': 'sendValues','config': {'targetElementId': 'payper-widget'}}" >
  (function (w, d, s, o, f, js, fjs) {
    w['Payper-Widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'sendValues', './build/index.js'));
  w1('init', { targetElementId: 'payper-widget' });
</script>

Make sure the scr attribute accurately points to the folder.

The script will consume the JSON when the button is clicked.

Adding the Payment Button

The Pay with Payper button will call the function to deliver the JSON payload to the Payper Widget:

<button onclick="sendValues('apidata', JSONData);">Pay with Payper</button>

The JSON Object

Your payment information will be sent to the Payper Widget via JSON payload.

{
    "sid_info": [{
       "sid":"",
       "type":"",
    }],
    "rcode":"",
    "company_name":"",
    "return_url":"",
    "notification_url":"",
    "udf1":"",  
    "udf2":"",  
    "udf3":"",  
    "udf4":"",  
    "udf5":"",  
    "udf6":"",
    "first_name":"",
    "last_name":"",
    "email":"",
    "address":"",
    "city":"",
    "state":"",
    "zip_code":"",
    "items": [{
        "name":"",
        "unit_price":"",
        "quantity":""
    }],
    "amount_shipping":"",
}

JSON Parameters

Paramater	Description	Type	Requirement
	Account Information
`sid_info`	Array of SID information	array	required
`sid`	sid number provided by Payper. e.g. `123`	integer	required
`type`	description of sid level `standard` or `enhanced`	string	required
	Customer Information
`first_name`	Customer's first name	string	required
`last_name`	Customer's last name	string	required
`email`	Customer's email address	string	required
`phone`	Customer's phone number	string	required
`address`	Customer's street address	string	required
`city`	Customer's city	string	required
`state`	Customer's state	string	required
	ISO format - 2/3 characters
`country`	Customer's country	string	required
	ISO format - 2 characters
`zip_code`	Customer's Zip/Postal Code	string	required
	USA customers: 5-digit ZIP code (eg. "12345")
	Canadian customers: 6-character alphanumeric postal code (eg. "A1A 1A1")
	Merchant URLs
`return_url`	The URL to return the customer to after processing	string	required
`notification_url`	The URL to receive asynchronous status notifications	string	optional
	Cart Information
`items`	array of unit_price, quantity, name	array	required
`unit_price`	The amount that you want to charge per unit, e.g. 10.00 if you would want to charge $10.00 per unit	decimal	required
`quantity`	The number of units purchased	integer	required
`name`	The name of the item being purchased - for display to customer	string	required
`amount_shipping`	Specify the shipping cost. This value is added to the total of the cart before charging	decimal	required
`udf1 - udf6`	User defined fields 1 through 6. These can be used to reference your internal transaction number, etc. These fields are returned unmodified in the response	string	At least one UDF is required
	Note: at least one of the UDF fields must be unique to each transaction.
	e.g. `UDF1` = `transactionNumber`, `UDF2` = `Date`, `etc...`

Notification URL

This is the URL which you may receive asynchronous payment notifications and updates.


URL	Your Notification URL
Method	POST
Content-Type	application/x-www-form-urlencoded

Notification Request Parameters

Parameter	Type	Description
`parent_txid`	string	The transaction id of the initial transaction of the initial transaction request
`txid`	string	The transaction id of the current request
`amount`	string	The transaction amount, formatted with currency, ready for display
`amount_raw`	decimal	The transaction amount, as an unformatted, raw, decimal number
`comment`	string	Notes assigned to the current transaction
`tx_action`	string	The type of action performed (eg. PAYMENT, REFUND, PAYOUT, etc)
`parent_txaction`	string	The type of action that was initially processed (eg. PAYMENT, PAYOUT, etc)
`status`	string	The status of the processed action (eg. APPROVED, DECLINED, ERROR, REFUNDED, etc)
`descriptor`	string	What should show on the customer's bank statement
`udf1` - `udf6`	string	User defined fields 1 through 6, returned as recorded in the initial transaction
`signature_v2`	string	The signature is a SHA256 HMAC hash used to verify the authenticity of the submitted data. See Signature generation for details on generating the signature