<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

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

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-method>
   		<payment-item label="Item 1" currency="EUR" value="1337"></payment-item>
   		<button id="buyButton">Buy</button>
   	</payment-request>
   

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

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

History

Credits

• Payment Request API
• Payment Request API: an Integration Guide

License

MIT License