504 Error

products
javascript

#1

Hello,

I am receiving a 504 error code when trying to make a payment. Here’s the exact error bellow:

Failed to load https://api.moltin.com/v2/orders/24ba7164-39a6-41e7-9d8f-2a52aba337d9/payments: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://prettylashed-c38d7.firebaseapp.com’ is therefore not allowed access. The response had HTTP status code 504. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

here’s what my moltin js looks like:

const MoltinGateway = require('@moltin/sdk').gateway;

const Moltin = MoltinGateway({
  client_id : 'P#zL*******ayx#@!LTyI',
  client_secret : 'B#(!@*************m@!#!' 
});


export const GetProducts = () =>
  Moltin.Products.With('files, main_images, collections').All();

export const GetProduct = ID => Moltin.Products.Get(ID);

export const GetCategories = () => Moltin.Categories.With('products').All();

export const GetCategory = ID => Moltin.Categories.Get(ID);

export const GetCollections = () => Moltin.Collections.With('products').All();

export const GetBrands = () => Moltin.Brands.All();

export const GetFile = ID => Moltin.Files.Get(ID);

export const AddCart = (id, quantity) => Moltin.Cart.AddProduct(id, quantity);

export const UpdateCartPlus = (ID, quantity) =>
  Moltin.Cart.UpdateItemQuantity(ID, quantity + 1);

export const UpdateCartMinus = (ID, quantity) =>
  Moltin.Cart.UpdateItemQuantity(ID, quantity - 1);

export const UpdateCart = (ID, quantity) =>
  Moltin.Cart.UpdateItemQuantity(ID, quantity);

export const GetCartItems = () => Moltin.Cart.Items();

export const Checkout = data => Moltin.Cart.Checkout(data);

export const GetOrder = ID => Moltin.Orders.Get(ID);

export const OrderPay = (ID, data) => Moltin.Orders.Payment(ID, data);

export const DeleteCart = () => Moltin.Cart.Delete();

here’s what my checkout form looks like now:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import * as api from '../../moltin';
import { push } from 'react-router-redux';
import { connect } from 'react-redux';
import {injectStripe} from 'react-stripe-elements';

import { SUBMIT_PAYMENT, PAYMENT_COMPLETE } from '../../ducks/payments';
import PLCard from './PL-card';


function mapStateToProps(state) {
  return { push: state.push };
}

let CheckoutTemplate = {
  customer: {
    name: 'John Doe',
    email: 'john@doe.co'
  },
  shipping_address: {
    first_name: 'John',
    last_name: 'Doe',
    line_1: '2nd Floor British India House',
    line_2: '15 Carliol Square',
    city: 'Newcastle Upon Tyne',
    postcode: 'NE1 6UF',
    county: 'Tyne & Wear',
    country: 'United Kingdom'
  },
  billing_address: {
    first_name: 'John',
    last_name: 'Doe',
    line_1: '2nd Floor British India House',
    line_2: '15 Carliol Square',
    city: 'Newcastle Upon Tyne',
    postcode: 'NE1 6UF',
    county: 'Tyne & Wear',
    country: 'United Kingdom'
  }
};

// let PaymentTemplate = {
//   gateway: 'stripe',
//   method: 'purchase',
//   first_name: 'John',
//   last_name: 'Doe',
//   number: '4242424242424242',
//   month: '08',
//   year: '2020',
//   verification_value: '123'
  
// };



class PLForm extends Component {
  constructor(props) {
    super(props);

    this.mySubmit = this.mySubmit.bind(this);
  }

  

  handleKeyDown = function(e) {
    if (e.key === 'Enter' && e.shiftKey === false) {
      e.preventDefault();
    }
  };



