Payment request API implementation in Polymer
<payment-request> API component
Payment Request API web component build with using Polymer. You can take a look the demo page to see how it works.
Note: It isn't supported by all browser, check Payment Request API browser support.
Installation
Install the component using Bower:
$ bower install payment-request --save
Or download as ZIP.
Usage
-
Import Web Components' polyfill and Payment Request API shim:
<script src="bower_components/webcomponentsjs/webcomponents.js"></script> <script src="https://storage.googleapis.com/prshim/v1/payment-shim.js"></script>
-
Import Custom Elements:
<link rel="import" href="bower_components/payment-request/payment-request-all.html">
-
Start using it!
<payment-request label="Total" currency="EUR"> <payment-method slot="method" supported='["basic-card"]' data='{ "supportedNetwork": ["amex", "mastercard", "visa" ], "supportedTypes": ["debit", "credit"] }'></payment-method> <payment-item label="Item 1" currency="EUR" value="1337"></payment-item> <button id="buyButton">Buy</button> </payment-request>
-
Validate payment data and complete payment request.
function onLastResponseChange(evt) { var paymentResponse = evt.detail.value; // Make your request to server for a real purchase. // Complete the paymnet. // More info: https://www.w3.org/TR/payment-request/#complete-method paymentResponse.complete('success'); } var paymentRequestElement = document.querySelector('payment-request'); paymentRequestElement.addEventListener('last-response-change', onLastResponseChange);
Viewing component docs & demo
First, make sure you have the polymer-serve installed and serve the component:
$ polyserve --protocol https/1.1
Running Tests
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test
to run your application's test suite locally.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
History
Credits
License
Install
Framework Support
Browser Independent
Install with
Run the above npm command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 2.0.0
Dependencies
- @polymer/polymer#^3.0.0
- @polymer/iron-selector#^3.0.0