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

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useEffect,useContext}from'react';import{i18n}from'@shopgate/engage/core';import{Elements,CardNumberElement,useStripe,useElements}from'@stripe/react-stripe-js';import Context from"./StripeProvider.context";import connect from"./StripeProvider.connector";import{promise as stripePromise,loadSdk}from"./sdk";import{useCheckoutContext}from"../../hooks/common";import PaymentContext from"../context";/**
 * Prepares checkout with stripe request and creates event data.
 * @param {Stripe} stripe Stripe
 * @param {Object} req  Stripe request.
 * @param {Order} order Order
 * @return {Promise}
 */export var prepareStripeRequestCheckout=function prepareStripeRequestCheckout(stripe,req,order){return new Promise(/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(resolve,reject){var availability;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:// Update totals if they updated due to promotions etc.
req.update({total:{amount:Math.round(order.total*100),label:'Checkout'}});// Recheck availability again.
_context2.next=3;return req.canMakePayment();case 3:availability=_context2.sent;if(availability){_context2.next=7;break;}reject(availability);return _context2.abrupt("return");case 7:// Handle success
req.on('paymentmethod',/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(event){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:resolve(event);case 1:case"end":return _context.stop();}},_callee);}));return function(_x3){return _ref2.apply(this,arguments);};}());// Handle cancellation
req.on('cancel',function(err){reject(err);});// Show to user
req.show();case 10:case"end":return _context2.stop();}},_callee2);}));return function(_x,_x2){return _ref.apply(this,arguments);};}());};/**
 * Triggers the payment using stripe payment request api.
 * @param {Object} stripe Stripe
 * @param {Object} req Stripe Request
 * @param {Object} order Order
 * @param {Object} activeTransaction Active request
 * @returns {Promise}
 */var triggerStripeRequest=/*#__PURE__*/function(){var _ref3=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(stripe,req,order,activeTransaction){var _activeTransaction$ch;var event,intent,result,step;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:// Create checkout event on stripe.
// For apple pay the event is already created beforehands
// This is due to safaris limitation that the `show` needs
// to happen directly inside a gesture handler (click, ..)
event=req.preparedEvent;if(event){_context3.next=5;break;}_context3.next=4;return prepareStripeRequestCheckout(stripe,req,order);case 4:event=_context3.sent;case 5:// Send over to stripe and let it validate.
intent=activeTransaction===null||activeTransaction===void 0?void 0:(_activeTransaction$ch=activeTransaction.checkoutParams)===null||_activeTransaction$ch===void 0?void 0:_activeTransaction$ch.paymentIntent;/* eslint-disable camelcase */_context3.next=8;return stripe.confirmCardPayment(intent,{payment_method:event.paymentMethod.id},{handleActions:false});case 8:result=_context3.sent;if(!result.error){_context3.next=12;break;}event.complete('fail');throw result.error;case 12:event.complete('success');if(!(result.paymentIntent.status==='requires_action')){_context3.next=20;break;}_context3.next=16;return stripe.confirmCardPayment(intent);case 16:step=_context3.sent;if(!step.error){_context3.next=19;break;}throw step.error;case 19:return _context3.abrupt("return",step);case 20:return _context3.abrupt("return",result);case 21:case"end":return _context3.stop();}},_callee3);}));return function triggerStripeRequest(_x4,_x5,_x6,_x7){return _ref3.apply(this,arguments);};}();/**
 * A Provider that is needed for all stripe based
 * @param {Object} props The components props.
 * @returns {JSX}
 */var StripeProvider=function StripeProvider(_ref4){var children=_ref4.children;var _React$useState=React.useState(null),_React$useState2=_slicedToArray(_React$useState,2),error=_React$useState2[0],setError=_React$useState2[1];var _useCheckoutContext=useCheckoutContext(),order=_useCheckoutContext.order,paymentData=_useCheckoutContext.paymentData;var stripe=useStripe();var elements=useElements();var contextApi=React.useMemo(function(){return{error:error,setError:setError,fulfillTransaction:function(){var _fulfillTransaction=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref5){var _activeTransaction$ch2;var paymentTransactions,activeTransaction,_ref7,_paymentIntent,_ref8,incomingError,paymentIntent;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:paymentTransactions=_ref5.paymentTransactions;// Make sure api responded with a new payment transaction.
activeTransaction=paymentTransactions[0];if(activeTransaction===null||activeTransaction===void 0?void 0:(_activeTransaction$ch2=activeTransaction.checkoutParams)===null||_activeTransaction$ch2===void 0?void 0:_activeTransaction$ch2.paymentIntent){_context4.next=5;break;}setError(i18n.text('checkout.errors.noPaymentTransaction'));return _context4.abrupt("return",false);case 5:if(!((paymentData===null||paymentData===void 0?void 0:paymentData.meta)&&(paymentData===null||paymentData===void 0?void 0:paymentData.meta.stripeRequest))){_context4.next=17;break;}_context4.prev=6;_context4.next=9;return triggerStripeRequest(stripe,paymentData.meta.stripeRequest,order,activeTransaction);case 9:_ref7=_context4.sent;_paymentIntent=_ref7.paymentIntent;return _context4.abrupt("return",[{id:activeTransaction.id,checkoutParams:{paymentIntentId:_paymentIntent.id}}]);case 14:_context4.prev=14;_context4.t0=_context4["catch"](6);return _context4.abrupt("return",false);case 17:_context4.next=19;return stripe.confirmCardPayment(activeTransaction.checkoutParams.paymentIntent,{/* eslint-disable-next-line camelcase */payment_method:{card:elements.getElement(CardNumberElement)}});case 19:_ref8=_context4.sent;incomingError=_ref8.error;paymentIntent=_ref8.paymentIntent;if(!incomingError){_context4.next=26;break;}console.error(incomingError,activeTransaction.checkoutParams.paymentIntent);setError(incomingError.message);return _context4.abrupt("return",false);case 26:return _context4.abrupt("return",[{id:activeTransaction.id,checkoutParams:{paymentIntentId:paymentIntent.id}}]);case 27:case"end":return _context4.stop();}},_callee4,null,[[6,14]]);}));function fulfillTransaction(_x8){return _fulfillTransaction.apply(this,arguments);}return fulfillTransaction;}()};},[elements,error,order,paymentData,stripe]);var _useContext=useContext(PaymentContext),registerPaymentMethod=_useContext.registerPaymentMethod;useEffect(function(){registerPaymentMethod(contextApi);},[contextApi,registerPaymentMethod]);return React.createElement(Context.Provider,{value:contextApi},children);};/**
 * A Provider that is needed for all stripe based
 * @param {Object} props The components props.
 * @returns {JSX}
 */var StripeProviderWrapper=function StripeProviderWrapper(_ref9){var publishableKey=_ref9.publishableKey,children=_ref9.children;React.useEffect(function(){if(!publishableKey){return;}loadSdk(publishableKey);},[publishableKey]);return React.createElement(Elements,{stripe:stripePromise},React.createElement(StripeProvider,null,children));};StripeProviderWrapper.defaultProps={publishableKey:null};export default connect(StripeProviderWrapper);