stripe-pwa-elements

Maintainers

| Maintainer | GitHub | Social | | --- | --- | --- | | Hidetaka Okamoto | Hidetaka Okamoto | @hide__dev | | Masaki Hirano | hirano | @maki_saki | | Masahiko Sakakibara | rdlabo | @rdlabo |

Installation

Components

<stripe-card-element>

Provide a Stripe Card form using Stripe Card Elements.

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-card-element/readme.md

<stripe-modal>

Simple modal wrapper for payment components.

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-modal/readme.md

<stripe-card-element-modal>

Combined component: Card Element with Modal wrapper.

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-card-element-modal/readme.md

<stripe-payment-request-button>

(Beta) Payment Request API button component (Apple Pay / Google Pay).

https://github.com/stripe-elements/stripe-elements/blob/main/src/components/stripe-payment-request-button/readme.md

Usage

HTML

      <div id="result"></div>

      <stripe-modal open="true">
          <stripe-card-element
            publishable-key="pk_test_xxxxx"
            show-label="false"
            intent-client-secret="pi-xxxxxx"
            should-use-default-form-submit-action="false"
          ></stripe-card-element>
      </stripe-modal>

    <script>
        customElements.whenDefined('stripe-card-element')
            .then(() => {
                const elements = document.getElementsByTagName('stripe-card-element')
                if (elements.length < 1) return;
                const element = elements[0]
                element.addEventListener('formSubmit', async props => {
                const {
                    detail: { stripe, cardNumber, event },
                } = props;
                const result = await stripe.createPaymentMethod({
                    type: 'card',
                    card: cardNumber,
                });
                element.updateProgress('success');

                const resultElement = document.getElementById('result')
                resultElement.innerHTML = `<pre><code>${JSON.stringify(result,null,2)}</code></pre>`
            });

        })
    </script>

JavaScript

        const stripePublishableAPIKey = 'YOUR_STRIPE_PUBLISHABLE_API_KEY'

        const form = document.getElementById('open-modal-form')
        const resultElement = document.getElementById('result')
        const errorMessage = document.getElementById('error-message')
        const targetElement = document.getElementById('stripe');
        const modalElement = document.createElement('stripe-modal');

        /**
         * Remove Mounted Stripe Elements when the modal has been closed
         **/
        customElements.whenDefined('stripe-modal')
            .then(() => {
                modalElement.addEventListener('close', () => {
                    modalElement.innerHTML = ''
                })
            })

        async function launchStripeCardElement (paymentIntentClientSecret) {
            if (!stripePublishableAPIKey) {
                errorMessage.innerText = 'Stripe Publishable API Key is required'
                return
            }
            if (!paymentIntentClientSecret) {
                errorMessage.innerText = 'Payment Intent Client Secret is required'
                return
            }

            /**
             * Define and launch Web Components
             **/
            const stripeElement = document.createElement('stripe-card-element');
            modalElement.appendChild(stripeElement);
            targetElement.appendChild(modalElement);

            /**
             * Wait for defining these components
             **/
            await customElements.whenDefined('stripe-modal')
            await customElements.whenDefined('stripe-card-element')

            /**
             * Load Stripe Client
             **/
            await stripeElement.initStripe(stripePublishableAPIKey)


            /**
             * Set the payment intent client secret
             **/
            stripeElement.setAttribute('intent-client-secret', paymentIntentClientSecret)

            /**
             * Disable default form submit event
             **/
            stripeElement.setAttribute('should-use-default-form-submit-action', false);

            /**
             * Set custom form submit event manually
             **/
            stripeElement.addEventListener('formSubmit', async props => {
              const {
                detail: { stripe, cardNumber, event },
              } = props;
              const result = await stripe.createPaymentMethod({
                type: 'card',
                card: cardNumber,
              });
              resultElement.innerHTML = `<pre><code>${JSON.stringify(result,null,2)}</code></pre>`
              stripeElement.updateProgress('success');
              await modalElement.closeModal()
            });

            /**
             * Open modal
             **/
            modalElement.setAttribute('open', true)
        })

Contribution

Getting Started

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test