fontdue-js 1.10.2 → 1.11.0-alpha2

package/dist/__generated__/StoreModalReview_order.graphql.js

@@ -9,11 +9,25 @@ exports.default = void 0;
 // @ts-nocheck
 
 const node = function () {
-  var v0 = [{
-    "args": null,
-    "kind": "FragmentSpread",
-    "name": "StoreModalReviewIdentity_identity"
-  }];
+  var v0 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "email",
+      "storageKey": null
+    },
+    v1 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v2 = {
+      "args": null,
+      "kind": "FragmentSpread",
+      "name": "StoreModalReviewIdentity_identity"
+    };
   return {
     "argumentDefinitions": [],
     "kind": "Fragment",
@@ -26,28 +40,54 @@ const node = function () {
       "kind": "LinkedField",
       "name": "customer",
       "plural": false,
-      "selections": [{
+      "selections": [v0 /*: any*/, v1 /*: any*/],
+
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "concreteType": "Identity",
+      "kind": "LinkedField",
+      "name": "billingIdentity",
+      "plural": false,
+      "selections": [v1 /*: any*/, v0 /*: any*/, {
         "alias": null,
         "args": null,
         "kind": "ScalarField",
-        "name": "email",
+        "name": "phone",
         "storageKey": null
       }, {
         "alias": null,
         "args": null,
         "kind": "ScalarField",
-        "name": "name",
+        "name": "street",
         "storageKey": null
-      }],
-      "storageKey": null
-    }, {
-      "alias": null,
-      "args": null,
-      "concreteType": "Identity",
-      "kind": "LinkedField",
-      "name": "billingIdentity",
-      "plural": false,
-      "selections": v0 /*: any*/,
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "locality",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "administrativeArea",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "country",
+        "storageKey": null
+      }, {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "zip",
+        "storageKey": null
+      }, v2 /*: any*/],
+
       "storageKey": null
     }, {
       "alias": null,
@@ -56,7 +96,8 @@ const node = function () {
       "kind": "LinkedField",
       "name": "licenseeIdentity",
       "plural": false,
-      "selections": v0 /*: any*/,
+      "selections": [v2 /*: any*/],
+
       "storageKey": null
     }, {
       "alias": null,
@@ -161,6 +202,12 @@ const node = function () {
         "storageKey": null
       }],
       "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "completeUrl",
+      "storageKey": null
     }, {
       "args": null,
       "kind": "FragmentSpread",
@@ -174,6 +221,6 @@ const node = function () {
     "abstractKey": null
   };
 }();
-node.hash = 'c7fc7251b9f1cb7f33e0f7a436498492';
+node.hash = '039b531ec1968e12d77dd23e0493a513';
 var _default = node;
 exports.default = _default;

package/dist/__generated__/StripeProvider_viewer.graphql.d.ts

@@ -7,6 +7,11 @@ export declare type StripeProvider_viewer = {
     readonly stripeCredentials: {
         readonly stripePublishableKey: string;
     } | null;
+    readonly currentOrder: {
+        readonly stripePaymentIntent: {
+            readonly clientSecret: string | null;
+        } | null;
+    } | null;
     readonly " $refType": "StripeProvider_viewer";
 };
 export declare type StripeProvider_viewer$data = StripeProvider_viewer;

package/dist/__generated__/StripeProvider_viewer.graphql.js

@@ -43,10 +43,34 @@ const node = {
       "storageKey": null
     }],
     "storageKey": null
+  }, {
+    "alias": null,
+    "args": null,
+    "concreteType": "Order",
+    "kind": "LinkedField",
+    "name": "currentOrder",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "concreteType": "StripePaymentIntent",
+      "kind": "LinkedField",
+      "name": "stripePaymentIntent",
+      "plural": false,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "clientSecret",
+        "storageKey": null
+      }],
+      "storageKey": null
+    }],
+    "storageKey": null
   }],
   "type": "Viewer",
   "abstractKey": null
 };
