@shopgate/engage/checkout/paymentMethods/stripe/StripeButton.js

Shopgate's ENGAGE library.

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import Button from "../../components/PaymentMethodButton";
import { i18n } from "../../../core/helpers/i18n";
import { loadSdk } from "./sdk";
import { useCheckoutContext } from "../../hooks/common";
import connect from "./StripeButton.connector";
import googlePayLogo from "./googlepay.png";
import applePayLogo from "./applepay.svg";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  mark: css({
    height: 32
  }).toString()
};

/**
 * Stripe Payment Button Component
 * @param {Object} props Props
 * @param {string} props.publishableKey Publishable Key
 * @param {Function} props.onChange onChange handler
 * @param {boolean} props.active Whether the method is active
 * @param {Object} props.activePaymentMeta Active payment meta
 * @returns {JSX}
 */
const StripeButton = ({
  publishableKey,
  onChange,
  active,
  activePaymentMeta: subMethod,
  ...props
}) => {
  const [stripeRequest, setStripeRequest] = useState(null);
  const [stripeRequestType, setStripeRequestType] = useState(null);
  const {
    order
  } = useCheckoutContext();
  useEffect(() => {
    if (!publishableKey) {
      return;
    }
    /** */
    const fn = async () => {
      if (!order) {
        return;
      }
      const stripe = await loadSdk(publishableKey);
      const req = stripe.paymentRequest({
        country: order.addressSequences?.[0]?.country,
        currency: order.currencyCode.toLowerCase(),
        total: {
          label: 'Checkout',
          amount: Math.round(order.total * 100)
        }
      });
      const availability = await req.canMakePayment();
      if (!availability) {
        return;
      }
      setStripeRequest(req);
      setStripeRequestType(availability);
    };
    fn();
  }, [order, publishableKey]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Button, {
      ...props,
      onChange: () => onChange(null),
      active: active && !subMethod,
      children: i18n.text('checkout.payment.buttons.stripe')
    }), stripeRequest && stripeRequestType?.applePay ? /*#__PURE__*/_jsx(Button, {
      ...props,
      active: !!(active && subMethod),
      onChange: () => onChange({
        stripeRequest,
        stripeRequestType
      }),
      children: /*#__PURE__*/_jsx("img", {
        className: styles.mark,
        alt: "ApplePay",
        src: applePayLogo
      })
    }) : null, stripeRequest && !stripeRequestType?.applePay ? /*#__PURE__*/_jsx(Button, {
      ...props,
      active: !!(active && subMethod),
      onChange: () => onChange({
        stripeRequest,
        stripeRequestType
      }),
      children: /*#__PURE__*/_jsx("img", {
        className: styles.mark,
        alt: "GooglePay",
        src: googlePayLogo
      })
    }) : null]
  });
};
StripeButton.defaultProps = {
  publishableKey: null,
  activePaymentMeta: null
};
export default connect(StripeButton);