Payment request API implementation in Polymer

Published on

<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.


Install the component using Bower:

$ bower install payment-request --save

Or download as ZIP.


  1. Import Web Components' polyfill and Payment Request API shim:

    	<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    	<script src=""></script>
  2. Import Custom Elements:

    	<link rel="import" href="bower_components/payment-request/payment-request-all.html">
  3. 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-item label="Item 1" currency="EUR" value="1337"></payment-item>
    		<button id="buyButton">Buy</button>
  4. 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:
    	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.


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D




MIT License


Link to this version
ImportedReleased 06 September 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.2.2)Polymer 3 (2.0.0)
Browser Independent
Install with
bower install --save jorgecasar/payment-request"#1.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.1


  • polymer#Polymer/polymer#1.9 - 2
  • iron-selector#PolymerElements/iron-selector#1 - 2