@ponchopay/pp-browser 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 pp-payment
+
+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,106 @@
+# pp-browser
+
+Tools to integrate PonchoPay on the browser
+
+## Usage
+
+There are 2 ways to use this package:
+
+### HTML import
+
+You can import the compiled file directly from our servers:
+
+```html
+<script
+  type="module"
+  src="https://pay.ponchopay.com/api/integration/generic/asset/pp-browser.min.js"
+></script>
+```
+
+After this HTML declaration, you will be able to use the web component.
+
+### NPM installation
+
+You can install the module from `npm`:
+
+```bash
+npm i @ponchopay/pp-browser
+```
+
+After this command, you can import the web componet like this:
+
+```js
+import '@ponchopay/pp-browser';
+```
+
+## Using the web component
+
+The web component can be used by declaring it in HTML like this:
+
+```html
+<pp-payment {properties}>{text}</pp-payment>
+```
+
+The following the list of accepted properties (please, refer to the [official documentation](https://ponchocare.notion.site/PonchoPay-API-integration-04bc3f5220ff4028b0078793bfc03abc) for their meaning):
+
+| Name     | Mandatory |
+| -------- | --------- |
+| token    | Yes       |
+| metadata | Yes       |
+| urn      | Yes       |
+| amount   | Yes       |
+| email    | Yes       |
+| note     | No        |
+
+The component's text is optional being "Pay with PonchoPay" the default text. Feel free to change it as you see fit.
+
+## Considerations
+
+Unfortunately, this web component required `HTMLElement` class to exist which means that it is not suitable for Server Side Rendering applications.
+There are, however, some techniques that can be used to mitigate this.
+
+### SvelteKit
+
+When using SvelteKit, the component import can be pushed to the `onMount` event:
+
+```svelte
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		await import('@ponchopay/pp-browser');
+	});
+</script>
+
+<pp-payment>It worked!</pp-payment>
+```
+
+Alternatively, the route can be made non-ssr by exporting [`export const ssr = false;`](https://kit.svelte.dev/docs/page-options#ssr) in the loader file.
+
+## Development
+
+### Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+### Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in the project.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/src/PpPayment.d.ts

@@ -0,0 +1,19 @@
+export declare class PpPayment extends HTMLElement {
+    private sr;
+    constructor();
+    private redrawContents;
+    set token(value: string);
+    get token(): string;
+    set metadata(value: string);
+    get metadata(): string;
+    set urn(value: string);
+    get urn(): string;
+    set amount(value: string | number);
+    get amount(): string;
+    set email(value: string);
+    get email(): string;
+    set note(value: string);
+    get note(): string;
+    attributeChangedCallback(): void;
+    static get observedAttributes(): string[];
+}

package/dist/src/PpPayment.js

@@ -0,0 +1,88 @@
+import { buildButton, buildForm, buildHiddenInput, buildSlot, buildStyle, } from './utils';
+const PONCHO_PAY = 'https://pay.ponchopay.com/api/integration/generic/initiate';
+const ATTRIBUTES = ['token', 'metadata', 'urn', 'amount', 'email', 'note'];
+const STYLES = [
+    'width: 100%',
+    'background-color: #02C2A0',
+    'white-space: nowrap',
+    'text-decoration-line: none',
+    'border-radius: .25rem',
+    'box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    'text-align: center',
+    'font-size: 1.25rem',
+    'line-height: 1.75rem',
+    'color: white',
+    'margin-top: .5rem',
+    'margin-bottom: .75rem',
+    'padding: .75rem 1rem',
+    'display: flex',
+    'flex-wrap: nowrap',
+    'align-items: center',
+    'justify-content: space-evenly',
+    'cursor: pointer',
+    'text-transform: none',
+    'box-sizing: border-box',
+    'border-width: 0',
+    'border-style: solid',
+    'border-color: currentColor',
+];
+export class PpPayment extends HTMLElement {
+    constructor() {
+        super();
+        this.sr = this.attachShadow({ mode: 'open' });
+        this.redrawContents();
+    }
+    redrawContents() {
+        this.sr.replaceChildren();
+        this.sr.appendChild(buildForm(PONCHO_PAY, ...ATTRIBUTES.filter(name => { var _a; return ((_a = this.getAttribute(name)) !== null && _a !== void 0 ? _a : '') !== ''; }).map(name => buildHiddenInput(name, this.getAttribute(name))), buildStyle(`button { ${STYLES.join(';')} ${this.getAttribute('style')} } button:active { transform: translate(1px,1px); }`), buildButton(buildSlot('Pay with PonchoPay'))));
+    }
+    set token(value) {
+        this.setAttribute('token', value);
+    }
+    get token() {
+        var _a;
+        return (_a = this.getAttribute('token')) !== null && _a !== void 0 ? _a : '';
+    }
+    set metadata(value) {
+        this.setAttribute('metadata', value);
+    }
+    get metadata() {
+        var _a;
+        return (_a = this.getAttribute('metadata')) !== null && _a !== void 0 ? _a : '';
+    }
+    set urn(value) {
+        this.setAttribute('urn', value);
+    }
+    get urn() {
+        var _a;
+        return (_a = this.getAttribute('urn')) !== null && _a !== void 0 ? _a : '';
+    }
+    set amount(value) {
+        this.setAttribute('amount', String(value));
+    }
+    get amount() {
+        var _a;
+        return (_a = this.getAttribute('amount')) !== null && _a !== void 0 ? _a : '';
+    }
+    set email(value) {
+        this.setAttribute('email', value);
+    }
+    get email() {
+        var _a;
+        return (_a = this.getAttribute('email')) !== null && _a !== void 0 ? _a : '';
+    }
+    set note(value) {
+        this.setAttribute('note', value);
+    }
+    get note() {
+        var _a;
+        return (_a = this.getAttribute('note')) !== null && _a !== void 0 ? _a : '';
+    }
+    attributeChangedCallback() {
+        this.redrawContents();
+    }
+    static get observedAttributes() {
+        return ATTRIBUTES;
+    }
+}
+//# sourceMappingURL=PpPayment.js.map

package/dist/src/PpPayment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PpPayment.js","sourceRoot":"","sources":["../../src/PpPayment.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  buildButton,\n  buildForm,\n  buildHiddenInput,\n  buildSlot,\n  buildStyle,\n} from './utils';\n\nconst PONCHO_PAY = 'https://pay.ponchopay.com/api/integration/generic/initiate';\nconst ATTRIBUTES = ['token', 'metadata', 'urn', 'amount', 'email', 'note'];\nconst STYLES = [\n  'width: 100%',\n  'background-color: #02C2A0',\n  'white-space: nowrap',\n  'text-decoration-line: none',\n  'border-radius: .25rem',\n  'box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)',\n  'text-align: center',\n  'font-size: 1.25rem',\n  'line-height: 1.75rem',\n  'color: white',\n  'margin-top: .5rem',\n  'margin-bottom: .75rem',\n  'padding: .75rem 1rem',\n  'display: flex',\n  'flex-wrap: nowrap',\n  'align-items: center',\n  'justify-content: space-evenly',\n  'cursor: pointer',\n  'text-transform: none',\n  'box-sizing: border-box',\n  'border-width: 0',\n  'border-style: solid',\n  'border-color: currentColor',\n];\n\nexport class PpPayment extends HTMLElement {\n  private sr: ShadowRoot;\n\n  public constructor() {\n    super();\n\n    this.sr = this.attachShadow({ mode: 'open' });\n    this.redrawContents();\n  }\n\n  private redrawContents(): void {\n    this.sr.replaceChildren();\n    this.sr.appendChild(\n      buildForm(\n        PONCHO_PAY,\n        ...ATTRIBUTES.filter(\n          name => (this.getAttribute(name) ?? '') !== ''\n        ).map(name => buildHiddenInput(name, this.getAttribute(name)!)),\n        buildStyle(\n          `button { ${STYLES.join(';')} ${this.getAttribute(\n            'style'\n          )} } button:active { transform: translate(1px,1px); }`\n        ),\n        buildButton(buildSlot('Pay with PonchoPay'))\n      )\n    );\n  }\n\n  public set token(value: string) {\n    this.setAttribute('token', value);\n  }\n\n  public get token(): string {\n    return this.getAttribute('token') ?? '';\n  }\n\n  public set metadata(value: string) {\n    this.setAttribute('metadata', value);\n  }\n\n  public get metadata(): string {\n    return this.getAttribute('metadata') ?? '';\n  }\n\n  public set urn(value: string) {\n    this.setAttribute('urn', value);\n  }\n\n  public get urn(): string {\n    return this.getAttribute('urn') ?? '';\n  }\n\n  public set amount(value: string | number) {\n    this.setAttribute('amount', String(value));\n  }\n\n  public get amount(): string {\n    return this.getAttribute('amount') ?? '';\n  }\n\n  public set email(value: string) {\n    this.setAttribute('email', value);\n  }\n\n  public get email(): string {\n    return this.getAttribute('email') ?? '';\n  }\n\n  public set note(value: string) {\n    this.setAttribute('note', value);\n  }\n\n  public get note(): string {\n    return this.getAttribute('note') ?? '';\n  }\n\n  public attributeChangedCallback(): void {\n    this.redrawContents();\n  }\n\n  public static get observedAttributes() {\n    return ATTRIBUTES;\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/index.js

@@ -0,0 +1,3 @@
+import { PpPayment } from './PpPayment.js';
+window.customElements.define('pp-payment', PpPayment);
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { PpPayment } from './PpPayment.js';\n\nwindow.customElements.define('pp-payment', PpPayment);\n"]}

package/dist/src/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function buildHiddenInput(name: string, value: string): HTMLInputElement;
+export declare function buildForm(action: string, ...elements: HTMLElement[]): HTMLFormElement;
+export declare function buildSlot(fallback: HTMLElement[] | string): HTMLSlotElement;
+export declare function buildButton(children: HTMLElement): HTMLButtonElement;
+export declare function buildStyle(styles: string): HTMLStyleElement;

package/dist/src/utils.js

@@ -0,0 +1,27 @@
+function buildElement(tag, props, children) {
+    const element = document.createElement(tag);
+    Object.entries(props !== null && props !== void 0 ? props : {}).forEach(([key, value]) => element.setAttribute(key, value));
+    if (typeof children === 'string') {
+        element.innerText = children;
+    }
+    else if (Array.isArray(children)) {
+        children.forEach(element.appendChild.bind(element));
+    }
+    return element;
+}
+export function buildHiddenInput(name, value) {
+    return buildElement('input', { type: 'hidden', name, value });
+}
+export function buildForm(action, ...elements) {
+    return buildElement('form', { action, method: 'post' }, elements);
+}
+export function buildSlot(fallback) {
+    return buildElement('slot', {}, fallback);
+}
+export function buildButton(children) {
+    return buildElement('button', { type: 'submit' }, [children]);
+}
+export function buildStyle(styles) {
+    return buildElement('style', {}, styles);
+}
+//# sourceMappingURL=utils.js.map

package/dist/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,CACnB,GAAS,EACT,KAA4C,EAC5C,QAAiC;IAEjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CACnD,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CACjC,CAAC;IACF,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAChC,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC9B;SAAM,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAClC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACrD;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,IAAY,EACZ,KAAa;IAEb,OAAO,YAAY,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,SAAS,CACvB,MAAc,EACd,GAAG,QAAuB;IAE1B,OAAO,YAAY,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,CAAC;AACpE,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,QAAgC;IACxD,OAAO,YAAY,CAAC,MAAM,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,QAAqB;IAC/C,OAAO,YAAY,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAc;IACvC,OAAO,YAAY,CAAC,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC","sourcesContent":["function buildElement<TTag extends keyof HTMLElementTagNameMap>(\n  tag: TTag,\n  props?: Partial<HTMLElementTagNameMap[TTag]>,\n  children?: HTMLElement[] | string\n): HTMLElementTagNameMap[TTag] {\n  const element = document.createElement(tag);\n  Object.entries(props ?? {}).forEach(([key, value]) =>\n    element.setAttribute(key, value)\n  );\n  if (typeof children === 'string') {\n    element.innerText = children;\n  } else if (Array.isArray(children)) {\n    children.forEach(element.appendChild.bind(element));\n  }\n  return element;\n}\n\nexport function buildHiddenInput(\n  name: string,\n  value: string\n): HTMLInputElement {\n  return buildElement('input', { type: 'hidden', name, value });\n}\n\nexport function buildForm(\n  action: string,\n  ...elements: HTMLElement[]\n): HTMLFormElement {\n  return buildElement('form', { action, method: 'post' }, elements);\n}\n\nexport function buildSlot(fallback: HTMLElement[] | string): HTMLSlotElement {\n  return buildElement('slot', {}, fallback);\n}\n\nexport function buildButton(children: HTMLElement): HTMLButtonElement {\n  return buildElement('button', { type: 'submit' }, [children]);\n}\n\nexport function buildStyle(styles: string): HTMLStyleElement {\n  return buildElement('style', {}, styles);\n}\n"]}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@ponchopay/pp-browser",
+  "version": "1.0.2",
+  "description": "Tools to integrate PonchoPay on the browser",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "dist/src/index.d.ts",
+      "import": "dist/src/index.js"
+    },
+    "./pp-payment": {
+      "types": "dist/src/PpPayment.d.ts",
+      "import": "dist/src/PpPayment.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/src"
+  ],
+  "scripts": {
+    "clean": "rimraf build dist",
+    "start": "npm run clean && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "npm run clean && tsc && rollup -c",
+    "prepublish": "npm run clean && tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@open-wc/eslint-config": "^9.2.1",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.29.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ponchocare/pp-browser.git"
+  },
+  "keywords": [
+    "ponchopay",
+    "web",
+    "component",
+    "tools"
+  ],
+  "author": "info@ponchopay.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ponchocare/pp-browser/issues"
+  },
+  "homepage": "https://github.com/ponchocare/pp-browser#readme",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": "off"
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}