StripePlugin

StripePlugin

Plugin to enable payments through Stripe via the Payment Intents API.

Requirements

  1. You will need to create a Stripe account and get your secret key in the dashboard.

  2. Create a webhook endpoint in the Stripe dashboard which listens to the payment_intent.succeeded and payment_intent.payment_failed events. The URL should be https://my-shop.com/payments/stripe, where my-shop.com is the host of your storefront application.

  3. Get the signing secret for the newly created webhook.

  4. Install the Payments plugin and the Stripe Node library:

    yarn add @vendure/payments-plugin stripe

    or

    npm install @vendure/payments-plugin stripe

Setup

  1. Add the plugin to your VendureConfig plugins array:
    import { StripePlugin } from '@vendure/payments-plugin/package/stripe';
    
    // ...
    
    plugins: [
      StripePlugin.init({
        apiKey: process.env.YOUR_STRIPE_SECRET_KEY,
        webhookSigningSecret: process.env.YOUR_STRIPE_WEBHOOK_SIGNING_SECRET,
        // This prevents different customers from using the same PaymentIntent
        storeCustomersInStripe: true,
      }),
    ]
    
  2. Create a new PaymentMethod in the Admin UI, and select “Stripe payments” as the handler.

Storefront usage

The plugin is designed to work with the Custom payment flow. In this flow, Stripe provides libraries which handle the payment UI and confirmation for you. You can install it in your storefront project with:

yarn add @stripe/stripe-js
# or
npm install @stripe/stripe-js

If you are using React, you should also consider installing @stripe/react-stripe-js, which is a wrapper around Stripe Elements.

The high-level workflow is:

  1. Create a “payment intent” on the server by executing the createStripePaymentIntent mutation which is exposed by this plugin.
  2. Use the returned client secret to instantiate the Stripe Payment Element.
  3. Once the form is submitted and Stripe processes the payment, the webhook takes care of updating the order without additional action in the storefront.

Local development

Use something like localtunnel to test on localhost.

npx localtunnel --port 3000 --subdomain my-shop-local-dev
> your url is: https://my-shop-local-dev.loca.lt

Signature

class StripePlugin {
  static static options: StripePluginOptions;
  static init(options: StripePluginOptions) => Type<StripePlugin>;
}

Members

options

static property

init

static method
type:
(options: StripePluginOptions) => Type<StripePlugin>
Initialize the Stripe payment plugin

StripePluginOptions

Configuration options for the Stripe payments plugin.

Signature

interface StripePluginOptions {
  apiKey: string;
  webhookSigningSecret: string;
  storeCustomersInStripe?: boolean;
}

Members

apiKey

property
type:
string
Secret key of your Stripe account.

webhookSigningSecret

property
type:
string
Signing secret of your configured Stripe webhook.

storeCustomersInStripe

property
type:
boolean
default:
false
If set to true, a Customer object will be created in Stripe - if it doesn’t already exist - for authenticated users, which prevents payment methods attached to other Customers to be used with the same PaymentIntent. This is done by adding a custom field to the Customer entity to store the Stripe customer ID, so switching this on will require a database migration / synchronization.