Skip to content

Commit

Permalink
Full refactoring. v1.0.
Browse files Browse the repository at this point in the history
  • Loading branch information
Konstantin Aleksandrov committed Feb 18, 2018
1 parent b0a965b commit 6fc0a70
Show file tree
Hide file tree
Showing 70 changed files with 3,314 additions and 3,705 deletions.
219 changes: 105 additions & 114 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,67 @@
<h1 align="center">Paymentwall widget</h1>

<p align="center">
<img width="399" height="654" src="https://github.com/koalex/paymentwall-widget/blob/master/paymentwall_widget.jpg">
<img width="467" height="586" src="https://github.com/koalex/paymentwall-widget/blob/master/paymentwall_widget.jpg">
</p>

## Demo

1. Install dependencies:
```bash
npm install
```

2. Run demo-server:
```bash
npm run demo
```

3. Go to [localhost:3000/demo](http://localhost:3000/demo)


## Usage

1. Create basic markup:
```html
<form id="paymentForm">
<input type="hidden" name="_csrf" value="#!csrf" > <!-- you can generate csrf token for input with name="_csrf" and it will sent to you in body. -->
<div>
<h5 id="checkoutWith"></h5>
<div id="paymentMethods"></div>
<div class="errorText"></div>
</div>
<div>
<label>
Card Holder Name
<input id="cardHolder" type="text" >
</label>
<div id="cardHolderErrText"></div>
</div>
<div>
<label>
Credit Card Number
<input id="cardNumber" type="text">
</label>
<div id="cardNumberErrText"></div>
</div>
<div>
<select id="expireMonth">
<option disabled>Month</option>
</select>
</div>
<div>
<select id="expireYear">
<option disabled>Year</option>
</select>
</div>
<div>
<label>
<input type="text" id="cvv">
</label>
<div id="cvvErrText"></div>
</div>
<div>
<select id="country">
<option disabled selected>Country</option>
</select>
</div>
<div>
<span>PAY:</span>
<strong id="amountText"></strong>
<em id="currencyText"></em>
</div>
<button type="submit">
Confirm payment
</button>
<div id="preloader">Processing...</div>
</form>
<form id="form">
<!-- you can generate csrf token for input with name="_csrf" and it will sent to you in body. -->
<input id="_csrf" type="hidden" name="_csrf" value="_csrf_value" >
<div>
<label>
Card Holder Name
<input id="cardHolder" type="text" >
</label>
</div>
<div>
<label>
Credit Card Number
<input id="cardNumber" type="text">
</label>
</div>
<div>
<select id="expireMonth"></select>
</div>
<div>
<select id="expireYear"></select>
</div>
<div>
<label>
CVV
<input type="text" id="cvv">
</label>
</div>
<div>
<select id="country"></select>
</div>
<div>
<span>PAY:</span>
<strong id="amountText"></strong>
<em id="currencyText"></em>
</div>
<button type="submit">
Confirm payment
</button>
</form>
```

2. Add widget script:
Expand All @@ -69,30 +71,49 @@

3. Create a widget:
```javascript
new Widget({
api_key: 'YOUR_API_KEY',
amount: 5,
currency: 'PLN',
amountText: '#amountText',
currencyText: '#currencyText',
checkoutText: '#checkoutWith',
errorText: '.errorText',
paymentForm: '#paymentForm',
paymentMethods: '#paymentMethods',
cardHolder: '#cardHolder',
cardHolderErrText: '#cardHolderErrText',
cardNumber: '#cardNumber',
cardNumberErrText: '#cardNumberErrText',
expireMonth: '#expireMonth',
expireYear: '#expireYear',
cvv: '#cvv',
cvvErrText: '#cvvErrText',
country: '#country',
preloader: '#preloader',
onSuccess: function (message) {
alert(message);
}
});
var widget = new Widget({
api_key: 'YOUR_API_KEY',
_csrf: '#_csrf',
amount: 5,
currency: '$',
cardHolder: '#cardHolder',
cardNumber: '#cardNumber',
expireMonth: '#expireMonth',
expireYear: '#expireYear',
country: '#country',
cvv: '#cvv',
onPaymentMethodsLoadEnd: function (paymentMethods) {
// Array of paymentMethods || false
},
onError: function (err) {
// Error from api-server.
}
});
document.querySelector('#amountText').textContent = widget.amount;
document.querySelector('#currencyText').textContent = widget.currency;
document.querySelector('#form').addEventListener('submit', function (ev) {
ev.preventDefault();
var validationErrors = widget.validationErrors();
if (validationErrors) {
// Validation error handle
} else {
var values = widget.values;
// send values to server
}
});
document.querySelector('#cardNumber').addEventListener('input', function (ev) {
// parse card name from card number
console.log(widget.cardName);
});
// countries array: [{name:"Albania",alpha2:"AL"},...]
console.log(widget.countries);
// need only if you use not "select" tag for countries. for example if you want to use dropdowns
widget.setCountry('AL');
widget.loadPaymentMethods();
// payment methods from server
console.log(widget.paymentMethods);
// need only if you use "select" tag for month expire
widget.monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
```

#### Options
Expand All @@ -101,38 +122,13 @@
|**api_key**|true|You can get an API key by signing up at paymentwall.com as a merchant and going to [api documentation](https://api.paymentwall.com/developers/applications). Activate the Evaluation Mode. Signature is optional. By default no country_code parameter is passed (this way geolocated country is used). If the user changes his country - we pull the list of methods for that country.
|**amount**|true|Amount the user pays.
|**currency**|false|Currency (default PLN).
|**amountText**|true|CSS selector of a element in which you want to display amount.
|**currencyText**|true|CSS selector of a element in which you want to display currency value.
|**checkoutText**|true|CSS selector. In this element will be shown text (payment method name) when you choose payment method.
|**errorText**|true|CSS selector. In this element will be shown main error data.
|**paymentForm**|true|CSS selector of a payment form. !! This form must contain all elements below (except error text fields).
|**paymentMethods**|true|CSS selector. Container in which will be located payment methods (this container must be inside paymentForm element).
|**cardHolder**|true|CSS selector. Cardholder input.
|**cardHolderErrText**|false|CSS selector. Cardholder error text container.
|**cardNumber**|true|CSS selector. Cardnumber input.
|**cardNumberErrText**|false|CSS selector. Cardnumber error text container.
|**expireMonth**|true|CSS selector. Must be a **select** html tag.
|**expireYear**|true|CSS selector. Must be a **select** html tag.
|**cvv**|true|CSS selector. Must be a **select** html tag.
|**cvvErrText**|false|CSS selector. CVV error text container.
|**country**|true|CSS selector. Must be a **select** html tag.
|**preloader**|false|CSS selector of your preloader (if you want to showing preloader during processing or fetching payment methods).
|**onSuccess**|false|Callback function which take a succes message


## Demo

1. Install dependencies:
```bash
npm install
```

2. Run demo-server:
```bash
npm run demo
```

3. Go to [localhost:3000/materialize](http://localhost:3000/materialize)
|**cardHolder**|true|CSS selector or HTMLInputElement. Cardholder input.
|**cardNumber**|true|CSS selector or HTMLInputElement. Cardnumber input.
|**expireMonth**|true|CSS selector, HTMLInputElement or HTMLSelectElement. Must be a **input** or **select** html tag.
|**expireYear**|true|CSS selector, HTMLInputElement or HTMLSelectElement. Must be a **input** or **select** html tag.
|**cvv**|true|CSS selector or HTMLInputElement. Must be a **input** html tag.
|**onPaymentMethodsLoadEnd**|false|Callback function which take a payment methods or **false**.
|**onError**|false|Callback function which take error from api-server.


## Development
Expand All @@ -152,9 +148,4 @@
```bash
npm run build
```
###### If you want to build with your API_KEY
```bash
API_KEY=your_api_key npm run build
```


83 changes: 0 additions & 83 deletions client/index.html
View file

This file was deleted.

25 changes: 0 additions & 25 deletions client/index.js
View file

This file was deleted.

Loading

0 comments on commit 6fc0a70

Please sign in to comment.