@paydock/client-sdk
Version:
Paydock client sdk
124 lines (103 loc) • 3.52 kB
Markdown
## Checkout button
You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#cb_CheckoutButton)
Zipmoney meta parameters description [here](https://www.npmjs.com/package/@paydock/client-sdk#izipmoneymeta)
This widget allows you to turn your button into a full Checkout Button.
As a result, you will be able to receive a one-time token for charges, subscriptions etc. And other data given to the user by the payment gateway.
## Checkout button simple example
### Container
```html
<button type="button" id="button">
checkout
</button>
```
You must create a button to turn it into checkout-button
### Initialization
```javascript
var button = new paydock.ZipmoneyCheckoutButton('#button', 'publicKey', 'gatewayId');
```
```javascript
// ES2015 | TypeScript
var button = new ZipmoneyCheckoutButton('#button', 'publicKey');
```
Then write only need 1 line of code in js to initialize widget
### Full ZipMoney example
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="paymentForm">
<button type="button" id="button">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrrEYxDmq4WXv7hfHygKD9ltnOqv0K6soSAhmbKNllPNYWiLiJA" align="left" style="margin-right:7px;">
</button>
</form>
<input type="text" name="pst" />
<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
var button = new paydock.ZipmoneyCheckoutButton('#button', 'publicKey', 'gatewayId');
button.onFinishInsert('input[name="pst"]', 'payment_source_token');
button.setMeta("first_name": "Joshua",
"tokenize": true,
"last_name": "Wood",
"email":"joshuawood@hotmail.com.au",
"gender": "male",
"charge": {
"amount": "4",
"currency":"AUD",
"shipping_type": "delivery",
"shipping_address": {
"first_name": "Joshua",
"last_name": "Wood",
"line1": "Suite 660",
"line2": "822 Ruiz Square",
"country": "AU",
"postcode": "3223",
"city": "Sydney",
"state": "LA"
},
"billing_address": {
"first_name": "Joshua",
"last_name": "Wood",
"line1": "Suite 660",
"line2": "test",
"country": "AU",
"postcode": "3223",
"city": "Sydney",
"state": "LA"
},
"items": [
{
"name":"ACME Toolbox",
"amount":"2",
"quantity": 1,
"reference":"Fuga consequuntur sint ab magnam"
},
{
"name":"Device 42",
"amount":"2",
"quantity": 1,
"reference":"Fuga consequuntur sint ab magnam"
}
]
},
"statistics": {
"account_created": "2017-05-05",
"sales_total_number": "5",
"sales_total_amount": "4",
"sales_avg_value": "45",
"sales_max_value": "400",
"refunds_total_amount": "21",
"previous_chargeback": "true",
"currency": "AUD",
"last_login": "2017-06-01"
});
button.on('finish', function (data) {
console.log('on:finish', data);
});
</script>
</body>
</html>
```