vue-stripe-checkout

by jofftiquez

jofftiquez /vue-stripe-checkout

A vue plugin for Stripe checkout.

520 Stars 78 Forks Last release: Not found MIT License 350 Commits 57 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Black Lives Matter

#BlackLivesMatter!

https://blacklivesmatter.com/

Black Lives Matter Movement Resources


Vue Stripe Checkout

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

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.

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.

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:
  

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.