stencil-payment-test
v1.0.0
Published
Web Component built with Stencil to use Payment API
Downloads
7
Readme
wc-payment
wc-payment is a web component built with Stencil that allows you to use the Payment Request API.
Getting Started
To try this component:
git clone [email protected]:Fdom92/stencil-payment.git
cd my-app
git remote rm origin
and run:
npm install
npm start
Using this component
Script tag
- Put
<script src='https://unpkg.com/stencil-payment@latest/dist/payment.js'></script>
in the head of your index.html - Then you can use the element like this:
<wc-payment>
Pay
</wc-payment>
Node Modules
- Run
npm install stencil-payment --save
- Put a script tag similar to this
<script src='node_modules/stencil-payment/dist/payment.js></script>
in the head of your index.html - Then you can use the element like this:
<wc-payment>
Pay
</wc-payment>
In a stencil-starter app
- Run
npm install stencil-payment --save
- Add
{ name: 'stencil-payment' }
to your collections - Then you can use the element like this:
<wc-payment>
Pay
</wc-payment>
Parameters
methodData
You need to pass the list of payment methods:
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:
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:
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:
element = document.querySelector('wc-payment');
element.addEventListener("paymentFailed", () => {});
paymentSucceeded
You can listen to this event to know when the payment was sucessfull:
element = document.querySelector('wc-payment');
element.addEventListener("paymentSucceeded", () => {});
Methods
show
You can show the payment request anytime with the show
method like this:
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.
element = document.querySelector('wc-payment');
element.abort();