npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@winry/vue-stripe-checkout

v3.5.17

Published

Vue plugin for Stripe checkout.

Downloads

7

Readme

Black Lives Matter

#BlackLivesMatter!

https://blacklivesmatter.com/

Black Lives Matter Movement Resources


Announcement

Read here

Financial Contributors on Open Collective npm bundle size npm GitHub Workflow Status saythanks

Welcome to the Vue Stripe Checkout 3!

This project is now available in Open Collective. I would really appreciate if you guys would check it out. Also, if you like this project kindly give it a star, or consider following me on GitHub. Thanks! :heart:

Screen Shot This screenshot is an example of Stripe Checkout

LEGACY

Old version (version 2) is still available here.

Table of Contents

Nuxt Demo

  • Code - https://github.com/jofftiquez/vue-stripe-checkout-nuxt-demo
  • SPA Demo on Firebase Hosting - https://vue-stripe-checkout-nuxt-demo.web.app
  • SSR Demo on Heroku - https://vue-stripe-checkout-nuxt-demo.herokuapp.com

Demo

Live Demo

Install

yarn add vue-stripe-checkout
npm install vue-stripe-checkout

Vue Stripe Checkout

Stripe's new Checkout.

Props

See Checkout documentation.

<template>
  <stripe-checkout
    ref="checkoutRef"
    :pk="publishableKey"
    :items="items"
    :successUrl="successUrl"
    :cancelUrl="cancelUrl"
  >
    <template slot="checkout-button">
      <button @click="checkout">Shut up and take my money!</button>
    </template>
  </stripe-checkout>
</template>

<script>
import { StripeCheckout } from 'vue-stripe-checkout';
export default {
  components: {
    StripeCheckout
  },
  data: () => ({
    loading: false,
    publishableKey: process.env.PUBLISHABLE_KEY,
    items: [
      {
        sku: 'sku_FdQKocNoVzznpJ', 
        quantity: 1
      }
    ],
    successUrl: 'your-success-url',
    cancelUrl: 'your-cancel-url',
  }),
  methods: {
    checkout () {
      this.$refs.checkoutRef.redirectToCheckout();
    }
  }
}
</script>

Vue Stripe Elements

Elements options.

| Props | Description | | ---- | ----------- | | stripeAccount | For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account. | | apiVersion | Override your account's API version. | | locale | A locale used to globally configure localization in Stripe. Setting the locale here will localize error strings for all Stripe.js methods. It will also configure the locale for Elements and Checkout. Default is auto (Stripe detects the locale of the browser). | | styleObject | The custom style object |

| Slots | Description | | ----- | ----------- | | card-element | Slot for mounting custom elements. See | | card-errors | Slot for mounting custom errors |

Create custom Stripe form using Stripe Elements.

Docs for additional Stripe Charge Object options like amount, description, currenct, etc.

<template>
  <div>
    <stripe-elements
      ref="elementsRef"
      :pk="publishableKey"
      :amount="amount"
      locale="de"
      @token="tokenCreated"
      @loading="loading = $event"
    >
    </stripe-elements>
    <button @click="submit">Pay ${{amount / 100}}</button>
  </div>
</template>

<script>
import { StripeElements } from 'vue-stripe-checkout';
export default {
  components: {
    StripeElements
  },
  data: () => ({
    loading: false,
    amount: 1000,
    publishableKey: process.env.PUBLISHABLE_KEY, 
    token: null,
    charge: null
  }),
  methods: {
    submit () {
      this.$refs.elementsRef.submit();
    },
    tokenCreated (token) {
      this.token = token;
      // for additional charge objects go to https://stripe.com/docs/api/charges/object
      this.charge = {
        source: token.id,
        amount: this.amount, // the amount you want to charge the customer in cents. $100 is 1000 (it is strongly recommended you use a product id and quantity and get calculate this on the backend to avoid people manipulating the cost)
        description: this.description // optional description that will show up on stripe when looking at payments
      }
      this.sendTokenToServer(this.charge);
    },
    sendTokenToServer (charge) {
      // Send to charge to your backend server to be processed
      // Documentation here: https://stripe.com/docs/api/charges/create
  
    }
  }
}
</script>

Stripe Sessions

This section is only more of a description of how the session flow should go.

The flow: Client -> Backend -> Client for checkout use.

  1. On the client side, prepare all the items, or subscription that the user wants to pay.
  2. Send these information to your backend to create a stripe session. See doc.
  3. Return the session id you just created to the client.
  4. Use that session id from your backend and pass it to stripe-checkout, like so:
<stripe-checkout
  ref="sessionRef"
  :pk="publishableKey"
  :session-id="sessionId"
>
  <template slot="checkout-button">
    <v-btn 
      @click="$refs.sessionRef.redirectToCheckout()"
      color="#42b883"
      large
      dark
    >Subscribe</v-btn>
  </template>
</stripe-checkout>

You'll notice that when using sessions, you'll only need the session-id. This is because the session is the representation of all of the information about the payment to done.

FAQs

Demos & Examples

When the SKU items has been created, you can now use the vue-stripe-checkout component to create a client-only one-time payment.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

SPECIAL THANKS TO THE FOLLOWING SPONSOR(S):

Made with :heart: by Jofferson Ramirez Tiquez