Payment button

The payment button is a simple HTML code, which can be placed on any webpage, site, blog online shopping basket.

To start accepting payments just copy-paste one of the examples below.

Examples

Payment button with an arbitrary amount
Payment button with calendar (scheduled payments)
Payment button with additional input fields
Multiple buttons on the same page
Embedded payment form

Payment button with an arbitrary amount

Before using buttons specify merchant ID (setMerchantId= 1396424) and payment currency (USD).
setResponseUrl() will set the URL of page where user will be redirected after payment completion.

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
	var button = $ipsp.get('button');
	button.setMerchantId( 1396424);
	button.setAmount('', 'USD');
	button.setHost('pay.fondy.eu');
</script>
<button onclick="location.href=button.getUrl()">Pay an arbitrary amount</button>

Payment button with calendar (scheduled payments)

Before using buttons specify merchant ID (setMerchantId= 1396424) and payment currency (USD).
setResponseUrl() will set the URL of page where user will be redirected after payment completion.

setRecurringState(true) will enabled scheduled payments.

addRecurringData() will set next properties of scheduled payment:

start_time – time of first payment

end_time – time of last payment

amount – amount of regular payment

period – period of payment (day, month, year)

every – frequency of payment

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
	var button = $ipsp.get('button');
	button.setMerchantId( 1396424);
	button.setAmount('200', 'USD', true);
	button.setHost('pay.fondy.eu');
	button.setRecurringState(true);
	button.addRecurringData({
		start_time: '2016-10-09',
		end_time: '2018-12-09',
		amount: 200,
		period: 'month',
		every: 1
	});
</script>
<button onclick="location.href=button.getUrl()">Pay a scheduled order: amount will be charged every month</button>

Payment button with additional input fields

In this example with fixed amount (2.00 USD) you can find how to request additional data from user (such as name, order description).
Method addField() adds additional inputs to payment page, required and readonly attributes set it properties

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
	var button = $ipsp.get('button');
	button.setMerchantId( 1396424);
	button.setAmount(2, 'USD', true);
	button.setResponseUrl('http://example.com/result/');
	button.setHost('pay.fondy.eu');
	button.addField({
		label: 'Name',
		name: 'name',
		required: true
	});
	button.addField({
		label: 'Order description',
		name: 'description',
		value: 'Product №10339',
		readonly: true
	});
</script>
<button onclick="location.href=button.getUrl()">Pay 2 USD</button>

Multiple buttons on the same page

createOrder method will set up payment button at click moment.

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
function createOrder(amount, order_desc) {
	var button = $ipsp.get('button');
	button.setMerchantId( 1396424);
	button.setAmount(amount, 'USD');
	button.setResponseUrl('http://example.com/result/');
	button.setHost('pay.fondy.eu');
	button.addField({
		label: 'Product Description',
		name: 'order_desc',
		value: order_desc
	});
	return button.getUrl();
}
</script>
<button onclick="location.href=createOrder('','Product Item 1')">Pay an arbitrary amount</button>
<button onclick="location.href=createOrder(20,'Product Item 2')">Pay $20</button>
<button onclick="location.href=createOrder(30,'Product Item 3')">Pay $30</button>
<button onclick="location.href=createOrder(40,'Product Item 4')">Pay $40</button>

Embedded payment form

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
function checkoutInit(url) {
	$ipsp('checkout').scope(function() {
		this.setCheckoutWrapper('#checkout_wrapper');
		this.addCallback(__DEFAULTCALLBACK__);
		this.action('show', function(data) {
			$('#checkout_loader').remove();
			$('#checkout').show();
		});
		this.action('hide', function(data) {
			$('#checkout').hide();
		});
		this.action('resize', function(data) {
			$('#checkout_wrapper').width(480).height(data.height);
		});
		this.loadUrl(url);
	});
};
var button = $ipsp.get("button");
button.setMerchantId( 1396424);
button.setAmount(10.99, 'USD', true);
button.setHost('pay.fondy.eu');
checkoutInit(button.getUrl());
</script>

<div id="checkout">
	<div id="checkout_wrapper"></div>
</div>

Example of payment button using JS API

Please see code at: jsfiddle.net

To add any additional input field to payment page use the following code

$ipsp('button').addField({
	'label':'Account Id',
	'name' :'account_id',
	'value':'127318273',   //optional, default empty
	'readonly':true|false, //optional, default false
	'required':true|false, //optional, default false
	'valid':{
	   'pattern':'[a-z]+'  //regular expression
	}
 });

To submit payment protocol request parameters use addParam method:

$ipsp('button').addParam('parameter_name','parameter_value')

JS API detailed specifications

API FONDYVersion 1.0