simplikios
simplikios

Reputation: 381

Can I fulfill purchases made through Stripe Checkout Client in React without a server?

I am using the Client integration of Stripe Checkout in my create-react-app React app.

Purchasing works fine, but it seems like I have no option to search for successful payments or receive relevant information after a payment. (Stripe Checkout Fulfilment Options)

Stripe Checkout is implemented like this:

import React, { Component } from 'react';

const stripe = window.Stripe('INSERT_API_KEY');

class Checkout extends Component {
  checkout() {
    stripe.redirectToCheckout({
      items: [
        {plan: 'INSERT_PLAN_ID', quantity: 1}
      ],
      successUrl: 'https://localhost:3000/checkout/success',
      cancelUrl: 'https://localhost:3000/checkout/success'
    }).then((result) => {
      // If `redirectToCheckout` fails due to a browser or network
      // error, display the localized error message to your customer
      // using `result.error.message`.
      console.log(result)
    });
  }
  render() {
    return (
      <button onClick={this.checkout}>Pay</button>
    )
  }
}

The success/cancel urls don't help me a lot because I can't think of a security mechanism that would only give access to users who actually made a payment. Do you have any ideas?

Upvotes: 0

Views: 778

Answers (1)

cjav_dev
cjav_dev

Reputation: 3105

Of the options for fulfilling purchases, the most reliable path is to write a backend and use server code. That said, if you feel really strongly about avoiding writing server code, I’d recommend working with a third-party plugin like Zapier to handle successful purchases and sending those into a spreadsheet or another tool that you use to manage fulfillments.

Use Stripe+Zapier to trigger workflows based on common activities in Stripe like getting a new customers, receiving a new payment, and more. https://stripe.com/works-with/zapier

Polling from the client is not recommended for a number of reasons.

Upvotes: 1

Related Questions