  mySubmit = values => {
    CheckoutTemplate.customer.name = values.name;
    CheckoutTemplate.customer.email = values.email;

    CheckoutTemplate.billing_address.first_name = values.billing_firstname;
    CheckoutTemplate.billing_address.last_name = values.billing_lastname;
    CheckoutTemplate.billing_address.line_1 = values.billing_address_1;
    CheckoutTemplate.billing_address.line_2 = values.billing_address_2;
    CheckoutTemplate.billing_address.city = values.billing_state;
    CheckoutTemplate.billing_address.county = values.billing_postcode;
    CheckoutTemplate.billing_address.country = values.billing_country;

    CheckoutTemplate.shipping_address.first_name = values.shipping_firstname;
    CheckoutTemplate.shipping_address.last_name = values.shipping_lastname;
    CheckoutTemplate.shipping_address.line_1 = values.shipping_address_1;
    CheckoutTemplate.shipping_address.line_2 = values.shipping_address_2;
    CheckoutTemplate.shipping_address.city = values.shipping_state;
    CheckoutTemplate.shipping_address.county = values.shipping_postcode;
    CheckoutTemplate.shipping_address.country = values.shipping_country;






  this.props.stripe.createToken({
    name:  CheckoutTemplate.customer.name,
    address_line1: CheckoutTemplate.billing_address.line_1,
    address_line2: CheckoutTemplate.billing_address.line_2,
    address_city: CheckoutTemplate.billing_address.city,
    address_state: CheckoutTemplate.billing_address.city,
    address_zip: CheckoutTemplate.billing_address.county,
    address_country: CheckoutTemplate.billing_address.country
  })
      .then(({token, error}) => {
        if (error){
      console.log('DID NOT CREATE: Stripe token:', token);
        } else{ 

       this.TokenPaymentTemplate = {
        gateway: "stripe",
        method: "purchase",
        payment: token.id
      
      };
        // Insert the token ID into the form so it gets submitted to the server
      console.log('Received Stripe token:', token);
      console.log(this.TokenPaymentTemplate) ;
        }
    }).then(()=> {
      this.props.dispatch(dispatch => {
        dispatch({ type: SUBMIT_PAYMENT });
      });

    })


    api
      .Checkout(CheckoutTemplate)

      .then(order => {
        api.OrderPay(order.data.id, this.TokenPaymentTemplate);
        api.DeleteCart();
      })

      .then(() => {
        this.props.dispatch(dispatch => {
          dispatch({ type: PAYMENT_COMPLETE });
          dispatch(push('/order-confirmation'));
        });
      })

      .catch(e => {
        console.log(e);
      })

      .catch(e => {
        console.log(e);
      })

      .catch(e => {
        console.log(e);
      });
  };

  render() {
    return (

            <form
              className="checkout-form"
              noValidate
              onSubmit={this.props.handleSubmit(this.mySubmit)}
              onKeyDown={e => {
                this.handleKeyDown(e);
              }}>

#2

Hi @brinadanielle1h

I’m not sure why you are receiving a CORS error but I’ll try to see where the issue is here. Hopefully the original contributor of this repo @Matt can jump in and provide some assistance.

I’ll try to get the demo store working with your code changes above to replicate the issue internally.

Can you tell me the SDK and react stripe elements versions you have installed too?

Regards,
Jamie


#3

Hellu There! Yes I used the react store as a template…I am still modifying…I have it in a private repo…would you like access to that? Also, here’s my package.json

{
“name”: “moltin-react-demo-store”,
“version”: “0.2.0”,
“private”: true,
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test --env=jsdom”,
“eject”: “react-scripts eject”,
“precommit”: “lint-staged”
},
“dependencies”: {
@moltin/sdk”: “^2.11.1”,
“bootstrap”: “^3.3.7”,
“firebase”: “^4.12.1”,
“history”: “^4.7.2”,
“jquery”: “^3.3.1”,
“react”: “^16.2.0”,
“react-dom”: “^16.2.0”,
“react-mailto”: “^0.4.0”,
“react-redux”: “^5.0.5”,
“react-router”: “^4.1.1”,
“react-router-dom”: “^4.1.1”,
“react-router-redux”: “next”,
“react-scripts”: “1.1.0”,
“react-stripe-checkout”: “^2.6.3”,
“react-stripe-checkout-mjhough”: “^2.7.0”,
“react-stripe-elements”: “^1.6.0”,
“redux”: “^3.7.1”,
“redux-form”: “7.2.3”,
“redux-thunk”: “2.2.0”,
“styled-components”: “^3.2.5”
},
“devDependencies”: {
“husky”: “^0.14.3”,
“lint-staged”: “^7.0.0”,
“prettier”: “1.10.2”,
“redux-logger”: “^3.0.6”
},
“lint-staged”: {
“*.{js,json,css,md}”: [
“prettier --write”,
“git add”
]
}
}


#4

and Thank you @Matt I appreciate the store demo !


#5

Hey :wave:

Feel free to add me to the repo with READ only access. My GitHub username is notrab.

Hopefully we can get to the bottom of this issue.


#6

Thank you have a sent a request…it’s the master and/or token2serve branch


#7

And…I was able to fix in test, but in production mode it produces the 504 moltin and CORS error.


#8

Hi @brinadanielle

Thanks for the invite. I was able to get a successful stripe token on payment during development but then a second time I received a 504 error.

I may reach out via a direct message if I need anything from you that’s private, so keep an eye out.

:slight_smile:


#9

okay! Thank you, so much!


#10

Hi @brinadanielle

You are receiving a 504 due to an empty request payload. Inside PL-form.js you are defining the following:

this.TokenPaymentTemplate = {
  gateway: 'stripe',
  method: 'purchase',
  payment: token.id
};

However in the next promise you’re calling on line 124

api.OrderPay(order.data.id, this.TokenPaymentTemplate);

…which has no access to this.TokenPaymentTemplate in the context of mySubmit() as far as I’m aware.

I’d recommend you to use setState so you are defining the TokenPaymentTemplate and can safely pass this on to api.OrderPay

I hope this helps :smile:


#11

Okay…thank you…I tried several things and that’s the only way it would work for me…I will try using set state. I even console.logged it to make sure it was reassigned the appropriate values. I will try it.


#12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.