https://github.com/fdom92/stencil-payment
Payment request API implementation in Stenciljs
https://github.com/fdom92/stencil-payment
component payment stencil stenciljs typescript web
Last synced: 5 months ago
JSON representation
Payment request API implementation in Stenciljs
- Host: GitHub
- URL: https://github.com/fdom92/stencil-payment
- Owner: Fdom92
- License: mit
- Created: 2017-09-08T05:59:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-25T17:45:06.000Z (over 6 years ago)
- Last Synced: 2024-11-14T18:52:29.785Z (5 months ago)
- Topics: component, payment, stencil, stenciljs, typescript, web
- Language: HTML
- Size: 4.71 MB
- Stars: 29
- Watchers: 3
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# wc-payment
wc-payment is a web component built with [Stencil](https://stenciljs.com/) that allows you to use the [Payment Request API](https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/).
## Getting Started
To try this component:
```bash
git clone [email protected]:Fdom92/stencil-payment.git
cd my-app
git remote rm origin
```
and run:
```bash
npm install
npm start
```
## Using this component
### Script tag
- Put `` in the head of your index.html
- Then you can use the element like this:
```html
Pay
```
### Node Modules
- Run `npm install stencil-payment --save`
- Put a script tag similar to this `
Pay
</wc-payment>
```
## Parameters
### methodData
You need to pass the list of payment methods:
```js
var methodData = [
{
supportedMethods: ["visa", "mastercard"]
}
]
```
At the moment payment api only accept this cards:
- amex
- diners
- discover
- jcb
- maestro
- mastercard
- unionpay
- visa
### details
You need to pass the details of the transaction, an object with displayItems and the total object with the final value:
```js
var details = {
displayItems: [
{
label: "Original donation amount",
amount: { currency: "USD", value : "65.00" }, // US$65.00
},
{
label: "Friends and family discount",
amount: { currency: "USD", value : "-10.00" }, // -US$10.00
pending: true // The price is not determined yet
}
],
total: {
label: "Total",
amount: { currency: "USD", value : "55.00" }, // US$55.00
}
}
```
### options
You can also get the email address, phone number or name of a user when configuring the options object:
```js
var options = {
requestShipping: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true
};
```
## Events
### paymentFailed
You can listen to this event to know when the payment was unsucessfull:
```js
element = document.querySelector('wc-payment');
element.addEventListener("paymentFailed", () => {});
```
### paymentSucceeded
You can listen to this event to know when the payment was sucessfull:
```js
element = document.querySelector('wc-payment');
element.addEventListener("paymentSucceeded", () => {});
```
## Methods
### show
You can show the payment request anytime with the `show` method like this:
```js
element = document.querySelector('wc-payment');
element.show();
```
This way you can bind this function to your own pay button or wherever you want.
### abort
You can abort the transaction with the `abort` method anytime due to some error.
```js
element = document.querySelector('wc-payment');
element.abort();
```