Tools to integrate PonchoPay on the browser
There are 2 ways to use this package:
You can import the compiled file directly from our servers:
<script
src="https://pay.ponchopay.com/api/integration/generic/asset/pp-browser.<version>.min.js"
></script>
After this HTML declaration, you will be able to use the web component.
You can install the module from npm
:
npm i @ponchopay/pp-browser
After this command, you can import the web componet like this:
import '@ponchopay/pp-browser';
The web component can be used by declaring it in HTML like this:
<pp-payment {properties}>{text}</pp-payment>
The following the list of accepted properties (please, refer to the official documentation for their meaning):
Name | Mandatory |
---|---|
token | Yes |
metadata | Yes |
urn | Yes |
amount | Yes |
Yes | |
note | No |
expiry | No |
The component's text is optional being "Pay with PonchoPay" the default text. Feel free to change it as you see fit.
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.
When using SvelteKit, the component import can be pushed to the onMount
event:
<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;
in the loader file.
To scan the project for linting and formatting errors, run
npm run lint
To automatically fix linting and formatting errors, run
npm run format
To test the project for bugs, run
npm run test
For most of the tools, the configuration is in the package.json
to reduce the amount of files in the project.
npm start
To run a local development server that serves the basic demo located in demo/index.html