{"version":3,"names":["scStripePaymentRequestCss","ScStripePaymentRequestStyle0","wp","i18n","__","this","debugError","h","key","class","part","ref","el","request","openWormhole","ScStripePaymentRequest"],"sources":["src/components/ui/stripe-payment-request/sc-stripe-payment-request.scss?tag=sc-stripe-payment-request","src/components/ui/stripe-payment-request/sc-stripe-payment-request.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.or {\n  display: none;\n  margin: var(--sc-form-section-spacing) 0;\n}\n\n.request--loaded {\n  .or {\n    display: block;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { PaymentRequestOptions, Stripe } from '@stripe/stripe-js';\nimport { loadStripe } from '@stripe/stripe-js/pure';\nimport { __ } from '@wordpress/i18n';\nimport { state as checkoutState, onChange as onCheckoutChange } from '@store/checkout';\n\nimport { createOrUpdateCheckout, finalizeCheckout } from '../../../services/session';\nimport { Checkout, LineItem, Prices, Product, ResponseError } from '../../../types';\nimport { createErrorNotice } from '@store/notices/mutations';\nimport { openWormhole } from 'stencil-wormhole';\n\n@Component({\n  tag: 'sc-stripe-payment-request',\n  styleUrl: 'sc-stripe-payment-request.scss',\n  shadow: false,\n})\nexport class ScStripePaymentRequest {\n  @Element() el: HTMLElement;\n  private request: HTMLDivElement;\n  private stripe: Stripe;\n  private paymentRequest: any;\n  private elements: any;\n  private removeCheckoutListener: () => void;\n\n  /** Your stripe connected account id. */\n  @Prop() stripeAccountId: string;\n\n  /** Stripe publishable key */\n  @Prop() publishableKey: string;\n\n  /** Country */\n  @Prop() country: string = 'US';\n\n  /** Prices */\n  @Prop() prices: Prices;\n\n  /** Label */\n  @Prop() label: string = 'total';\n\n  /** Amount */\n  @Prop() amount: number = 0;\n\n  /** Payment request theme */\n  @Prop() theme: string = 'dark';\n\n  @Prop() error: ResponseError | null;\n\n  /** Is this in debug mode. */\n  @Prop() debug: boolean = false;\n\n  /** Has this loaded */\n  @State() loaded: boolean = false;\n  @State() debugError: string;\n\n  @Event() scFormSubmit: EventEmitter<any>;\n  @Event() scPaid: EventEmitter<void>;\n  @Event() scPayError: EventEmitter<any>;\n  @Event() scSetState: EventEmitter<string>;\n  @Event() scPaymentRequestLoaded: EventEmitter<boolean>;\n  @Event() scUpdateOrderState: EventEmitter<any>;\n\n  private pendingEvent: any;\n\n  private confirming: boolean;\n\n  async componentWillLoad() {\n    if (!this?.publishableKey || !this?.stripeAccountId) {\n      return true;\n    }\n\n    try {\n      this.stripe = await loadStripe(this.publishableKey, { stripeAccount: this.stripeAccountId });\n      this.elements = this.stripe.elements();\n      this.paymentRequest = this.stripe.paymentRequest({\n        country: this.country,\n        requestShipping: true,\n        requestPayerEmail: true,\n        shippingOptions: [\n          {\n            id: 'free',\n            label: 'Free Shipping',\n            detail: 'No shipping required',\n            amount: 0,\n          },\n        ],\n        ...(this.getRequestObject(checkoutState?.checkout) as PaymentRequestOptions),\n      });\n    } catch (e) {\n      console.log(e?.message || __('Stripe could not be loaded', 'surecart'));\n    }\n  }\n\n  handleOrderChange() {\n    if (!this.paymentRequest) return;\n    if (this.pendingEvent) return;\n    this.paymentRequest.update(this.getRequestObject(checkoutState?.checkout));\n  }\n\n  @Watch('loaded')\n  handleLoaded() {\n    this.scPaymentRequestLoaded.emit(true);\n  }\n\n  @Watch('error')\n  handleErrorChange() {\n    if (this.pendingEvent) {\n      this.pendingEvent.complete('error');\n    }\n  }\n\n  async handleShippingChange(ev: any) {\n    const { shippingAddress, updateWith } = ev;\n    try {\n      const order = (await createOrUpdateCheckout({\n        id: checkoutState?.checkout?.id,\n        data: {\n          shipping_address: {\n            ...(shippingAddress?.name ? { name: shippingAddress?.name } : {}),\n            ...(shippingAddress?.addressLine?.[0] ? { line_1: shippingAddress?.addressLine?.[0] } : {}),\n            ...(shippingAddress?.addressLine?.[1] ? { line_2: shippingAddress?.addressLine?.[1] } : {}),\n            ...(shippingAddress?.city ? { city: shippingAddress?.city } : {}),\n            ...(shippingAddress?.country ? { country: shippingAddress?.country } : {}),\n            ...(shippingAddress?.postalCode ? { postal_code: shippingAddress?.postalCode } : {}),\n            ...(shippingAddress?.region ? { state: shippingAddress?.region } : {}),\n          },\n        },\n      })) as Checkout;\n      updateWith({\n        status: 'success',\n        total: {\n          amount: order?.amount_due || 0,\n          label: __('Total', 'surecart'),\n        },\n      });\n    } catch (e) {\n      e.updateWith({ status: 'invalid_shipping_address' });\n    }\n  }\n\n  /** Only append price name if there's more than one product price in the session. */\n  getName(item: LineItem) {\n    const otherPrices = Object.keys(this.prices || {}).filter(key => {\n      const price = this.prices[key];\n      // @ts-ignore\n      return price.product === item.price.product.id;\n    });\n\n    let name = '';\n    if (otherPrices.length > 1) {\n      name = `${(item?.price?.product as Product)?.name} \\u2013 ${item?.price?.name}`;\n    } else {\n      name = (item?.price?.product as Product)?.name;\n    }\n    return name;\n  }\n\n  getRequestObject(order: Checkout) {\n    const displayItems = (order?.line_items?.data || []).map(item => {\n      return {\n        label: this.getName(item),\n        amount: item.ad_hoc_amount !== null ? item.ad_hoc_amount : item.subtotal_amount,\n      };\n    });\n\n    return {\n      currency: checkoutState.currencyCode,\n      total: {\n        amount: order?.amount_due || 0,\n        label: __('Total', 'surecart'),\n      },\n      displayItems,\n    };\n  }\n\n  componentDidLoad() {\n    this.handleOrderChange();\n    this.removeCheckoutListener = onCheckoutChange('checkout', () => this.handleOrderChange());\n    if (!this.elements) {\n      return;\n    }\n\n    const paymentRequestElement = this.elements.create('paymentRequestButton', {\n      paymentRequest: this.paymentRequest,\n      style: {\n        paymentRequestButton: {\n          theme: this.theme,\n        },\n      },\n    });\n\n    // handle payment method.\n    this.paymentRequest.on('paymentmethod', e => this.handlePaymentMethod(e));\n    this.paymentRequest.on('shippingaddresschange', async ev => await this.handleShippingChange(ev));\n\n    // mount button.\n    this.paymentRequest\n      .canMakePayment()\n      .then(result => {\n        if (!result) {\n          if (location.protocol !== 'https:') {\n            if (this.debug) {\n              this.debugError = __('You must serve this page over HTTPS to display express payment buttons.', 'surecart');\n            }\n            console.log('SSL needed to display payment buttons.');\n          } else {\n            if (this.debug) {\n              this.debugError = __('You do not have any wallets set up in your browser.', 'surecart');\n            }\n            console.log('No wallets available.');\n          }\n          return;\n        }\n        paymentRequestElement.mount(this.request);\n        this.loaded = true;\n      })\n      .catch(e => {\n        console.error(e);\n      });\n  }\n\n  /** Handle the payment method. */\n  async handlePaymentMethod(ev) {\n    const { billing_details } = ev?.paymentMethod;\n    const { shippingAddress } = ev;\n\n    try {\n      this.scSetState.emit('FINALIZE');\n      // update session with shipping/billing\n      (await createOrUpdateCheckout({\n        id: checkoutState?.checkout?.id,\n        data: {\n          email: billing_details?.email,\n          name: billing_details?.name,\n          shipping_address: {\n            ...(shippingAddress?.name ? { name: shippingAddress?.name } : {}),\n            ...(shippingAddress?.addressLine?.[0] ? { line_1: shippingAddress?.addressLine?.[0] } : {}),\n            ...(shippingAddress?.addressLine?.[1] ? { line_2: shippingAddress?.addressLine?.[1] } : {}),\n            ...(shippingAddress?.city ? { city: shippingAddress?.city } : {}),\n            ...(shippingAddress?.country ? { country: shippingAddress?.country } : {}),\n            ...(shippingAddress?.postalCode ? { postal_code: shippingAddress?.postalCode } : {}),\n            ...(shippingAddress?.region ? { state: shippingAddress?.region } : {}),\n          },\n        },\n      })) as Checkout;\n\n      // finalize\n      const session = (await finalizeCheckout({\n        id: checkoutState?.checkout.id,\n        query: {\n          form_id: checkoutState.formId,\n        },\n        processor: { id: 'stripe', manual: false },\n      })) as Checkout;\n\n      // confirm payment\n      this.scSetState.emit('PAYING');\n      await this.confirmPayment(session, ev);\n      this.scSetState.emit('PAID');\n      // paid.\n      this.scPaid.emit();\n      // Report to the browser that the confirmation was successful, prompting\n      // it to close the browser payment method collection interface.\n      ev.complete('success');\n    } catch (e) {\n      console.error(e);\n      this.scPayError.emit(e);\n      createErrorNotice(e);\n      ev.complete('fail');\n    } finally {\n      this.confirming = false;\n    }\n  }\n\n  async confirmPayment(val: Checkout, ev) {\n    // must be finalized\n    if (val?.status !== 'finalized') return;\n    // must have a secret\n    if (!val?.payment_intent?.processor_data?.stripe?.client_secret) return;\n    // need an external_type\n    if (!val?.payment_intent?.processor_data?.stripe?.type) return;\n    // must have an external intent id\n    if (!val?.payment_intent?.external_intent_id) return;\n    // prevent possible double-charges\n    if (this.confirming) return;\n    this.confirming = true;\n\n    let response;\n    if (val?.payment_intent?.processor_data?.stripe?.type == 'setup') {\n      response = await this.confirmCardSetup(val?.payment_intent?.processor_data?.stripe.client_secret, ev);\n    } else {\n      response = await this.confirmCardPayment(val?.payment_intent?.processor_data?.stripe.client_secret, ev);\n    }\n    if (response?.error) {\n      throw response.error;\n    }\n    // Check if the PaymentIntent requires any actions and if so let Stripe.js\n    // handle the flow. If using an API version older than \"2019-02-11\"\n    // instead check for: `paymentIntent.status === \"requires_source_action\"`.\n    if (response?.paymentIntent?.status === 'requires_action' || response?.paymentIntent?.status === 'requires_source_action') {\n      // Let Stripe.js handle the rest of the payment flow.\n      const result = await this.stripe.confirmCardPayment(val?.payment_intent?.processor_data?.stripe.client_secret);\n      // The payment failed -- ask your customer for a new payment method.\n      if (result.error) {\n        throw result.error;\n      }\n      return result;\n    }\n\n    return response;\n  }\n\n  /** Confirm card payment. */\n  confirmCardPayment(secret, ev) {\n    return this.stripe.confirmCardPayment(secret, { payment_method: ev.paymentMethod.id }, { handleActions: false });\n  }\n\n  /** Confirm card setup. */\n  confirmCardSetup(secret, ev) {\n    return this.stripe.confirmCardSetup(secret, { payment_method: ev.paymentMethod.id }, { handleActions: false });\n  }\n\n  disconnectedCallback() {\n    this.removeCheckoutListener();\n  }\n\n  render() {\n    return (\n      <div class={{ 'request': true, 'request--loaded': this.loaded }}>\n        {this.debug && this.debugError && (\n          <div>\n            <slot name=\"debug-fallback\" />\n            <sc-alert type=\"info\" open>\n              <span slot=\"title\">{__('Express Payment', 'surecart')}</span>\n              {this.debugError}\n            </sc-alert>\n          </div>\n        )}\n        <div class=\"sc-payment-request-button\" part=\"button\" ref={el => (this.request = el as HTMLDivElement)}></div>\n      </div>\n    );\n  }\n}\n\nopenWormhole(ScStripePaymentRequest, ['prices'], false);\n"],"mappings":"2eAAA,MAAMA,EAA4B,mHAClC,MAAAC,EAAeD,E,4oCCuFiBE,GAAAC,KAAAC,GAAE,yC,w3CA2CjBF,GAAAC,KAAAC,GAAE,sB,m2BAqCJF,GAAAC,KAAAC,GAAE,qB,skBAiCeF,GAAAC,KAAAC,GAAE,qF,2FAKFF,GAAAC,KAAAC,GAAE,iE,ihIA8HAF,GAAAC,KAAAC,GAAE,+BAAAC,KAAAC,aAAAC,EAAA,OAAAC,IAAA,2CAAAC,MAAA,4BAAAC,KAAA,SAAAC,IAAAC,GAAAP,KAAAQ,QAAAD,I,6GAWpCE,EAAAC,EAAA,kB","ignoreList":[]}