Version: current

Stripe Payments Integration


Stripe Logo

Overview

Our integration with Stripe payments uses https://github.com/stripe/react-stripe-js to provide a production ready credit card form in the checkout. This ships with our demo-v2 example project.

If you want to see a live example head over to our demo site.

You can test transactions using these details:

  • Card Number: 4111 1111 1111 1111
  • Expiry Date: Any future date
  • CVV: 123

Our integration includes:

  • client/src/pages/shop/Checkout/components/payments/Stripe.js (Client side component)
  • @deity-io/falcon-stripe-plugin(Client side plugin)
  • @deity/falcon-payments/src/provider/stripe.js (Server side provider)

Supported Features

  • Credit card payments

Getting Started

All you need to do is add your Stripe configuration.

1. Create a Stripe account / API keys

You can register for an account here.

Once you've created an account you should be able to find your API keys in the developer section.

Stripe Account Sidebar

n.b. Take note of if you're in test or live mode.

Stripe Account API section

You'll need you API keys later.

2. Add your Stripe details to your Falcon Platform config

If you're using our example app demo-v2 all you need to do now is add your Stripe details to your server side config.

The Stripe provider should already exist in your components->payments. server/config/default.json

{
"components": {
"payments": {
"package": "@deity/falcon-payments",
"config": {
"providers": {
"stripe": {
"package": "@deity/falcon-payments/src/provider/stripe",
"config": {
"title": "Stripe",
"secretKey": null,
"publicKey": null
}
}
}
}
}
}
}

You just need to add your secretKey and publicKey. These should be added in your server/config/local.json locally and on your production environment you can use these constants:

"secretKey": "PAYMENT_STRIPE_SECRET_KEY",
"publicKey": "PAYMENT_STRIPE_PUBLIC_KEY"

Deity Cloud Environment Variables

  • FALCON_PAYMENTS_ENABLED: [bool] - You need to use Falcon Payments to use our Stripe integration.
  • PAYMENT_STRIPE_ENABLED: [bool] - Enable Striep
  • PAYMENT_STRIPE_TITLE: The title that appears above the payment method e.g. Credit Card
  • PAYMENT_STRIPE_SECRET_KEY: Your secret key
  • PAYMENT_STRIPE_PUBLIC_KEY: Your public key

Useful Links

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.