Order.js

import React from 'react';
import {Table, Button, Grid} from 'react-bootstrap';

import {Link} from 'next/link';
import gql from "graphql-tag";
import {Query,Subscription} from "react-apollo";
import getStatus from '../components/GetStatus';
import {withRouter} from 'next/router'
import withData from '../config';

const PAYMENT_URL ='https://ui.<cluster_name>.hasura-app.io/payment';

const GET_ORDERS = gql`
  query fetch_orders($user: String!, $order_id: String! ) {
    orders(where: {user_id: {_eq: $user}, order_id: {_eq: $order_id}}, order_by: { created: asc}) {
      order_id
      order_valid
      payment_valid
      approved
      driver_assigned
      created
    }
  }
`;
const username="1";

const Order = withRouter((props) => (
    <div>
      <Grid>
        <div>
          <hr/>
          <Subscription
            subscription={GET_ORDERS} variables={{user: username, order_id: props.router.query.id}}>
            {({loading, error, data}) => {
              console.log(props.router.query.id);
              if (loading) return "Loading...";
              if (error) return `Error!: ${JSON.stringify(error, null, 2)}`;
              console.log(data);
              if (data.orders.length === 0) {
                return "No such order id."
              } else {
                return (
                  <div>
                    Your Order ID is {data.orders[0].order_id}<br/>
                    Status : {getStatus(data.orders[0])}<br/>
                    Created On : {data.orders[0].created}<br/>
                    <MakePayment order={data.orders[0]} username={username} />
                  </div>
                );
              }
            }}
            
          </Subscription>
          <hr/>
        </div>
      </Grid>
    </div>
  ))


class MakePayment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paymentDone: false,
      loading: null,
      error: null,
      order: props.order,
      username: "1"
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick = async () => {
    this.setState({loading: true});
    try {
      const response = await fetch(
        PAYMENT_URL,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            info: {
              full_name: this.state.username,
              credit_card_number: '1234 1234 1234 1234',
              cvv: '111'
            },
            metadata: {
              amount: 500,
              type: 'credit_card'
            },
            order_id: this.state.order.order_id
          })
        }
      );
      const respObj = await response.json();

      if (response.status !== 200) {
        this.setState({loading: false, error: respObj.toString(), paymentDone: false});
      } else {
        this.setState({paymentDone: true, loading: false, error: null});
      }
    } catch (err) {
      this.setState({loading: false, error: err.toString(), paymentDone: false});
    }
  }

  render () {
    if (!this.props.order.order_valid) {
      return (
        <Button bsStyle="primary" disabled>Waiting for order validation...</Button>
      )
    }

    if (this.props.order.payment_valid) {
      return (
        null
      )
    }

    if (this.state.error) {
      console.error(JSON.stringify(this.state.error, null, 2));
    }

    const buttonText = () => {
      const { loading, paymentDone, error} = this.state;
      if (loading) { return "Processing ..."; }
      if (error) { return "Error! Try again"; }
      if (paymentDone) { return "Done!"; }
      return "Make payment";
    }

    return (
      <div>
        <h4>Card details:</h4>
        <b>Name:</b> {username}<br/>
        <b>Card number:</b> 1234 1234 1234 1234<br/>
        <b>CVV: </b> 111 <br/>
        <b>Amount: </b> ₹500<br/>
        <br/>
        <Button
          bsStyle="primary"
          disabled={this.state.loading}
          onClick={this.onClick}
        >
          {buttonText()}
        </Button>
      </div>
    );
  }
}
export default withData(Order);