Я пытаюсь использовать оплату Stripe с моим React-приложением и Node-сервером. - PullRequest
Новая
       34

Я пытаюсь использовать оплату Stripe с моим React-приложением и Node-сервером.

0 голосов
/ 11 мая 2018

Я программист-самоучка, которому нужно многому научиться:)

Я создаю веб-сайт для своего первого клиента и пытаюсь внедрить платежную платформу Stripe.Я строю с React.js Express и Node.Я использовал эту статью для большинства настроек: https://www.robinwieruch.de/react-express-stripe-payment/

В моем тестовом API все работает абсолютно идеально.Я могу видеть данные теста с платежами и все.Когда я нахожусь на живом веб-сайте с живыми ключами API, это не создает плату.Он публикует вызов API и имеет всю правильную информацию, но не снимает с карты.

На полпути к статье он упоминает PAYMENT_SERVER_URL, что, по-моему, может быть проблемой после всех моих копаний.Я не 100%, что он подразумевает под «myapidomain».Когда я не в производстве, это просто мой локальный хост: 8080.Я не уверен, что это было бы на моем производственном сайте.

Я хостинг с HostGator, если это поможет.Я пытался выяснить это около 3 дней и не уверен, куда еще обратиться!

Frontend StripeComponent.js 

import React, { Component } from 'react'
import StripeCheckout from 'react-stripe-checkout';
import axios from 'axios'
import STRIPE_PUB_KEY from '../../../constants/stripePubKey'
import PAYMENT_SERVER_URL from '../../../constants/stripeServer'
import { clearReduxCart } from '../../../ducks/reducer'


const CURRENCY = 'usd';

const successPayment = (redirectHome, clearReduxCart) => {
  alert('Payment Successful');
  localStorage.clear()
  clearReduxCart()
  return redirectHome(true)
};

const errorPayment = data => {
  alert('Payment Error', data);
};

const onToken = (amount, description, email, redirectHome, clearReduxCart) => token =>
  axios.post(PAYMENT_SERVER_URL,
    {
      description,
      source: token.id,
      currency: CURRENCY,
      amount: amount,
      receipt_email: token.email
    })
    .then(successPayment(redirectHome, clearReduxCart))
    .catch(errorPayment);

const Checkout = ({ name, description, amount, email, redirectHome, clearReduxCart }) =>
  <StripeCheckout
    name={name}
    description={description}
    amount={amount}
    email={email}
    token={onToken(amount, description, email, redirectHome, clearReduxCart)}
    currency={CURRENCY}
    stripeKey={STRIPE_PUB_KEY}
    shippingAddress
    receipt_email
  />



export default Checkout

server / index.js 

require('dotenv').config();



const express = require('express')
    , SERVER_CONFIGS = require('./const/server')
    , configureServer = require('./server')
    , configureRoutes = require('./routes')


const app = express();


app.use( express.static( `${__dirname}/../build` ) );



configureServer(app);
configureRoutes(app);

app.listen(SERVER_CONFIGS.PORT, error => {
  if (error) throw error;
  console.log(`Server running on port ${ SERVER_CONFIGS.PORT }` );
});

server / server.js 

const cors = require('cors');
const bodyParser = require('body-parser');

const CORS_WHITELIST = require('./const/frontend');

const corsOptions = {
  origin: (origin, callback) =>
    (CORS_WHITELIST.indexOf(origin) !== -1)
      ? callback(null, true)
      : callback(new Error('Not allowed by CORS'))
};

const configureServer = app => {
  app.use(cors());

  app.use(bodyParser.json());
};

module.exports = configureServer;

server / routs / payment.js 

const stripe = require('../const/stripe');

const postStripeCharge = res => (stripeErr, stripeRes) => {
  if (stripeErr) {
    res.status(500).send({ error: stripeErr });
  } else {    
    res.status(200).send({ success: stripeRes });
  }
}

const paymentApi = app => {
  app.get('/', (req, res) => {
    res.send({ message: 'Hello Stripe checkout server!', timestamp: new Date().toISOString() })
  });

  app.post('/', (req, res) => {
    stripe.charges.create({
      amount: req.body.amount,
      currency: req.body.currency,
      source: req.body.source,
      description: req.body.description
    }, postStripeCharge(res));
  });

  return app;
};

module.exports = paymentApi;
...