{"size": 3288, "ext": "js", "max_stars_repo_path": "components/paymentRequestForm.js", "max_stars_repo_name": "ernestoho/stripe-demo-connect-kavholm-marketplace", "max_stars_repo_stars_event_min_datetime": "2020-01-17T02:47:45.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-07T06:53:37.000Z", "max_issues_repo_path": "components/paymentRequestForm.js", "max_issues_repo_name": "ernestoho/stripe-demo-connect-kavholm-marketplace", "max_issues_repo_issues_event_min_datetime": "2020-05-19T15:37:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-08T14:44:30.000Z", "max_forks_repo_path": "components/paymentRequestForm.js", "max_forks_repo_name": "ernestoho/stripe-demo-connect-kavholm-marketplace", "max_forks_repo_forks_event_min_datetime": "2020-01-26T16:40:11.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-28T11:37:49.000Z"}
{"max_stars_count": 130, "max_issues_count": 24, "max_forks_count": 64, "avg_line_length": 24.5373134328, "max_line_length": 81, "alphanum_fraction": 0.5471411192}
import React, {Component} from 'react';

import {PaymentRequestButtonElement} from 'react-stripe-elements';
import API from '../helpers/api';
import {redirect} from '../utils/redirect';
import logger from '../helpers/logger';

class PaymentRequestForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      canMakePayment: false,
      hasInitialized: false,
    };
  }

  async componentDidUpdate(prevProps) {
    if (!this.props.stripe) {
      return;
    }

    if (this.state.hasInitialized) {
      return;
    }

    if (this.state.hasInitialized && this.props.stripe === prevProps.stripe) {
      return;
    }

    const paymentRequest = this.props.stripe.paymentRequest({
      country: 'US',
      currency: this.props.currency,
      total: {
        label: 'Total',
        amount: this.props.amount,
      },
    });

    paymentRequest.on('paymentmethod', async (ev) => {
      let transactionParams = {
        listingId: 26,
      };

      let onBookingConfirmed = this.props.onBookingConfirmed;
      let req = await API.makeRequest(
        'post',
        `/api/transactions/new`,
        transactionParams,
      );

      if (!req) {
        throw new Error('Booking failed');
        return;
      }

      let paymentRequestSecret = req.paymentRequestSecret;

      // Confirm the PaymentIntent without handling potential next actions (yet).
      this.props.stripe
        .confirmCardPayment(
          paymentRequestSecret,
          {payment_method: ev.paymentMethod.id},
          {handleActions: false},
        )
        .then((confirmResult) => {
          if (confirmResult.error) {
            ev.complete('fail');
          } else {
            ev.complete('success');
            onBookingConfirmed && onBookingConfirmed(req.id);
          }
        });
    });

    let canMakePayment = await paymentRequest.canMakePayment();
    logger.log('PaymentRequestForm.canMakePayment', canMakePayment);
    this.setState({
      canMakePayment: !!canMakePayment,
      hasInitialized: true,
      paymentRequest: paymentRequest,
    });
  }

  render() {
    let className = ['payment-request-form'];

    if (this.state.canMakePayment) {
      className.push('ready');
    }

    return (
      <div className={className.join(' ')}>
        {this.state.canMakePayment && (
          <>
            <PaymentRequestButtonElement
              paymentRequest={this.state.paymentRequest}
              className="PaymentRequestButton"
              style={{
                paymentRequestButton: {
                  theme: 'dark',
                  height: '44px',
                },
              }}
            />
            <p className="tip-text">or pay with card</p>
          </>
        )}

        <style jsx>{`
          .payment-request-form {
            max-height: 0px;
            transition: max-height 0.15s ease-out;
          }

          .ready {
            max-height: 115px;
          }

          .tip-text {
            color: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            font-weight: normal;
            letter-spacing: -0.15px;
            text-align: center;
            margin: 20px 0;
          }
        `}</style>
      </div>
    );
  }
}
export default PaymentRequestForm;
