VueSaga: Stripe + Vue integration

Seamlessly integrate Stripe payments and card handling into your Vue.js applications with minimal code.

github

Table of Contents

• Features
• Installation
• Usage
• Props
• Events
• Server
• Examples

Features

• Integration with Stripe Elements: Easily embed Stripe Elements for secure payment input forms.
• Integration with Stripe Checkout: Streamline the checkout process using Stripe Checkout for a smooth payment experience.
• Customizable appearance: Customize the appearance of Stripe Elements and Checkout to match your application's design.
• Simplified API interactions: Handle API requests to create payment intents and confirm payments with ease.
• Event-driven architecture: Emit events to notify the parent component about the payment status and provide real-time feedback.

Installation

You can install the VueSaga Library via npm:

npm install vuesaga

Additionally, you need to include the Stripe JavaScript library in your project. Add the following script tag to your index.html file:

<script src="https://js.stripe.com/v3/"></script>

Usage

To use the library in your Vue.js project, follow these steps:

1. Import the desired components:

import { StripeElement, StripeCheckout } from 'vuesaga'

2. Register the components in your Vue component:

components: {
    StripeElement,
    StripeCheckout,
},

3. Define the required props and options for the components:

  data: () => ({
     pk: 'pk_test_xxx',
     options:{
      server_url: 'example.com/api/create-setup',
      amount: 2000 //required for checkout & elements when mode == 'payment'
    }
  })

4. Implement the components in your template:

<template>
    <div>
        <StripeElement :pk="pk" :options="options" @verify="handler" />
        <StripeCheckout :pk="pk" :options="options" @verify="handler" />
    </div>
</template>

5. Implement the event handler for the verify event emitted by the components:

methods:{
  handler(feed) {
    console.log(feed);
 }
}

6. Required for StripeElement ONLY: Trigger the form submission:

  data: () => ({
    btnTaps: 1
  })

... now update your template:

<template>
    <div>
        <StripeElement :pk="pk" :tap="btnTaps" :options="options" @verify="handler" />
        <a-button @click="btnTaps++">Submit</a-button>

        <StripeCheckout :pk="pk" :options="options" @verify="handler" />
    </div>
</template>

Props

Vuesaga accepts the following props:

• pk (String, required): The Stripe publishable key.
• tap (Number, required)[Elements ONLY]: A reactive property that triggers the submission of the payment form when its value changes.
• options (Object, required): An object containing the configuration options for Stripe Elements / Checkount. It includes the following properties:
  • mode (String, default: 'setup'): The mode of the integration, either 'setup' or 'payment'. This determines whether you are setting up a payment method or processing a payment.
  • currency (String, default: 'usd'): The currency to use for the payment.
  • amount (Number, default: 1000): The payment amount in cents. This is only applicable for checkount and when element the mode is set to 'payment'.
  • r_url (String): The return URL after the payment is completed.
  • server_url (String, required): The URL where you handle the server-side processing of the payment or setup.
  • appearance (Object): An object containing appearance-related options:
    • labels (String, default: 'above'): The position of the labels in the payment form.
    • theme (String, default: 'flat'): The theme of the payment form.

Events

• verify: An event emitted by the component to notify the parent component about the payment / setup verification status. It provides an object with the following properties:

  • chain (String): The chain of events or components where the verification occurred.

  • error (Boolean): Indicates whether an error occurred or not.

  • data (Object): Additional data related to the verification process.

Server

server_url Prop

The options.server_url prop is an important property used in both the StripeElement and StripeCheckout components. It specifies the server endpoint URL where the library will make API requests to handle payment / setup intents and confirmations with Stripe.

When a payment is submitted, VueSaga sends a request to the specified server_url endpoint to confirm the setup or payment. Your server is expected to provide a client_secret in JSON format as a response. Here's an example of the expected JSON format:

{ 
  secret: "your_client_secret_value"
}

Make sure to include the secret field with the appropriate value in the JSON response from your server to enable seamless integration with VueSaga.

---

SetupIntent and PaymentIntent for various programming languages:

• Setup: https://stripe.com/docs/api/setup_intents/create
• Payment and checkout: https://stripe.com/docs/api/payment_intents/create

