@paydock/client-sdk
Version:
Paydock client sdk
249 lines (208 loc) • 6.83 kB
Markdown
## Checkout button
You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#cb_CheckoutButton)
PayPal meta parameters description [here](https://www.npmjs.com/package/@paydock/client-sdk#ipaypalmeta)
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.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
```
```javascript
// ES2015 | TypeScript
var button = new PaypalCheckoutButton('#button', 'publicKey');
```
Then write only need 1 line of code in js to initialize widget
### Full example
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="button">checkout</button>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
var button = new paydock.PaypalCheckoutButton('#button', 'publicKey');
</script>
</body>
</html>
```
## Checkout button advanced example
### Optional methods
```javascript
button.onFinishInsert('input[name="pst"]', 'payment_source_token'); // insert one-time-token to your input after finish checkout
button.setMeta({
brand_name: 'Paydock',
reference: '15',
first_name: 'receiver-name',
last_name: 'receiver-last-name',
phone: '9379992'}); // settings for checkout pages
button.on('finish', function (data) { // Add handler of event
console.log('on:finish', data);
});
```
This example shows how you can use a lot of other methods to settings your button
### Full Paypal 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://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" 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.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
button.onFinishInsert('input[name="pst"]', 'payment_source_token');
button.setMeta({
brand_name: 'Paydock',
reference: '15',
first_name: 'Joshua',
last_name: 'Wood',
phone: '0231049872'});
button.on('finish', function (data) {
console.log('on:finish', data);
});
</script>
</body>
</html>
```
### 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>
```
### Full Aftepay example
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="button">
<img src="https://daepxvbfwwgd0.cloudfront.net/assets/logo_scroll-0c43312c5845a0dcd7a3373325da6402bc1d635d3415af28ed40d6c1b48e3d5c.png" align="left" style="margin-right:7px;">
</button>
<input type="text" name="pst" />
<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
var button = new paydock.AfterpayCheckoutButton('#button', 'publicKey', 'gatewayId');
button.onFinishInsert('input[name="pst"]', 'payment_source_token');
button.showEnhancedTrackingProtectionPopup(true);
button.setMeta({
amount: "100",
currency: "AUD",
reference: 'Vitae commodi provident assumenda',
email: 'wanda.mertz@example.com',
first_name: 'Wanda',
last_name: 'Mertz',
address_line: '61426 Osvaldo Plains',
address_line2: 'Apt. 276',
address_city: 'Lake Robyn',
address_state: 'WY',
address_postcode: '07396',
address_country: 'Australia',
phone: '0412345678',
});
button.on('finish', function (data) {
console.log('on:finish', data);
});
</script>
</body>
</html>
```