Directory

← Back

paperfire-stripe

A webcomponent to take credit cards and use Stripe's api to take payments

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/PaperfireElements/paperfire-stripe on 2019-05-22 ]

<paperfire-stripe>

Published on webcomponents.org

A stripe payment element

This element is in early development

This is a pretty simple wrapper for the Stripe Checkout flow, so it should be ready to use. But I haven't done any rigorous testing yet so please handle with care. Thanks :)

Demo

<div style="height: 400px;"></div>
<span>cost: $1,000,000</span>
<paper-button id="checkoutBtn" raised>Checkout</paper-button>
<paperfire-stripe id="stripe" amount="100000000" name="paperfire-stripe demo" description="Something really cool"></paperfire-stripe>
<script>
    document.getElementById('checkoutBtn').addEventListener('click', function () {
        this.dispatchEvent(
            new CustomEvent('paperfire-stripe-checkout', {
                bubbles: true,
                composed: true
            })
        );
    });
</script>

Usage

To open Stripe Checkout you can fire a custom event paperfire-stripe-checkout

    this.dispatchEvent(
        new CustomEvent('paperfire-stripe-checkout', {
          bubbles: true,
          composed: true
          // the stripe checkout config can be passed in
          detail: {
              email: evasmith@smith.com,
              amount: 10000
          }
        })
    );

Or use the open method

 this.$.stripe.open();

 // the stripe checkout config can be passed in
 this.$.stripe.open({
     email: johnsmith@smith.com
     amount: 10000
 });

Editing the element

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

Released
2017-10-27
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

paperfire-stripe - Vaadin Add-on Directory

A webcomponent to take credit cards and use Stripe's api to take payments paperfire-stripe - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/PaperfireElements/paperfire-stripe](https://github.com//PaperfireElements/paperfire-stripe/blob/v2.1.1/README.md) on 2019-05-22 ]** # \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/paperfireElements/paperfire-stripe) A stripe payment element ## This element is in early development This is a pretty simple wrapper for the Stripe Checkout flow, so it should be ready to use. But I haven't done any rigorous testing yet so please handle with care. Thanks :) ## Demo ```html
cost: $1,000,000 Checkout ``` ## Usage To open Stripe Checkout you can fire a custom event `paperfire-stripe-checkout` ``` this.dispatchEvent( new CustomEvent('paperfire-stripe-checkout', { bubbles: true, composed: true // the stripe checkout config can be passed in detail: { email: evasmith@smith.com, amount: 10000 } }) ); ``` Or use the `open` method ``` this.$.stripe.open(); // the stripe checkout config can be passed in this.$.stripe.open({ email: johnsmith@smith.com amount: 10000 }); ``` # Editing the element ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests ``` $ polymer test ``` Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
Online