-node.hash = '700906fdf30c6e4aefcb6eb2b1a7eed5';
+node.hash = '109e9cbd38d24e7517934f5f1e734339';
 var _default = node;
 exports.default = _default;

package/dist/components/Cart/Checkout.d.ts

@@ -12,6 +12,7 @@ interface Checkout_props {
     error?: string | null;
     saveText?: string | null;
     onCancel: () => void;
+    skipPaymentMethod?: boolean;
 }
-declare const Checkout: ({ order, viewer, checkoutStep, setCheckoutStep, onScrollToTop, onComplete, error: errorProp, saveText, onCancel, }: Checkout_props) => JSX.Element;
+declare const Checkout: ({ order, viewer, checkoutStep, setCheckoutStep, onScrollToTop, onComplete, error: errorProp, saveText, onCancel, skipPaymentMethod, }: Checkout_props) => JSX.Element;
 export default Checkout;

package/dist/components/Cart/Checkout.js

@@ -45,7 +45,8 @@ const Checkout = _ref => {
     onComplete,
     error: errorProp,
     saveText = 'Next',
-    onCancel
+    onCancel,
+    skipPaymentMethod = false
   } = _ref;
   const orderData = (0, _reactRelay.useFragment)(_Checkout_order !== void 0 ? _Checkout_order : (_Checkout_order = require("../../__generated__/Checkout_order.graphql"), _Checkout_order.hash && _Checkout_order.hash !== "693ae9c7f2c7fe9a179bad7b86c16928" && console.error("The definition of 'Checkout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_order), order);
   const viewerData = (0, _reactRelay.useFragment)(_Checkout_viewer !== void 0 ? _Checkout_viewer : (_Checkout_viewer = require("../../__generated__/Checkout_viewer.graphql"), _Checkout_viewer.hash && _Checkout_viewer.hash !== "d20d03a2aab3f8bc454ac19fc6368178" && console.error("The definition of 'Checkout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_viewer), viewer);
@@ -126,8 +127,16 @@ const Checkout = _ref => {
       onCompleted: (res, errors) => onCompleted(res, errors, onSuccess)
     });
   };
-  const stripe = (0, _reactStripeJs.useStripe)();
-  const elements = (0, _reactStripeJs.useElements)();
+  let stripe;
+  let elements;
+  if (!skipPaymentMethod) {
+    // TODO this seems like it shouldn't be necessary, once we have items in the
+    // cart and we click "checkout", the order should have already updated with
+    // a clientSecret -- is it possible we need to add to the mutation the fragment
+    // for the StripeProvider?
+    stripe = (0, _reactStripeJs.useStripe)();
+    elements = (0, _reactStripeJs.useElements)();
+  }
   const handleSubmit = () => {
     setSubmitting(true);
     setError(null);
@@ -150,7 +159,7 @@ const Checkout = _ref => {
           licenseeIdentity: licenseeIsBillingIdentity ? null : licenseeIdentity
         }
       }, () => {
-        if (orderData !== null && orderData !== void 0 && orderData.canCompleteWithCoupon) {
+        if (orderData !== null && orderData !== void 0 && orderData.canCompleteWithCoupon || skipPaymentMethod) {
           onComplete();
         } else {
           setCheckoutStep(_CheckoutSteps.default.Payment);
@@ -395,6 +404,7 @@ const Checkout = _ref => {
       className: "checkout-modal__customer-info__check"
     }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
     if (checkoutStep === _CheckoutSteps.default.Payment) {
+      console.log('PAYMent step');
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, billingBreadcrumb, licenseeBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__section"
       }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Cart/index.js

@@ -26,7 +26,8 @@ const CartBase = _ref => {
     status: status
   });
   return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
-    viewer: viewer
+    viewer: viewer,
+    requireClientSecret: false
   }, /*#__PURE__*/_react.default.createElement(_CartOrder.default, {
     viewer: viewer,
     order: currentOrder,

package/dist/components/FontdueProvider/index.d.ts

@@ -4,8 +4,9 @@ import { Components } from '../ComponentsContext';
 export interface FontdueProvider_props {
     children?: React.ReactNode;
     url: string;
+    stripeIntegration?: 'payment-element' | 'card-element';
     config?: Config;
     components?: Components;
 }
-declare const FontdueProvider: ({ children, url, config, components, }: FontdueProvider_props) => JSX.Element;
+declare const FontdueProvider: ({ children, url, stripeIntegration, config, components, }: FontdueProvider_props) => JSX.Element;
 export default FontdueProvider;

package/dist/components/FontdueProvider/index.js

@@ -21,11 +21,13 @@ const FontdueProvider = _ref => {
   let {
     children,
     url,
+    stripeIntegration,
     config,
     components
   } = _ref;
   const environment = (0, _react.useRef)((0, _relayEnvironment.default)({
-    url
+    url,
+    stripeIntegration
   }));
   return /*#__PURE__*/_react.default.createElement(_reactRelay.RelayEnvironmentProvider, {
     environment: environment.current

package/dist/components/Root/index.js

@@ -124,6 +124,7 @@ const Root = props => {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_FontdueProvider.default, {
     url: props.url,
+    stripeIntegration: props.stripeIntegration,
     config: props.config,
     components: props.components
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(elements).map(_ref => {

package/dist/components/StoreModal/StoreModalCheckout.js

@@ -56,7 +56,8 @@ const StoreModalCheckout = _ref => {
       onCancel: () => {},
       onComplete: handleComplete,
       saveText: canSkipCheckout ? 'Save' : 'Next',
-      error: checkoutError
+      error: checkoutError,
+      skipPaymentMethod: true
     })
   });
 };

package/dist/components/StoreModal/StoreModalContainer.js

@@ -9,7 +9,6 @@ var _reactRedux = require("react-redux");
 var _StoreModalContainer = _interopRequireDefault(require("../elements/StoreModalContainer"));
 var _reactRelay = require("react-relay");
 var _relayRuntime = require("relay-runtime");
-var _StripeProvider = _interopRequireDefault(require("../StripeProvider"));
 var _StoreModalCheckoutContext = _interopRequireDefault(require("./StoreModalCheckoutContext"));
 var _CheckoutSteps = _interopRequireDefault(require("../Cart/CheckoutSteps"));
 var _StoreModalLoadingScreen = _interopRequireDefault(require("../elements/StoreModalLoadingScreen"));
@@ -42,7 +41,7 @@ const StoreModalContainer = _ref => {
   let {
     children
   } = _ref;
-  const data = (0, _reactRelay.useLazyLoadQuery)(_StoreModalContainerQuery !== void 0 ? _StoreModalContainerQuery : (_StoreModalContainerQuery = require("../../__generated__/StoreModalContainerQuery.graphql"), _StoreModalContainerQuery.hash && _StoreModalContainerQuery.hash !== "81f28eb741b23eaa8bce3bdbe1635ea9" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery), {});
+  const data = (0, _reactRelay.useLazyLoadQuery)(_StoreModalContainerQuery !== void 0 ? _StoreModalContainerQuery : (_StoreModalContainerQuery = require("../../__generated__/StoreModalContainerQuery.graphql"), _StoreModalContainerQuery.hash && _StoreModalContainerQuery.hash !== "67cf3b7a14c2b8ff47a8138e0f234624" && console.error("The definition of 'StoreModalContainerQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalContainerQuery), {});
   const dispatch = (0, _reactRedux.useDispatch)();
   const showCartButton = ((_currentOrder$orderIt = (_currentOrder = data.viewer.currentOrder) === null || _currentOrder === void 0 ? void 0 : (_currentOrder$orderIt2 = _currentOrder.orderItems) === null || _currentOrder$orderIt2 === void 0 ? void 0 : _currentOrder$orderIt2.length) !== null && _currentOrder$orderIt !== void 0 ? _currentOrder$orderIt : 0) > 0;
   const handleClose = (0, _react.useCallback)(() => {
@@ -73,9 +72,7 @@ const StoreModalContainer = _ref => {
   };
   const [checkoutStep, setCheckoutStep] = (0, _react.useState)(_CheckoutSteps.default.Customer);
   const [checkoutError, setCheckoutError] = (0, _react.useState)(null);
-  return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
-    viewer: data.viewer
-  }, /*#__PURE__*/_react.default.createElement(_StoreModalCheckoutContext.default.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_StoreModalCheckoutContext.default.Provider, {
     value: {
       checkoutStep,
       setCheckoutStep,
@@ -96,7 +93,7 @@ const StoreModalContainer = _ref => {
     body: /*#__PURE__*/_react.default.createElement(_react.Suspense, {
       fallback: /*#__PURE__*/_react.default.createElement(_StoreModalLoadingScreen.default, null)
     }, children)
-  })));
+  }));
 };
 var _default = StoreModalContainer;
 exports.default = _default;

package/dist/components/StoreModal/StoreModalReview.js

@@ -19,7 +19,7 @@ var _StoreModalReviewIdentity = _interopRequireDefault(require("./StoreModalRevi
 var _StoreModalReviewConfirm = _interopRequireDefault(require("../elements/StoreModalReviewConfirm"));
 var _StoreModalDownload = _interopRequireDefault(require("./StoreModalDownload"));
 var _StoreModalCheckoutContext = _interopRequireDefault(require("./StoreModalCheckoutContext"));
-var _CheckoutSteps = _interopRequireDefault(require("../Cart/CheckoutSteps"));
+var _StripeProvider = _interopRequireDefault(require("../StripeProvider"));
 var _StoreModalReviewCompleteOrderMutation, _StoreModalReview_order, _StoreModalReview_viewer, _StoreModalReviewQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -34,77 +34,86 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // just paid for
 const submitCompleteMutation = _StoreModalReviewCompleteOrderMutation !== void 0 ? _StoreModalReviewCompleteOrderMutation : (_StoreModalReviewCompleteOrderMutation = require("../../__generated__/StoreModalReviewCompleteOrderMutation.graphql"), _StoreModalReviewCompleteOrderMutation.hash && _StoreModalReviewCompleteOrderMutation.hash !== "de20197df49deb030c473adbd9560e03" && console.error("The definition of 'StoreModalReviewCompleteOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReviewCompleteOrderMutation);
 const StoreModalReview = _ref => {
-  var _order$stripePaymentI, _order$stripePaymentM, _order$orderItems, _viewer$settings$eula, _viewer$settings;
+  var _order$stripePaymentI, _order$orderItems, _viewer$settings$eula, _viewer$settings;
   let {
     viewer: viewerKey,
     order: orderKey
   } = _ref;
-  const order = (0, _reactRelay.useFragment)(_StoreModalReview_order !== void 0 ? _StoreModalReview_order : (_StoreModalReview_order = require("../../__generated__/StoreModalReview_order.graphql"), _StoreModalReview_order.hash && _StoreModalReview_order.hash !== "c7fc7251b9f1cb7f33e0f7a436498492" && console.error("The definition of 'StoreModalReview_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReview_order), orderKey);
+  const order = (0, _reactRelay.useFragment)(_StoreModalReview_order !== void 0 ? _StoreModalReview_order : (_StoreModalReview_order = require("../../__generated__/StoreModalReview_order.graphql"), _StoreModalReview_order.hash && _StoreModalReview_order.hash !== "039b531ec1968e12d77dd23e0493a513" && console.error("The definition of 'StoreModalReview_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReview_order), orderKey);
   const viewer = (0, _reactRelay.useFragment)(_StoreModalReview_viewer !== void 0 ? _StoreModalReview_viewer : (_StoreModalReview_viewer = require("../../__generated__/StoreModalReview_viewer.graphql"), _StoreModalReview_viewer.hash && _StoreModalReview_viewer.hash !== "9136dd09437ff0102d8235b72b9b5c66" && console.error("The definition of 'StoreModalReview_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReview_viewer), viewerKey);
   const dispatch = (0, _reactRedux.useDispatch)();
   const [completing, setCompleting] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)(null);
   const {
-    setCheckoutStep,
-    setCheckoutError
+    setCheckoutStep
   } = (0, _react.useContext)(_StoreModalCheckoutContext.default);
   const {
     scrollToTop
   } = (0, _react.useContext)(_StoreModalContainerContext.default);
   const environment = (0, _reactRelay.useRelayEnvironment)();
   const stripe = (0, _reactStripeJs.useStripe)();
+  const elements = (0, _reactStripeJs.useElements)();
   if (!order) return null;
   if (order.completedWithCoupon || ((_order$stripePaymentI = order.stripePaymentIntent) === null || _order$stripePaymentI === void 0 ? void 0 : _order$stripePaymentI.status) === 'succeeded') {
     return /*#__PURE__*/_react.default.createElement(_StoreModalDownload.default, {
       order: order
     });
   }
+  const billingIdentity = order.billingIdentity;
   const handleSubmit = () => {
+    var _billingIdentity$stre, _billingIdentity$stre2, _billingIdentity$stre3, _billingIdentity$loca, _billingIdentity$admi, _billingIdentity$zip;
+    if (!stripe || !elements) return;
+    if (!billingIdentity) {
+      console.error('No billing identity, required for payment');
+      return;
+    }
     setCompleting(true);
     setError(null);
-    (0, _relayRuntime.commitMutation)(environment, {
-      mutation: submitCompleteMutation,
-      variables: {},
-      onCompleted: (response, errors) => {
-        var _response$completeOrd, _response$completeOrd2, _response$completeOrd3, _response$completeOrd4;
-        const requiresAction = (_response$completeOrd = response.completeOrder) === null || _response$completeOrd === void 0 ? void 0 : _response$completeOrd.requiresAction;
-        const secret = (_response$completeOrd2 = response.completeOrder) === null || _response$completeOrd2 === void 0 ? void 0 : (_response$completeOrd3 = _response$completeOrd2.order) === null || _response$completeOrd3 === void 0 ? void 0 : (_response$completeOrd4 = _response$completeOrd3.stripePaymentIntent) === null || _response$completeOrd4 === void 0 ? void 0 : _response$completeOrd4.clientSecret;
-        if (requiresAction === 'use_stripe_sdk' && secret) {
-          stripe === null || stripe === void 0 ? void 0 : stripe.handleCardAction(secret).then(result => {
-            if (result.error) {
-              var _result$error$message;
-              console.error(result.error);
-              setCompleting(false);
-              const error = (_result$error$message = result.error.message) !== null && _result$error$message !== void 0 ? _result$error$message : 'We were unable to complete your payment, please re-enter your card details any try again';
-              setCheckoutError === null || setCheckoutError === void 0 ? void 0 : setCheckoutError(error);
-              setCheckoutStep === null || setCheckoutStep === void 0 ? void 0 : setCheckoutStep(_CheckoutSteps.default.Payment);
-              dispatch({
-                type: 'STORE_MODAL_NAVIGATE',
-                route: 'checkout'
-              });
-            } else {
-              // re-confirm
-              handleSubmit();
-            }
-          });
-          return;
-        }
-        if (requiresAction === 'enter_new_payment_method') {
-          setCompleting(false);
-          setCheckoutError === null || setCheckoutError === void 0 ? void 0 : setCheckoutError('We were unable to complete your payment, please re-enter your card details any try again');
-          setCheckoutStep === null || setCheckoutStep === void 0 ? void 0 : setCheckoutStep(_CheckoutSteps.default.Payment);
-          dispatch({
-            type: 'STORE_MODAL_NAVIGATE',
-            route: 'checkout'
-          });
-          return;
+    if (order.canCompleteWithCoupon) {
+      (0, _relayRuntime.commitMutation)(environment, {
+        mutation: submitCompleteMutation,
+        variables: {},
+        onCompleted: (_response, errors) => {
+          if (errors && errors.length > 0) {
+            setCompleting(false);
+            setError(errors[0].message);
+            scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
+            return;
+          }
+
+          // TODO: test this
+
+          window.location.href = order.completeUrl;
         }
-        if (errors && errors.length > 0) {
-          setCompleting(false);
-          setError(errors[0].message);
-          scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
+      });
+      return;
+    }
+    stripe === null || stripe === void 0 ? void 0 : stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: order.completeUrl,
+        payment_method_data: {
+          billing_details: {
+            email: billingIdentity.email,
+            name: billingIdentity.name,
+            address: {
+              line1: (_billingIdentity$stre = billingIdentity.street) === null || _billingIdentity$stre === void 0 ? void 0 : _billingIdentity$stre.split(/\n/)[0],
+              line2: (_billingIdentity$stre2 = (_billingIdentity$stre3 = billingIdentity.street) === null || _billingIdentity$stre3 === void 0 ? void 0 : _billingIdentity$stre3.split(/\n/)[1]) !== null && _billingIdentity$stre2 !== void 0 ? _billingIdentity$stre2 : '',
+              city: (_billingIdentity$loca = billingIdentity.locality) !== null && _billingIdentity$loca !== void 0 ? _billingIdentity$loca : '',
+              state: (_billingIdentity$admi = billingIdentity.administrativeArea) !== null && _billingIdentity$admi !== void 0 ? _billingIdentity$admi : '',
+              country: billingIdentity.country,
+              postal_code: (_billingIdentity$zip = billingIdentity.zip) !== null && _billingIdentity$zip !== void 0 ? _billingIdentity$zip : undefined
+            }
+          }
         }
       }
+    }).then(result => {
+      if ('error' in result) {
+        setCompleting(false);
+      }
+    }).catch(error => {
+      console.log(error);
+      setCompleting(false);
     });
   };
   const handleClickSection = step => {
@@ -129,7 +138,15 @@ const StoreModalReview = _ref => {
       }) : order.licenseeIdentity && /*#__PURE__*/_react.default.createElement(_StoreModalReviewIdentity.default, {
         identity: order.licenseeIdentity
       }),
-      payment: ((_order$stripePaymentM = order.stripePaymentMethod) === null || _order$stripePaymentM === void 0 ? void 0 : _order$stripePaymentM.card) && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, order.stripePaymentMethod.card.brandFormatted, ' ', order.stripePaymentMethod.card.last4),
+      payment: /*#__PURE__*/_react.default.createElement(_reactStripeJs.PaymentElement, {
+        options: {
+          fields: {
+            billingDetails: {
+              address: 'never'
+            }
+          }
+        }
+      }),
       items: (_order$orderItems = order.orderItems) === null || _order$orderItems === void 0 ? void 0 : _order$orderItems.map(item => /*#__PURE__*/_react.default.createElement(_StoreModalReviewItem.default, {
         key: item.id
       }, {
@@ -144,7 +161,8 @@ const StoreModalReview = _ref => {
       }),
       confirm: /*#__PURE__*/_react.default.createElement(_StoreModalReviewConfirm.default, {
         onSubmit: handleSubmit,
-        submitting: completing
+        submitting: completing,
+        disabled: !stripe || !elements
       }, {
         eulaText: /*#__PURE__*/_react.default.createElement("div", {
           dangerouslySetInnerHTML: {
@@ -160,11 +178,13 @@ const StoreModalReviewQueryContainer = _ref2 => {
   let {
     prepared
   } = _ref2;
-  const data = (0, _reactRelay.usePreloadedQuery)(_StoreModalReviewQuery !== void 0 ? _StoreModalReviewQuery : (_StoreModalReviewQuery = require("../../__generated__/StoreModalReviewQuery.graphql"), _StoreModalReviewQuery.hash && _StoreModalReviewQuery.hash !== "41e195913e09a2e7e2320c97d36faa7c" && console.error("The definition of 'StoreModalReviewQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReviewQuery), prepared.reviewQuery);
-  return /*#__PURE__*/_react.default.createElement(StoreModalReview, {
+  const data = (0, _reactRelay.usePreloadedQuery)(_StoreModalReviewQuery !== void 0 ? _StoreModalReviewQuery : (_StoreModalReviewQuery = require("../../__generated__/StoreModalReviewQuery.graphql"), _StoreModalReviewQuery.hash && _StoreModalReviewQuery.hash !== "e0aed024d4a8ba04c42e455e63e8c373" && console.error("The definition of 'StoreModalReviewQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalReviewQuery), prepared.reviewQuery);
+  return /*#__PURE__*/_react.default.createElement(_StripeProvider.default, {
+    viewer: data.viewer
+  }, /*#__PURE__*/_react.default.createElement(StoreModalReview, {
     viewer: data.viewer,
     order: data.viewer.currentOrder
-  });
+  }));
 };
 var _default = StoreModalReviewQueryContainer;
 exports.default = _default;

package/dist/components/StripeProvider/index.d.ts

@@ -3,6 +3,7 @@ import { StripeProvider_viewer$key } from '../../__generated__/StripeProvider_vi
 interface StripeProvider_props {
     viewer: StripeProvider_viewer$key;
     children: JSX.Element;
+    requireClientSecret?: boolean;
 }
-declare const StripeProvider: ({ viewer, children }: StripeProvider_props) => JSX.Element;
+declare const StripeProvider: ({ viewer, children, requireClientSecret, }: StripeProvider_props) => JSX.Element;
 export default StripeProvider;

package/dist/components/StripeProvider/index.js

@@ -12,21 +12,31 @@ var _StripeProvider_viewer;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StripeProvider = _ref => {
-  var _data$stripeCredentia, _data$settings;
+  var _data$stripeCredentia, _data$settings, _data$currentOrder$st, _data$currentOrder, _data$currentOrder$st2;
   let {
     viewer,
-    children
+    children,
+    requireClientSecret = true
   } = _ref;
-  const data = (0, _reactRelay.useFragment)(_StripeProvider_viewer !== void 0 ? _StripeProvider_viewer : (_StripeProvider_viewer = require("../../__generated__/StripeProvider_viewer.graphql"), _StripeProvider_viewer.hash && _StripeProvider_viewer.hash !== "700906fdf30c6e4aefcb6eb2b1a7eed5" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer), viewer);
+  const data = (0, _reactRelay.useFragment)(_StripeProvider_viewer !== void 0 ? _StripeProvider_viewer : (_StripeProvider_viewer = require("../../__generated__/StripeProvider_viewer.graphql"), _StripeProvider_viewer.hash && _StripeProvider_viewer.hash !== "109e9cbd38d24e7517934f5f1e734339" && console.error("The definition of 'StripeProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProvider_viewer), viewer);
   const stripeKey = (_data$stripeCredentia = data.stripeCredentials) === null || _data$stripeCredentia === void 0 ? void 0 : _data$stripeCredentia.stripePublishableKey;
   const stripePromiseRef = (0, _react.useRef)(stripeKey ? (0, _stripeJs.loadStripe)(stripeKey) : null);
   const cssSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : _data$settings.uiFontUrl;
+  const clientSecret = (_data$currentOrder$st = (_data$currentOrder = data.currentOrder) === null || _data$currentOrder === void 0 ? void 0 : (_data$currentOrder$st2 = _data$currentOrder.stripePaymentIntent) === null || _data$currentOrder$st2 === void 0 ? void 0 : _data$currentOrder$st2.clientSecret) !== null && _data$currentOrder$st !== void 0 ? _data$currentOrder$st : undefined;
+  if (requireClientSecret && !clientSecret) return children;
   return /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
     stripe: stripePromiseRef.current,
     options: {
+      appearance: {
+        theme: 'flat',
+        variables: {
+          borderRadius: '0'
+        }
+      },
       fonts: cssSrc ? [{
         cssSrc
-      }] : undefined
+      }] : undefined,
+      clientSecret
     }
   }, children);
 };

package/dist/components/elements/StoreModalReviewConfirm/index.d.ts

@@ -6,6 +6,7 @@ interface StoreModalReviewConfirm_props {
     };
     onSubmit: () => void;
     submitting: boolean;
+    disabled: boolean;
 }
 declare const StoreModalReviewConfirm: React.FunctionComponent<StoreModalReviewConfirm_props>;
 export default StoreModalReviewConfirm;

package/dist/components/elements/StoreModalReviewConfirm/index.js

@@ -18,7 +18,8 @@ const StoreModalReviewConfirm = _ref => {
       submitText
     },
     onSubmit,
-    submitting
+    submitting,
+    disabled
   } = _ref;
   const [acceptedEULA, setAcceptedEULA] = (0, _react.useState)(false);
   const {
@@ -40,7 +41,7 @@ const StoreModalReviewConfirm = _ref => {
   }, config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "eula-agreement"
   }, eulaText)), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    disabled: !acceptedEULA || submitting,
+    disabled: disabled || !acceptedEULA || submitting,
     className: "store-modal__review-confirm__button",
     onClick: onSubmit
   }, submitText));

package/dist/components/elements/StoreModalReviewLayout/index.js

@@ -44,9 +44,7 @@ const StoreModalReviewLayout = _ref => {
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "store-modal__review__heading"
   }, "Licensee information"), /*#__PURE__*/_react.default.createElement("div", null, licensee)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "store-modal__review__section store-modal__review__section--button",
-    tabIndex: 0,
-    onClick: () => onClickSection(_CheckoutSteps.default.Payment)
+    className: "store-modal__review__section"
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "store-modal__review__heading"
   }, "Payment information"), /*#__PURE__*/_react.default.createElement("div", null, payment)), /*#__PURE__*/_react.default.createElement("div", {

package/dist/relay-environment.d.ts

@@ -1,6 +1,7 @@
 import { Environment } from 'react-relay';
 interface CreateRelayEnvironmentOptions {
     url?: string;
+    stripeIntegration?: 'payment-element' | 'card-element';
 }
 declare const createRelayEnvironment: (options: CreateRelayEnvironmentOptions) => Environment;
 export default createRelayEnvironment;

package/dist/relay-environment.js

@@ -11,7 +11,8 @@ const createRelayEnvironment = options => {
     return fetch(url, {
       method: 'POST',
       headers: {
-        'content-type': 'application/json'
+        'content-type': 'application/json',
+        'fontdue-stripe-integration': options.stripeIntegration || 'payment-element'
       },
       credentials: 'include',
       body: JSON.stringify({

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "fontdue-js",
-  "version": "1.10.2",
+  "version": "1.11.0-alpha2",
   "main": "index.js",
   "scripts": {
-    "build": "run-p relay build-js build-css build-ts-declarations",
+    "build": "npm run relay && run-p build-js build-css build-ts-declarations",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",
     "build-ts-declarations": "tsc",
     "build-css": "sass --load-path=node_modules src/index.scss fontdue.css",