@stripe-elements/stripe-elements

Maintainers

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

Installation

Components

<stripe-payment-sheet>

Provide a Stripe Card form like a iOS/Android payment sheet.

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

<stripe-element-modal>

Simple modal for <stripe-payment-sheet>

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

stripe-payment-request-button

(Beta) Payment Request button component

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

Usage

HTML

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

      <stripe-element-modal open="true">
          <stripe-payment-sheet
            publishable-key="pk_test_xxxxx"
            show-label="false"
            intent-client-secret="pi-xxxxxx"
            should-use-default-form-submit-action="false"
          ></stripe-payment-sheet>
      </stripe-element-modal>
    
    <script>
        customElements.whenDefined('stripe-payment-sheet')
            .then(() => {
                const elements = document.getElementsByTagName('stripe-payment-sheet')
                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-element-modal');

        /**
         * Remove Mounted Stripe Elements when the modal has been closed
         **/
        customElements.whenDefined('stripe-element-modal')
            .then(() => {
                modalElement.addEventListener('close', () => {
                    modalElement.innerHTML = ''
                })
            })
        
        async function launchStripePaymentSheet (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-payment-sheet');
            modalElement.appendChild(stripeElement);
            targetElement.appendChild(modalElement);

            /**
             * Wait for defining these components
             **/
            await customElements.whenDefined('stripe-element-modal')
            await customElements.whenDefined('stripe-payment-sheet')
            
            /**
             * 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