CORS error about react-paystack HOT 18 CLOSED

can i see your source code?

from react-paystack.

import React, { Component } from "react";
import { Switch, Route } from 'react-router-dom';
import { About } from './About/About';
import { Faqs } from './FAQs/Faqs';
import { Workload } from './Order/Workload/Workload';
import { Appointment } from './Order/Appointment/Appointment';
import { DataPage } from './Order/DataPage/DataPage';
import { Summary } from './Order/Summary/Summary';
import PaystackButton from 'react-paystack';

export class Main extends Component {
constructor(props) {
super(props);
this.state = {
fields: {
bedrooms: 1,
bathrooms: 1,
date: 0,
time: 0,
name: '',
phone: '',
email: '',
address: '',
price: 0
},
key: 'pk_test_f68915f70c7a77b65f416080230a9a3822035979'

    };

}

getReference = () => {
    //you can put any unique reference implementation code here
    let text = "";
    let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.=";

    for( let i=0; i < 15; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

callback = () => {
    
}

close = () => {

}

computePrice = () => {
    const fields = this.state.fields;


}


onInputChange = (evt) => {
    const fields = this.state.fields;
    fields[evt.target.name] = evt.target.value;
    this.setState({fields});
}

render() {
    return (
        <main role='main' className='container'>
            <div className='row'>      
                <p>
                <PaystackButton
                    text="Make Payment"
                    class="payButton"
                    callback={this.callback}
                    close={this.close}
                    disabled={false} 
                    embed={false} 
                    reference={this.getReference()}
                    email={'mayowadan17gmail.com'}
                    amount={10000}
                    paystackkey={this.state.key}
                />
                </p>
            </div>
            <div className='row'>
                <Switch>
                    <Route exact path='/' render={() => <Workload onInputChange={ this.onInputChange } bed={this.state.fields.bedrooms} bath={this.state.fields.bathrooms}/>}/>
                    <Route path='/appointment' render={() => <Appointment onInputChange={ this.onInputChange } values={this.state.fields}/>} />
                    <Route path='/address' render={() => <DataPage onInputChange={ this.onInputChange } values={this.state.fields}/>} />
                    <Route path='/summary' render={() => <Summary values={this.state.fields}/>} />
                    
                    <Route exact path='/about' component={About}/>
                    <Route exact path='/faqs' component={Faqs}/>
                    {/* <Route path='/order/workload' component={Workload}/> */}
                    {/* <Route path='/order/appointment' component={Appointment}/> */}
                </Switch>
               
            </div>
        </main>
    );
}

}

from react-paystack.

I just plopped the thing onto a page just to test things out

from react-paystack.

Here's the error:
Access to Script at 'https://js.paystack.co/v1/inline.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

from react-paystack.

@danieloi let me see how you brought in paystack inline.js. see mine, <script src="//js.paystack.co/v1/inline.js"></script>

from react-paystack.

<script crossorigin src="//js.paystack.co/v1/inline.js"></script>

from react-paystack.

It gives this error:
Access to Script at 'https://js.paystack.co/v1/inline.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

from react-paystack.

when I add https to is, it gives the former error

from react-paystack.

do this <script src="//js.paystack.co/v1/inline.js"></script>.Don't add any protocol.

from react-paystack.

which browser are you using?

from react-paystack.

the error there is worse. It says it cannot read the error object in that case. The React reference i gave explains it as a security measure regarding CORS issues that hides the error object in case sensitive details were involved in the request.

from react-paystack.

I'm using the latest Chrome

from react-paystack.

@danieloi can you send your project to my mail? [email protected]

from react-paystack.

or upload it to github

from react-paystack.

Here it is in a sampling of it's glory....
https://github.com/danieloi/project-cleanup

from react-paystack.

@danieloi sorry about the delay. i saw some issues with your code.

• Invalid email https://github.com/danieloi/project-cleanup/blob/master/src/Components/Main.js#L95 .Email should have an '@'.e.g "[email protected]"

• Correct this line https://github.com/danieloi/project-cleanup/blob/master/public/index.html#L51 to <script src="//js.paystack.co/v1/inline.js"></script>

The crossorigin error was due to error from paystack.

Any other issue, let me know. I will be available to suppport you.

from react-paystack.

@danieloi can i close this issue?

from react-paystack.

Yes you can. Thank you!

from react-paystack.