Htykuut

i did this gatsby and netlify.

https://www.thedigitalsages.com/creating-charges-for-stripe-with-react-and-netlify-functions-part-1/

but but I am getting this error.

Unable to import module 'charge': Error

    at Module.require (module.js:596:17)

    at require (internal/module.js:11:18)

    at Object.<anonymous> (/var/task/charge.js:1:76)

    at Module._compile (module.js:652:30)

    at Object.Module._extensions..js (module.js:663:10)

    at Module.load (module.js:565:32)

    at tryModuleLoad (module.js:505:12)

    at Function.Module._load (module.js:497:3)

checkoutForm.js

import React from 'react';

import {injectStripe} from 'react-stripe-elements';

import axios from 'axios';

import AddressSection from './AddressSection';

import CardSection from './CardSection';

import {Button} from 'reactstrap';

import Success from './Success';

import './form-css.css'



class CheckoutForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      name: undefined,

      email: undefined,

      address: undefined,

      city: undefined,

      state: undefined,

      program: undefined,

      price: undefined,

      success: false

    };

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }



  handleChange(event) {

    const name = event.target.name

    this.setState({[name]: event.target.value});

  }





  handleSubmit = (ev) => {

    ev.preventDefault();



    this.props.stripe.createToken({

        name: this.state.name,

        address_city: this.state.city,

        address_line1: this.state.address,

        address_state: this.state.state,

        address_country: "US"

      }).then(({token}) =>

      {

        const charge = JSON.stringify({

          token,

          charge: {

            amount: 2000,

            currency: 'usd',

            email: this.state.email,

            number: this.state.number

          },

        })

        axios.post('/.netlify/functions/charge', charge)

        .catch(function (error) {

          console.log(error);

        })

    });

  };



  render() {

    return (

      <form onSubmit={this.handleSubmit} id="form-css" className="w-100">

        { this.state.success === false ?

          <div>

            <AddressSection handleChange={this.handleChange} schedule={this.state.schedule} />

            <CardSection />

          </div>

          :

          <Success />

        }

        <Button className="w-100 h4">Pay $50</Button>

      </form>

    );

  }

}



export default injectStripe(CheckoutForm);

charge.js folder / function/charge.js and working on netlify function.

var stripe = require("stripe")("....");

var axios = require('axios');



module.exports.handler = (event, context, callback) => {



  const requestBody = JSON.parse(event.body);

  const token = requestBody.token.id;

  const amount = requestBody.charge.amount;

  const currency = requestBody.charge.currency;

  const email = requestBody.charge.email;



  return stripe.charges.create({ // Create Stripe charge with token

    amount,

    currency,

    receipt_email: email,

    description: 'Serverless Stripe Test charge',

    source: token,

  })

    .then((charge) => { // Success response

      const response = {

        statusCode: 200,

        body: JSON.stringify({

          message: `Charge processed succesfully!`,

          charge,

        }),

      };

      callback(null, response);

    })

    .catch((err) => { // Error response

      const response = {

        statusCode: 500,

        body: JSON.stringify({

          error: err.message,

        }),

      };

      callback(null, response);

    })

};

i think axios errors /:

https://reverent-meitner-8da20d.netlify.com/ demo link thanks.