FileMaster

Edit File: sc-stripe-payment-element.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{p as pure}from"./pure.js";import{s as state$2}from"./watchers5.js";import{o as onChange,s as state}from"./mutations2.js";import{o as onChange$1}from"./store3.js";import"./watchers4.js";import{s as state$1,d as getProcessorByType}from"./getters5.js";import{c as currentFormState}from"./getters3.js";import{c as createErrorNotice}from"./mutations3.js";import{u as updateFormState}from"./mutations5.js";import{t as toStripeAddress,b as getResolvedBillingAddress}from"./getters2.js";import{d as defineCustomElement$3}from"./sc-skeleton2.js";import{d as defineCustomElement$2}from"./sc-text2.js";import{a as addQueryArgs}from"./add-query-args.js";const scStripePaymentElementCss="sc-stripe-payment-element{display:block}sc-stripe-payment-element [hidden]{display:none}.loader{display:grid;height:128px;gap:2em}.loader__row{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}.loader__details{display:grid;gap:0.5em}",ScStripePaymentElementStyle0=scStripePaymentElementCss,ScStripePaymentElement$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.scPaid=createEvent(this,"scPaid",7),this.scSetState=createEvent(this,"scSetState",7),this.scPaymentInfoAdded=createEvent(this,"scPaymentInfoAdded",7),this.error=void 0,this.confirming=!1,this.isInitializingStripe=!1,this.isCreatingUpdatingStripeElement=!1,this.loaded=!1,this.styles=void 0}async componentWillLoad(){this.fetchStyles(),this.syncCheckoutMode()}async handleStylesChange(){this.createOrUpdateElements()}async fetchStyles(){this.styles=await this.getComputedStyles()}getComputedStyles(){return new Promise((e=>{let t=setInterval((()=>{const i=window.getComputedStyle(document.body);i.getPropertyValue("--sc-color-primary-500")&&(clearInterval(t),e(i))}),100)}))}async syncCheckoutMode(){onChange("checkout",(()=>{this.initializeStripe()}))}async componentDidLoad(){this.initializeStripe()}async initializeStripe(){var e,t;if(void 0===(null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.live_mode)||(null===(t=null==state$1?void 0:state$1.instances)||void 0===t?void 0:t.stripe)||this.isInitializingStripe)return;this.isInitializingStripe=!0;const{processor_data:i}=getProcessorByType("stripe")||{};try{state$1.instances.stripe=await pure.loadStripe(null==i?void 0:i.publishable_key,{stripeAccount:null==i?void 0:i.account_id}),this.error=""}catch(e){return this.error=(null==e?void 0:e.message)||wp.i18n.__("Stripe could not be loaded","surecart"),void(this.isInitializingStripe=!1)}this.createOrUpdateElements(),this.handleUpdateElement(),this.unlistenToCheckout=onChange("checkout",(()=>{this.fetchStyles(),this.createOrUpdateElements(),this.handleUpdateElement()})),this.unlistenToFormState=onChange$1("formState",(()=>{var e;(null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.payment_method_required)&&"paying"===currentFormState()&&this.maybeConfirmOrder()})),this.isInitializingStripe=!1}clearStripeInstances(){var e,t,i,s;if(this.isInitializingStripe=!1,this.isCreatingUpdatingStripeElement=!1,null==this?void 0:this.element){try{null===(t=null===(e=this.element)||void 0===e?void 0:e.unmount)||void 0===t||t.call(e)}catch(e){console.warn("Could not unmount Stripe element:",e)}this.element=null}(null===(i=null==state$1?void 0:state$1.instances)||void 0===i?void 0:i.stripeElements)&&(state$1.instances.stripeElements=null),(null===(s=null==state$1?void 0:state$1.instances)||void 0===s?void 0:s.stripe)&&(state$1.instances.stripe=null)}disconnectedCallback(){this.unlistenToFormState(),this.unlistenToCheckout(),this.clearStripeInstances()}getElementsConfig(){var e,t,i,s;const n=getComputedStyle(this.el);return{mode:(null===(e=state.checkout)||void 0===e?void 0:e.remaining_amount_due)>0?"payment":"setup",amount:null===(t=state.checkout)||void 0===t?void 0:t.remaining_amount_due,currency:null===(i=state.checkout)||void 0===i?void 0:i.currency,setupFutureUsage:(null===(s=state.checkout)||void 0===s?void 0:s.reusable_payment_method_required)?"off_session":null,appearance:{variables:{colorPrimary:n.getPropertyValue("--sc-color-primary-500")||"black",colorText:n.getPropertyValue("--sc-input-label-color")||"black",borderRadius:n.getPropertyValue("--sc-input-border-radius-medium")||"4px",colorBackground:n.getPropertyValue("--sc-input-background-color")||"white",fontSizeBase:n.getPropertyValue("--sc-input-font-size-medium")||"16px",colorLogo:n.getPropertyValue("--sc-stripe-color-logo")||"light",colorLogoTab:n.getPropertyValue("--sc-stripe-color-logo-tab")||"light",colorLogoTabSelected:n.getPropertyValue("--sc-stripe-color-logo-tab-selected")||"light",colorTextPlaceholder:n.getPropertyValue("--sc-input-placeholder-color")||"black"},rules:{".Input":{border:n.getPropertyValue("--sc-input-border")}}}}}maybeApplyFilters(e){var t,i,s;return(null===(i=null===(t=null===window||void 0===window?void 0:window.wp)||void 0===t?void 0:t.hooks)||void 0===i?void 0:i.applyFilters)?{...e,paymentMethodOrder:window.wp.hooks.applyFilters("surecart_stripe_payment_element_payment_method_order",[],state.checkout),wallets:window.wp.hooks.applyFilters("surecart_stripe_payment_element_wallets",{},state.checkout),terms:window.wp.hooks.applyFilters("surecart_stripe_payment_element_terms",{},state.checkout),fields:window.wp.hooks.applyFilters("surecart_stripe_payment_element_fields",null!==(s=e.fields)&&void 0!==s?s:{})}:e}createOrUpdateElements(){var e,t,i,s,n,o;if((null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.payment_method_required)&&state$1.instances.stripe&&!this.isCreatingUpdatingStripeElement&&(!(null===(t=state.checkout)||void 0===t?void 0:t.status)||!["paid","processing"].includes(null===(i=state.checkout)||void 0===i?void 0:i.status))){if(this.isCreatingUpdatingStripeElement=!0,!state$1.instances.stripeElements){state$1.instances.stripeElements=state$1.instances.stripe.elements(this.getElementsConfig());const e=toStripeAddress(getResolvedBillingAddress()),t=this.maybeApplyFilters({defaultValues:{billingDetails:{...(null===(s=state.checkout)||void 0===s?void 0:s.name)?{name:state.checkout.name}:{},...(null===(n=state.checkout)||void 0===n?void 0:n.email)?{email:state.checkout.email}:{},...(null===(o=state.checkout)||void 0===o?void 0:o.phone)?{phone:state.checkout.phone}:{},...e?{address:e}:{}}},fields:{billingDetails:{email:"never"}}});return state$1.instances.stripeElements.create("payment",t).mount(this.container),this.element=state$1.instances.stripeElements.getElement("payment"),this.element.on("ready",(()=>this.loaded=!0)),this.element.on("change",(e=>{var t,i,s,n,o,a,l;state.paymentMethodRequiresShipping=["cashapp","klarna","clearpay"].includes(null===(t=null==e?void 0:e.value)||void 0===t?void 0:t.type),e.complete&&this.scPaymentInfoAdded.emit({checkout_id:null===(i=state.checkout)||void 0===i?void 0:i.id,currency:null===(s=state.checkout)||void 0===s?void 0:s.currency,processor_type:"stripe",total_amount:null===(n=state.checkout)||void 0===n?void 0:n.total_amount,line_items:null===(o=state.checkout)||void 0===o?void 0:o.line_items,payment_method:{billing_details:{email:null===(a=state.checkout)||void 0===a?void 0:a.email,name:null===(l=state.checkout)||void 0===l?void 0:l.name}}})})),void(this.isCreatingUpdatingStripeElement=!1)}state$1.instances.stripeElements.update(this.getElementsConfig()),this.isCreatingUpdatingStripeElement=!1}}handleUpdateElement(){var e,t,i,s;if(!this.element)return;if("draft"!==(null===(e=state.checkout)||void 0===e?void 0:e.status))return;const n=toStripeAddress(getResolvedBillingAddress()),o=this.maybeApplyFilters({defaultValues:{billingDetails:{...(null===(t=state.checkout)||void 0===t?void 0:t.name)?{name:state.checkout.name}:{},...(null===(i=state.checkout)||void 0===i?void 0:i.email)?{email:state.checkout.email}:{},...(null===(s=state.checkout)||void 0===s?void 0:s.phone)?{phone:state.checkout.phone}:{},...n?{address:n}:{}}},fields:{billingDetails:{email:"never"}}});this.element.update(o)}async submit(){if("stripe"!==(null==state$2?void 0:state$2.id))return;const{error:e}=await state$1.instances.stripeElements.submit();return e?(console.error({error:e}),updateFormState("REJECT"),createErrorNotice(e),void(this.error=e.message)):void 0}async maybeConfirmOrder(){var e,t,i,s,n,o,a,l,r,c,d,m,u,p;if("stripe"===(null==state$2?void 0:state$2.id)&&"stripe"===(null===(t=null===(e=state.checkout)||void 0===e?void 0:e.payment_intent)||void 0===t?void 0:t.processor_type)&&(null===(o=null===(n=null===(s=null===(i=state.checkout)||void 0===i?void 0:i.payment_intent)||void 0===s?void 0:s.processor_data)||void 0===n?void 0:n.stripe)||void 0===o?void 0:o.type)&&(null===(c=null===(r=null===(l=null===(a=state.checkout)||void 0===a?void 0:a.payment_intent)||void 0===l?void 0:l.processor_data)||void 0===r?void 0:r.stripe)||void 0===c?void 0:c.client_secret))return await this.confirm(null===(p=null===(u=null===(m=null===(d=state.checkout)||void 0===d?void 0:d.payment_intent)||void 0===m?void 0:m.processor_data)||void 0===u?void 0:u.stripe)||void 0===p?void 0:p.type)}async confirm(e,t={}){var i,s,n,o,a,l,r;const c=toStripeAddress(getResolvedBillingAddress()),d={elements:state$1.instances.stripeElements,clientSecret:null===(o=null===(n=null===(s=null===(i=state.checkout)||void 0===i?void 0:i.payment_intent)||void 0===s?void 0:s.processor_data)||void 0===n?void 0:n.stripe)||void 0===o?void 0:o.client_secret,confirmParams:{return_url:addQueryArgs(window.location.href,{...state.checkout.id?{checkout_id:state.checkout.id}:{}}),payment_method_data:{billing_details:{...(null===(a=state.checkout)||void 0===a?void 0:a.email)?{email:state.checkout.email}:{},...(null===(l=state.checkout)||void 0===l?void 0:l.name)?{name:state.checkout.name}:{},...(null===(r=state.checkout)||void 0===r?void 0:r.phone)?{phone:state.checkout.phone}:{},...c?{address:c}:{}}}},redirect:"if_required",...t};if(!this.confirming&&state$1.instances.stripe)try{this.scSetState.emit("PAYING");const t="setup"===e?await state$1.instances.stripe.confirmSetup(d):await state$1.instances.stripe.confirmPayment(d);if(null==t?void 0:t.error)throw this.error=t.error.message,t.error;this.scSetState.emit("PAID"),this.scPaid.emit()}catch(e){console.error(e),updateFormState("REJECT"),createErrorNotice(e),e.message&&(this.error=e.message)}finally{this.confirming=!1}}render(){return h("div",{key:"62045da9bff951fac624f0ee095b1ee6fd5d6ec7",class:"sc-stripe-payment-element","data-testid":"stripe-payment-element"},!!this.error&&h("sc-text",{key:"e0209d355f391e4c87791a32857723a8dd2f65f6",style:{color:"var(--sc-color-danger-500)","--font-size":"var(--sc-font-size-small)",marginBottom:"0.5em"}},this.error),h("div",{key:"cd5dab61cf6ef21734ea1bd65c6c30339c5b4f25",class:"loader",hidden:this.loaded},h("div",{key:"5a6e1bf3de0980a246ee742433a7de49b38f16ef",class:"loader__row"},h("div",{key:"4a8f54f8042e6baf73c845ee6ba0bae1e0945b93",style:{width:"50%"}},h("sc-skeleton",{key:"dc03cd2e49b2d84ae8144c630ca8c272a8d26913",style:{width:"50%",marginBottom:"0.5em"}}),h("sc-skeleton",{key:"8f946572cd75d5010aa7ee95c23e1de080cd0c0b"})),h("div",{key:"612cd57feb0809fd39b77c50b6431952a52f4984",style:{flex:"1"}},h("sc-skeleton",{key:"15ed79b9f32f30ab10404e1a114966e0b9ddbbed",style:{width:"50%",marginBottom:"0.5em"}}),h("sc-skeleton",{key:"47b07c198bf27f739f1d2a5c05cfbbcb65c76e27"})),h("div",{key:"0d1d298c9782e9a212a21fb3128b6634ca7b4db3",style:{flex:"1"}},h("sc-skeleton",{key:"1e8be09d9b30a178376b5927f71b4175cc0ded2d",style:{width:"50%",marginBottom:"0.5em"}}),h("sc-skeleton",{key:"2fbc497390ec3055a36397ed271336d22fa5e35d"}))),h("div",{key:"b28e232f00ac20952be7fc5b4a58990e3f9e47c1",class:"loader__details"},h("sc-skeleton",{key:"11b99f2ef41ba0b4c2abc2c432c9ee508ed30206",style:{height:"1rem"}}),h("sc-skeleton",{key:"c5ad73ac9c81feeeeb4a36d4b2480315763ad9a7",style:{height:"1rem",width:"30%"}}))),h("div",{key:"5b9da343268d24c0f0704636975cd13d245c4a3f",hidden:!this.loaded,class:"sc-payment-element-container",ref:e=>this.container=e}))}get el(){return this}static get watchers(){return{styles:["handleStylesChange"]}}static get style(){return ScStripePaymentElementStyle0}},[0,"sc-stripe-payment-element",{error:[32],confirming:[32],isInitializingStripe:[32],isCreatingUpdatingStripeElement:[32],loaded:[32],styles:[32],confirm:[64]},void 0,{styles:["handleStylesChange"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["sc-stripe-payment-element","sc-skeleton","sc-text"].forEach((e=>{switch(e){case"sc-stripe-payment-element":customElements.get(e)||customElements.define(e,ScStripePaymentElement$1);break;case"sc-skeleton":customElements.get(e)||defineCustomElement$3();break;case"sc-text":customElements.get(e)||defineCustomElement$2()}}))}const ScStripePaymentElement=ScStripePaymentElement$1,defineCustomElement=defineCustomElement$1;export{ScStripePaymentElement,defineCustomElement};

Back