Poool
light_mode
dark_mode
menu
close

#One-time payments with Stripe

#What is Stripe?

Stripe is a payment service provider that accepts credit cards, digital wallets and many other payment methods.
In this guide, we'll see how to integrate their javascript SDK with Access and easily achieve one-time payments.
Discover more about Stripe open_in_new

This guide requires both a front-end & a server-side environment. To grasp everything we'll talk about, we recommend you to first read our guide about forms inside Access & how to integrate & validate them on-the-fly.

#Configuration

The first step consists in configuring the Stripe API key within your integration of Access (see the Access configuration section if you have any trouble editing your configuration).
index.js
Access
  .init('your_app_id')
  .config({
    stripe_public_key: 'pk_test_your_api_key',
  })
  .createPaywall(...);
You'll also need to have created a form within your dashboard with a "Credit card" field.

#Handle the onFormSubmit event

As we previously discussed how to verify simple form fields in our forms integration guide, the payment field should not be harder to achieve.
index.js
Access
  .init('your_app_id')
  .config({
    stripe_public_key: 'pk_test_your_api_key',
  })
  .on('formSubmit', async event => {
    if (event.fields.cardField) {
      // This is where we will create the intent & payment using the
      // card id
    }
  })
  .createPaywall(...);

#Create the payment intent

Since SCA & PSD-2 came into play in 2019, Stripe now requires you to implement an intent logic before being able to charge a customer. To avoid having to create multiple products and prices in our dashboard, we chose to only implement Stripe Elements and let you implement the above logic on your own server architecture.
The first step to achieve a successful charge is to create a customer and attach a payment intent:

index.js
const express = require('express');
const bodyparser = require('body-parser');
const Stripe = require('stripe');


const app = express();
app.use(bodyparser.json());


const stripe = new Stripe('<your-secret-key>');


app.post('/string/intent', async (req, res) => {
  const customer = await stripe.customers.create({
    email: req.body.email,
    source: req.body.token
  });


  const intent = await stripe.paymentIntents.create({
    amount: 1000,
    currency: 'eur',
    customer: customer.id
  });


  res.json({ intent: intent.client_secret });
});


app.listen(8000, () => console.log('Server started'));

#Confirm the charge

Once you have created your customer & retrieved your intent secret, you can now confirm the payment using stripe front-end SDK, inside your onFormSubmit event handler:

index.js
const stripe = Stripe('<your-publishable-key>');


Access
  .init('your_app_id')
  .config({
    stripe_public_key: 'pk_test_your_api_key',
  })
  .on('formSubmit', async event => {
    if (event.fields.cardField) {
      // First, we retrieve the intent secret using the api route we created
      // earlier
      const { intent } = await fetch('https://your-api.com/stripe/intent', {
        method: 'POST',
        body: JSON.stringify({
          email: event.fields.email,
          token: event.fields.cardField.id,
        }),
        headers: {
          'Content-Type': 'application/json',
        },
      }).then(res => res.json());


      // Then we use the intent secret to create the charge
      const result = await stripe.confirmCardPayment(intent, {
        payment_method: event.fields.cardField.card.id
      });


      if (result.error) {
        return ['cardField'];
      }


      console.log('payment done', result);
    }
  })
  .createPaywall(...);
Yep, it was that simple.

Note: The field information inside event.fields.cardField is the raw data sent by Stripe Elements upon validating the card element. So if you need to create the charge on your server instead of using stripe.confirmCardPayment, you're free to do it as you'd do with a simple Stripe integration.

And this concludes our wonderful guide on how to create a payment with Stripe inside your paywall in 5 minutes tops ✨