How to incorporate Stripe into F7 React

1

Hi, So I am very new to web design and I have made a very simple one page website with some interactive expandable cards.
I would like to have an buy button within those cards to allow users to purchase the product via stripe.
I have been through the stripe documents, and I am quite confused how to implement it.
I think I get the basic premise, that you want to initialise some token (promise), you then create an element which your page uses, and that element allows you to directly have the user type into stripes system without you ever having it come through you.

However, if that is correct or not, I’ve no idea.
More so, I’ve no idea as to which line to stick where.
As far as I can figure, I would need the following lines of code?

var stripe = Stripe(‘pk_test_51HqOkyAqNfA6X35CrCtDBUyECoLvAldPi7tSQ9llInBgaxNWAhRza6CB2hz6WqI1ZW8aBN556luv4TyYqUNwopeb00tvwVhds5’);

import { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  CardElement,
  Elements,
  useElements,
  useStripe
} from '@stripe/react-stripe-js';

But how to use it i’ve no idea. I have so far stuck the first two lines in App.js and other rest in app.jsx

Anyone know how to implement this as I am pretty confused and very new to this
Cheers
Sam

2

Hi Sam
The basics of most payment service provider are that you first of all, send all request at the server, not the client. So you can´t send a request to them via the clientside js file.

How it basically works.
When you click a “pay” button, a request is send to most PSP to get a paymentId, then you run their code displays a payment form, where the user can write his name etc. And when he clicks “Finish payment” or simular, the order is send to sprite, and the user is redirected to the bank, signing the payment, if ok, the bank sends info to sprite and they send you a post request with info about the payment so you can insert it to you database. This is the light version, there is a lot more going on, with webhook etc.

So if you are new to programming I would recommend that you hire somebody to do it for you, because its a lot to think about if you are going to program it yourself.
Or if possible, use a shoppingplatform that already have payment functions ready to use.