Vue-stripe-better-elements
Breaking changes in v2.0.0 (18/09/2019)
Version 2.0.0, released on September 18 2019, introduced some breaking changes:
- A new prop
elsOptions
has been introduced to enable passing options to the underlyingstripe.elements()
method - The
options
prop has been renamed toelOptions
to preserve naming consistency
What?
vue-stripe-elements, but different.
Why?
I needed Iban support, not provided by vue-stripe-elements
Moreover vue-stripe-elements, prevents
you from using multiple <stripe-elements/>
components on the same page, as there is only one instance of the createToken
and
createSource
methods needed to further process payment.
Anyway, I forked vue-stripe-elements and
added scoped slots and made
createToken
and createSource
methods accessible per component.
How?
Install the package:
// if your one of the cool kidz:
yarn add vue-stripe-better-elements
// or if you're old school:
npm i vue-stripe-better-elements
Make sure you include the Stripe.js library somewhere in your page
You should be good to go!
What you get for free:
The library exports several properties, but you will mainly use:
-
The
StripeElement
component, that calls the Stripe.js library under the hood and display the stripe Element matching thetype
props:<stripe-element type="card" /><stripe-element type="iban" /> -
A
Stripe
object with the following structure:components: /* list of instanciated components*/{// return the component matching type and key}
Each component looks like this:
type: 'card' // element type (card, iban...) key: 'pk_test_xxxx' // the stripe key used for this component, element: /*..*/ // the stripe element created by the Stripe library, elements: /*..*/ // the stripe elements created by the Stripe library, createToken: fn // the element's createToken function createSource: fn // the element's createSource function retrieveSource: fn // the element's retrieveSource function
Component props:
Breaking changes in v2.0.0 (18/09/2019):
-
type (required):
A string containing a stripe Element type. Currently accepts one of the following:
card
,iban
,cardNumber
,cardExpiry
,cardCvc
-
stripe:
Your stripe public key (
pk_test_xxxxxxxxxxxxxxxxxxxxxxxx
) or a stripe instance. -
elOptions
A stripe Element option object used to create the current element. For example, the Iban element needs a
{supportedCountries: ['SEPA']}
option object. Practically, it will be passed as theoption
parameter in the call toelements.create('iban', options)
See the Stripe documentation for further information. -
elsOptions
An object that will be used to create an instance of
elements
, which manages a group of Elements. You can use this to change the locale of your component (ie: set it to{ locale: 'de' }
to switch the current component to German. More information on the Stripe documentation -
stripeOptions
A object to create an instance of the Stripe object. Attention : Please note that this option will overwrite any custom
elsOptions
defined. ie: if you set your locales via this option, you won't be able to set your locale per component via ``elsOptions.
Documentation for v1.0.x [deprecated]
-
options
A stripe Element options to instanciate the current element. For example, the Iban element needs a
{supportedCountries: ['SEPA']}
option object. -
stripeOptions
STFU & Show me the code
There are two ways to use the library:
Using Scoped Slots
<!-- stripe Iban element --> Pay by IBAN <!-- stripe Card element --> Pay by Card
Using global Stripe object
If you need to display the payment button somewhere else in your page, then this is for you:
<!-- stripe Iban element --> <!-- stripe Card element --> Pay by Card Pay by IBAN
Example
You will find an example in the example
folder (how original).
git clone https://github.com/Cl3MM/vue-stripe-better-elements.git
cd example
yarn global add @vue/cli-service-global
echo "VUE_APP_STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxx" > .env
yarn serve
Then, point your browser to the URL displayed in your terminal.
Rant
Not carefully tested, use at your own risks.
If you find a bug, make a PR. If you find more bugs, make more PR.
Don't open an issue asking for unit tests. If you need tests, write a PR.