@pay-com/js 1.1.0 → 1.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Pay.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+<h1 align="center">Pay Components JS Package</h1>
+
+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.
+
+## Installation
+
+To include Pay Components in your project, either install it using `npm i @pay-com/js`, or use our CDN:
+
+```html
+<script type="text/javascript" src="https://js.pay.com/v1"></script>
+```
+
+## Get Started
+
+### Initialize Pay
+
+To initialize Pay, call `Pay.com()` with your unique merchant id:
+
+```javascript
+const pay = await Pay.com({ identifier: 'merchant_id' })
+```
+
+### Initialize checkout object
+
+In order to be able to start accepting payments, intialize the checkout object:
+
+```javascript
+const checkout = pay.checkout({
+  clientSecret: 'payment_session_client_secret',
+  onSuccess: payment => {
+    // Can be used instead of checkout event listeners
+  },
+  onFailure: error => {
+    // Can be used instead of checkout event listeners
+  }
+})
+```
+
+You now have a checkout object with which you can render a payment form, validate it, and subscribe to events.
+
+To subscribe to different events, use the `checkout.on` function:
+
+```javascript
+checkout.on(checkout.EVENT_TYPES.PAYMENT_SUCCESS, payment => {
+  // Do something on success
+})
+checkout.on(checkout.EVENT_TYPES.PAYMENT_PROCESSING, () => {
+  // Do something on payment processing
+})
+checkout.on(checkout.EVENT_TYPES.PAYMENT_FAILURE, error => {
+  // Do something on error
+})
+```
+
+### Render Payment Form
+
+In order to render a payment form, create an empty div which the form will be rendered in, e.g.:
+
+```html
+<div id="paycom_checkout"></div>
+```
+
+Once you have the div, call the `render` function:
+
+```javascript
+checkout.universal({
+  container: '#paycom_checkout'
+})
+```
+
+Thats it! You are now ready to securely accept payments in your website.
+
+### Manual validation and submission
+
+If you wish to render the fields without a submission button for more control, you have to pass the `submitButton: false` option to the `toggles` key under the `universal` function:
+
+```javascript
+checkout.universal({
+  container: '#paycom_checkout',
+  toggles: {
+    submitButton: false
+  }
+})
+```
+
+Now the form will render without a button. To validate & submit the form, first create a button:
+
+```html
+<button id="pay_button">Pay now!</button>
+```
+
+Then, create a click listener on the button:
+
+```javascript
+document.getElementById('pay_button').addEventListener('click', async () => {
+  // Validate all fields before submitting
+  const { valid } = checkout.validate()
+
+  // If the payment form is valid, continue with the payment
+  if (valid) {
+    // Can also get the payment from return value of submit function.
+    const payment = await checkout.submit()
+  }
+})
+```

package/lib/index.d.ts

@@ -302,6 +302,8 @@ type ValidateFn = (frameType?: ELEMENT_TYPES) => Promise<FormattedErrors | void>
 type ResetFn = (frameType?: ELEMENT_TYPES) => Promise<void>
 
 type UpdateTransactionDetailsOpts = {
+  successUrl?: string
+  failureUrl?: string
   consumer?: {
     firstName?: string
     lastName?: string

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@pay-com/js",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "",
-  "keywords": [],
-  "license": "ISC",
-  "author": "",
+  "keywords": [
+    "payments"
+  ],
+  "license": "MIT",
+  "author": "Pay.com",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pay-com/js.git"
+  },
   "files": [
     "lib/*.js",
     "lib/*.d.ts"
@@ -30,7 +36,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
     "typescript": "^4.4.4"