@pay-com/js 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +105 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.esm.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<h1 align="center">Pay Components JS Package</h1>
|
|
2
|
+
|
|
3
|
+
Pay Components are ready-to-use PCI DSS compliant payment fields you can embed into your checkout page through simple code. Your branding and styling remain untouched, and you don't have to worry about storing card data.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To include Pay Components in your project, either install it using `npm i @pay-com/js`, or use our CDN:
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script type="text/javascript" src="https://js.pay.com/v1"></script>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Get Started
|
|
14
|
+
|
|
15
|
+
### Initialize Pay
|
|
16
|
+
|
|
17
|
+
To initialize Pay, call `Pay.com()` with your unique merchant id:
|
|
18
|
+
|
|
19
|
+
```javascript
|
|
20
|
+
const pay = await Pay.com({ identifier: 'merchant_id' })
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Initialize checkout object
|
|
24
|
+
|
|
25
|
+
In order to be able to start accepting payments, intialize the checkout object:
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
const checkout = pay.checkout({
|
|
29
|
+
token: 'payment_session_client_secret',
|
|
30
|
+
onSuccess: payment => {
|
|
31
|
+
// Can be used instead of checkout event listeners
|
|
32
|
+
},
|
|
33
|
+
onFailure: error => {
|
|
34
|
+
// Can be used instead of checkout event listeners
|
|
35
|
+
}
|
|
36
|
+
})
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
You now have a checkout object with which you can render a payment form, validate it, and subscribe to events.
|
|
40
|
+
|
|
41
|
+
To subscribe to different events, use the `checkout.on` function:
|
|
42
|
+
|
|
43
|
+
```javascript
|
|
44
|
+
checkout.on(checkout.EVENT_TYPES.PAYMENT_SUCCESS, payment => {
|
|
45
|
+
// Do something on success
|
|
46
|
+
})
|
|
47
|
+
checkout.on(checkout.EVENT_TYPES.PAYMENT_PROCESSING, () => {
|
|
48
|
+
// Do something on payment processing
|
|
49
|
+
})
|
|
50
|
+
checkout.on(checkout.EVENT_TYPES.PAYMENT_FAILURE, error => {
|
|
51
|
+
// Do something on error
|
|
52
|
+
})
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Render Payment Form
|
|
56
|
+
|
|
57
|
+
In order to render a payment form, create an empty div which the form will be rendered in, e.g.:
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<div id="paycom_checkout"></div>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Once you have the div, call the `render` function:
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
checkout.universal({
|
|
67
|
+
container: '#paycom_checkout'
|
|
68
|
+
})
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Thats it! You are now ready to securely accept payments in your website.
|
|
72
|
+
|
|
73
|
+
### Manual validation and submission
|
|
74
|
+
|
|
75
|
+
If you wish to render the fields without a submission button for more control, you have to pass the `button: false` option to the `toggles` key under the `universal` function:
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
checkout.render({
|
|
79
|
+
container: '#paycom_checkout',
|
|
80
|
+
toggles: {
|
|
81
|
+
submitButton: false
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Now the form will render without a button. To validate & submit the form, first create a button:
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<button id="pay_button">Pay now!</button>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Then, create a click listener on the button:
|
|
93
|
+
|
|
94
|
+
```javascript
|
|
95
|
+
document.getElementById('pay_button').addEventListener('click', async () => {
|
|
96
|
+
// Validate all fields before submitting
|
|
97
|
+
const { valid } = checkout.validate()
|
|
98
|
+
|
|
99
|
+
// If the payment form is valid, continue with the payment
|
|
100
|
+
if (valid) {
|
|
101
|
+
// Can also get the payment from return value of submit function.
|
|
102
|
+
const payment = await checkout.submit()
|
|
103
|
+
}
|
|
104
|
+
})
|
|
105
|
+
```
|
package/lib/index.d.ts
CHANGED
|
@@ -302,6 +302,8 @@ type ValidateFn = (frameType?: ELEMENT_TYPES) => Promise<FormattedErrors | void>
|
|
|
302
302
|
type ResetFn = (frameType?: ELEMENT_TYPES) => Promise<void>
|
|
303
303
|
|
|
304
304
|
type UpdateTransactionDetailsOpts = {
|
|
305
|
+
successUrl?: string
|
|
306
|
+
failureUrl?: string
|
|
305
307
|
consumer?: {
|
|
306
308
|
firstName?: string
|
|
307
309
|
lastName?: string
|
package/lib/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t,n,r){return new(n||(n=Promise))((function(o,i){function u(e){try{a(r.next(e))}catch(e){i(e)}}function c(e){try{a(r.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,c)}a((r=r.apply(e,t||[])).next())}))}function t(e,t){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(a){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,r=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],r=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,a])}}}function n(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function r(e,t){if(i(e,t),"undefined"==typeof window)return t.resolve(null);var r=e.sdkBaseURL,u="",c=window.location.hostname;u=r||(["localhost","dev","staging"].some((function(e){return window.location.hostname.includes(e)}))?"https://js.dev.pay.com/v1.js":c.includes(".sandbox.")?"https://js.sandbox.pay.com/v1.js":"https://js.pay.com/v1.js");var a="Pay",s=o(a);return function(e,t){var r=document.querySelector('script[src="'.concat(e,'"]'));if(null===r)return null;var o=n(e,t),i=Object.assign({},r.dataset);if(delete i.uidAuto,Object.keys(i).length!==Object.keys(o.dataset).length)return null;var u=!0;return Object.keys(i).forEach((function(e){i[e]!==o.dataset[e]&&(u=!1)})),u?r:null}(u)&&s?t.resolve(s):function(e,t){i(e,t);var r=e.url,o=e.attributes;if("string"!=typeof r||0===r.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!=typeof o)throw new Error("Expected attributes to be an object.");return new t((function(e,t){return"undefined"==typeof window?e():function(e){var t=e.url,r=e.attributes,o=e.onSuccess,i=e.onError,u=n(t,r);u.onerror=i,u.onload=o,document.head.insertBefore(u,document.head.firstElementChild)}({url:r,attributes:o,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'.concat(r,'" failed to load.')))}})}))}({url:u},t).then((function(){var e=o(a);if(e)return e;throw new Error("The window.".concat(a," global variable is not available."))}))}function o(e){return window[e]}function i(e,t){if("object"!=typeof e||null===e)throw new Error("Expected an options object.");if(void 0!==t&&"function"!=typeof t)throw new Error("Expected PromisePonyfill to be a function.")}
|
|
1
|
+
function e(e,t,n,r){return new(n||(n=Promise))((function(o,i){function u(e){try{a(r.next(e))}catch(e){i(e)}}function c(e){try{a(r.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,c)}a((r=r.apply(e,t||[])).next())}))}function t(e,t){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(a){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,r=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],r=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,a])}}}function n(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function r(e,t){if(i(e,t),"undefined"==typeof window)return t.resolve(null);var r=e.sdkBaseURL,u="",c=window.location.hostname;u=r||(["localhost","dev","staging"].some((function(e){return window.location.hostname.includes(e)}))?"https://js.dev.pay.com/v1.js":c.includes(".sandbox.")?"https://js.sandbox.pay.com/v1.js":"https://js.pay.com/v1.js");var a="Pay",s=o(a);return function(e,t){var r=document.querySelector('script[src="'.concat(e,'"]'));if(null===r)return null;var o=n(e,t),i=Object.assign({},r.dataset);if(delete i.uidAuto,Object.keys(i).length!==Object.keys(o.dataset).length)return null;var u=!0;return Object.keys(i).forEach((function(e){i[e]!==o.dataset[e]&&(u=!1)})),u?r:null}(u)&&s?t.resolve(s):function(e,t){i(e,t);var r=e.url,o=e.attributes;if("string"!=typeof r||0===r.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!=typeof o)throw new Error("Expected attributes to be an object.");return new t((function(e,t){return"undefined"==typeof window?e():function(e){var t=e.url,r=e.attributes,o=e.onSuccess,i=e.onError,u=n(t,r);u.onerror=i,u.onload=o,document.head.insertBefore(u,document.head.firstElementChild)}({url:r,attributes:o,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'.concat(r,'" failed to load.')))}})}))}({url:u},t).then((function(){var e=o(a);if(e)return e;throw new Error("The window.".concat(a," global variable is not available."))}))}function o(e){return window[e]}function i(e,t){if("object"!=typeof e||null===e)throw new Error("Expected an options object.");if(void 0!==t&&"function"!=typeof t)throw new Error("Expected PromisePonyfill to be a function.")}var u={com:function(n,o){return void 0===o&&(o=function(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}()),e(void 0,void 0,void 0,(function(){var e;return t(this,(function(t){switch(t.label){case 0:return[4,r(n,o)];case 1:if(!(e=t.sent()))throw new Error("Wrong script URL provided");return[2,e.com(n)]}}))}))}};export{u as default};
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Pay=t()}(this,(function(){"use strict";function e(e,t,n,r){return new(n||(n=Promise))((function(o,i){function u(e){try{a(r.next(e))}catch(e){i(e)}}function c(e){try{a(r.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,c)}a((r=r.apply(e,t||[])).next())}))}function t(e,t){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(a){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,r=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],r=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,a])}}}function n(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function r(e,t){if(i(e,t),"undefined"==typeof window)return t.resolve(null);var r=e.sdkBaseURL,u="",c=window.location.hostname;u=r||(["localhost","dev","staging"].some((function(e){return window.location.hostname.includes(e)}))?"https://js.dev.pay.com/v1.js":c.includes(".sandbox.")?"https://js.sandbox.pay.com/v1.js":"https://js.pay.com/v1.js");var a="Pay",s=o(a);return function(e,t){var r=document.querySelector('script[src="'.concat(e,'"]'));if(null===r)return null;var o=n(e,t),i=Object.assign({},r.dataset);if(delete i.uidAuto,Object.keys(i).length!==Object.keys(o.dataset).length)return null;var u=!0;return Object.keys(i).forEach((function(e){i[e]!==o.dataset[e]&&(u=!1)})),u?r:null}(u)&&s?t.resolve(s):function(e,t){i(e,t);var r=e.url,o=e.attributes;if("string"!=typeof r||0===r.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!=typeof o)throw new Error("Expected attributes to be an object.");return new t((function(e,t){return"undefined"==typeof window?e():function(e){var t=e.url,r=e.attributes,o=e.onSuccess,i=e.onError,u=n(t,r);u.onerror=i,u.onload=o,document.head.insertBefore(u,document.head.firstElementChild)}({url:r,attributes:o,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'.concat(r,'" failed to load.')))}})}))}({url:u},t).then((function(){var e=o(a);if(e)return e;throw new Error("The window.".concat(a," global variable is not available."))}))}function o(e){return window[e]}function i(e,t){if("object"!=typeof e||null===e)throw new Error("Expected an options object.");if(void 0!==t&&"function"!=typeof t)throw new Error("Expected PromisePonyfill to be a function.")}
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Pay=t()}(this,(function(){"use strict";function e(e,t,n,r){return new(n||(n=Promise))((function(o,i){function u(e){try{a(r.next(e))}catch(e){i(e)}}function c(e){try{a(r.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(u,c)}a((r=r.apply(e,t||[])).next())}))}function t(e,t){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(a){return function(c){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,r=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],r=0}finally{n=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,a])}}}function n(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function r(e,t){if(i(e,t),"undefined"==typeof window)return t.resolve(null);var r=e.sdkBaseURL,u="",c=window.location.hostname;u=r||(["localhost","dev","staging"].some((function(e){return window.location.hostname.includes(e)}))?"https://js.dev.pay.com/v1.js":c.includes(".sandbox.")?"https://js.sandbox.pay.com/v1.js":"https://js.pay.com/v1.js");var a="Pay",s=o(a);return function(e,t){var r=document.querySelector('script[src="'.concat(e,'"]'));if(null===r)return null;var o=n(e,t),i=Object.assign({},r.dataset);if(delete i.uidAuto,Object.keys(i).length!==Object.keys(o.dataset).length)return null;var u=!0;return Object.keys(i).forEach((function(e){i[e]!==o.dataset[e]&&(u=!1)})),u?r:null}(u)&&s?t.resolve(s):function(e,t){i(e,t);var r=e.url,o=e.attributes;if("string"!=typeof r||0===r.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!=typeof o)throw new Error("Expected attributes to be an object.");return new t((function(e,t){return"undefined"==typeof window?e():function(e){var t=e.url,r=e.attributes,o=e.onSuccess,i=e.onError,u=n(t,r);u.onerror=i,u.onload=o,document.head.insertBefore(u,document.head.firstElementChild)}({url:r,attributes:o,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'.concat(r,'" failed to load.')))}})}))}({url:u},t).then((function(){var e=o(a);if(e)return e;throw new Error("The window.".concat(a," global variable is not available."))}))}function o(e){return window[e]}function i(e,t){if("object"!=typeof e||null===e)throw new Error("Expected an options object.");if(void 0!==t&&"function"!=typeof t)throw new Error("Expected PromisePonyfill to be a function.")}return{com:function(n,o){return void 0===o&&(o=function(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}()),e(void 0,void 0,void 0,(function(){var e;return t(this,(function(t){switch(t.label){case 0:return[4,r(n,o)];case 1:if(!(e=t.sent()))throw new Error("Wrong script URL provided");return[2,e.com(n)]}}))}))}}}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pay-com/js",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "ISC",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"module": "lib/index.esm.js",
|
|
10
10
|
"types": "lib/index.d.ts",
|
|
11
11
|
"publishConfig": {
|
|
12
|
-
"registry": "https://
|
|
12
|
+
"registry": "https://npm.pkg.github.com"
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
15
|
"lib/*.js",
|