Billplz Button to create a bill

You have a Billplz account. You want to start charging people on that Billplz account of yours, but you don't know how to start. This package will help you.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

1. Get a billplz account at www.billplz.com
2. Go to 'Billing' and create a collection. Get the collection ID number, it should be 8 characters with a mixture of alphabets and numbers. Example: abc123ab
3. Go to 'Settings'. Under Keys & Integration, get your Billplz API key
4. Once this is done, all you need to do is just install this package into your project and use it (see next section)

Using this component

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/@razmans/[email protected]/billplzbtn/billplzbtn.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm i @razmans/billplzbtn --save

• Put a script tag similar to this <script type="module" src="node_modules/@razmans/billplzbtn/dist/billplzbtn/billplzbtn.esm.js"></script><script nomodule="" src="node_modules/@razmans/billplzbtn/dist/billplzbtn/billplzbtn.js"></script> in the head of your index.html

• Then you can use the element anywhere in your template, JSX, html etc

• Just add the following into your html. Place it anywhere you want:

<billplz-btn uid="your BillPlz API Key" collection_id="your 8 digits collection ID" description="Description of the transaction" email="customer's email" amount="100" name="customer's name" callback_url="http://www.yahoo.com" redirect_url="http://www.google.com" ></billplz-btn>

| Parameters | Description| |---------------|------------------------------------------------------------------------------------------------------------------------------| | uid | Enter your billplz API key | | collection_id | Your 8 digit collection ID | | description | Description of the transaction | | email | Customer's email | | amount | The number you want to charge x 100. Example RM1, place amount as '100' | | name | Customer's name | | callback_url | Your server that you want billplz to callback upon success or failure of transaction. Contact me for more details to explain | | redirect_url | Where to send your users after billplz transaction is done |