IMPORTANT: Always enable automatic_payment_methods in your server code.

---

Data Sent to the Server

The data sent to the server_url endpoint depends on the specific component and mode of operation.

For the StripeElement (mode:payment) component & checkout, when submitting the payment form, the library sends a POST request to the server_url with the following JSON payload:

{
    "currency": "<currency_code>",
    "amount": <payment_amount>
}

Where:

• <currency_code> is the currency code specified in the options prop (or the default if not provided).
• <payment_amount> is the payment amount specified in the options prop (or the default if not provided).

On the other hand, for the StripeElement with mode: setup, an empty body is sent to the server_url endpoint

Server Response

The server endpoint specified by the server_url prop should handle the incoming requests and communicate with Stripe's API to create or retrieve the necessary information.

Upon receiving the request, the server should perform the following steps:

• Interact with Stripe's API to create or retrieve a payment intent, depending on the mode of operation (payment or setup).
• Retrieve the client_secret from the payment intent created or retrieved from Stripe.
• Return the client_secret in the server's response.

The server's response should have the following structure:

{
  "secret": "<client_secret>"
}

Where <client_secret> is the value obtained from the payment / setup intent.

VueSaga will use this client_secret to confirm the payment intent with Stripe and complete the payment process.

It's important to ensure that your server-side code securely communicates with Stripe's API, validates requests, and handles errors gracefully.

---

Please note that the exact implementation details of the server-side code are beyond the scope of this library's documentation, as it depends on your specific server environment and programming language. Consult Stripe's official documentation and relevant server-side resources for guidance on implementing the server-side integration.

---

Examples

Here's an example of how you can implement the server-side code using Express.js:

Example 1: StripeElement(setup)

Vue:

<script>
  import { StripeElement } from 'vuesaga'

  export default{
    components: { StripeElement },
    data: () => ({
      public_key: 'pk_test_xxx',
      tap: 1
      options: {
        server_url: '/create-setup-intent',
      }
    }),
    methods:{
      handlder(feed){
        console.log(feed) //Do something else with this info
      }
    }
  }
</script>

<template>
  <StripeElement :pk="public_key" :tap="tap" :options="options" @verify="handler"  />
  <button @click="tap++">Save Card</button>
</template>

Express.js:

const express = require('express');
const app = express();
const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');

app.use(express.json());

//Ref: (https://stripe.com/docs/api/payment_intents/create)
app.post('/create-setup-intent', async (req, res) => {

    const setupIntent = await stripe.setupIntents.create({
        automatic_payment_methods: { enabled: true }
    })

    res.status(200).json({
        secret: setupIntent['client_secret']
    })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Example 2: StripeElement(payment) and StripeCheckout

Vue:

<script>
  import { StripeElement, StripeCheckout } from 'vuesaga'

  export default{
    components: { 
      StripeElement, StripeCheckout
   },
    data: () => ({
      public_key: 'pk_test_xxx',
      tap: 1
      options: {
        server_url: '/create-payment-intent',
        mode: 'payment',
        amount: 3000
      }
    }),
    methods:{
      handlder(feed){
        console.log(feed) //Do something else with this info
      }
    }
  }
</script>

<template>
  <StripeElement :pk="public_key" :tap="tap" :options="options" @verify="handler"  />
  <button @click="tap++">Pay $30.00</button>

  <br />
  <StripeCheckout :pk="public_key" :options="options" @verify="handler"  />
</template>

Express.js:

const express = require('express');
const app = express();
const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY');

app.use(express.json());

//Ref: (https://stripe.com/docs/api/payment_intents/create)
app.post('/create-payment-intent', async (req, res) => {
    const data = req.body

    const paymentIntent = await stripe.paymentIntents.create({
        amount: data.amount,
        currency: data.currency,
        automatic_payment_methods: { enabled: true },
    })

    res.status(200).json({
        secret: paymentIntent['client_secret']
    })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Attr

By abstracting away complex implementation details, VueSaga simplifies the integration process, allowing developers to seamlessly leverage the full functionality of Stripe's payment infrastructure.