JezK

Edit File: sc-payment.entry.js.map

{"file":"sc-payment.entry.js","mappings":";;;;;;;;;;;;;;;;;;AAAA,MAAM,YAAY,GAAG,0kBAA0kB,CAAC;AAChmB,wBAAe,YAAY;;;;;;;;;;;;;;;;;;uEC0DwC,UAAE,uCAAuC,UAAE;;;;6WAqB7E,UAAE,+EAIK,UAAE,mJAE3B,UAAE,weAQI,UAAE,oFAImB,UAAE,gKAE3B,UAAE;;;;;;yEAckD,UAAE,yCAAyC,UAAE;;;mYAY5E,UAAE,mIAE3B,UAAE;;;;kUAcE,UAAE,wGAImB,UAAE,oJAE3B,UAAE;;;;;;;uWAoBuB,eAAO,CAAC,UAAE,yHAEnC,UAAE;;;;;;;;;;;;;;;;;;;;;;;;sgCAgDQ,UAAE;;;gEAQA,UAAE,4DAKP,UAAE;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controllers/checkout-form/payment/sc-payment.scss?tag=sc-payment&encapsulation=shadow","src/components/controllers/checkout-form/payment/sc-payment.tsx"],"sourcesContent":[":host {\n display: flex !important;\n flex-direction: column;\n gap: var(--sc-input-label-margin);\n position: relative;\n font-family: var(--sc-font-sans);\n}\n\n.sc-payment-toggle-summary {\n line-height: 1;\n display: flex;\n align-items: center;\n gap: 0.5em;\n font-weight: var(--sc-font-weight-semibold);\n}\n\n.sc-payment-label {\n display: flex;\n justify-content: space-between;\n}\n\n.sc-payment-instructions {\n color: var(--sc-color-gray-600);\n font-size: var(--sc-font-size-small);\n line-height: var(--sc-line-height-dense);\n}\n\n.sc-payment {\n &__stripe-card-element {\n display: flex !important;\n flex-direction: column;\n gap: var(--sc-input-label-margin);\n position: relative;\n }\n}\n","import { Component, Element, Fragment, h, Host, Prop } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { state as checkoutState } from '@store/checkout';\nimport { state as processorsState } from '@store/processors';\nimport { state as selectedProcessor } from '@store/selected-processor';\nimport { ManualPaymentMethods } from './ManualPaymentMethods';\nimport {\n getAvailableProcessor,\n hasMultipleProcessorChoices,\n hasMultipleMethodChoices,\n availableManualPaymentMethods,\n availableMethodTypes,\n availableProcessors,\n hasOtherAvailableCreditCardProcessor,\n processorSupportsCurrentCurrency,\n} from '@store/processors/getters';\nimport { addQueryArgs } from '@wordpress/url';\nimport { MockProcessor } from './MockProcessor';\nimport { PaymentMethodType, Processor } from '../../../../types';\nimport { getRazorpayMethodIcon, getRazorpayMethodLabel } from '../../../../functions/razorpay';\n\n/**\n * @part base - The elements base wrapper.\n * @part form-control - The form control wrapper.\n * @part label - The input label.\n * @part help-text - Help text that describes how to use the input.\n * @part test-badge__base - Test badge base.\n * @part test-badge__content - Test badge content.\n */\n@Component({\n tag: 'sc-payment',\n styleUrl: 'sc-payment.scss',\n shadow: true,\n})\nexport class ScPayment {\n /** This element. */\n @Element() el: HTMLScPaymentElement;\n\n @Prop() stripePaymentElement: boolean;\n\n /** Disabled processor types */\n @Prop() disabledProcessorTypes: string[];\n\n @Prop() secureNotice: string;\n\n /** The input's label. */\n @Prop() label: string;\n\n /** Hide the test mode badge */\n @Prop() hideTestModeBadge: boolean;\n\n componentWillLoad() {\n processorsState.disabled = {\n ...processorsState.disabled,\n processors: this.disabledProcessorTypes,\n };\n }\n\n renderStripe(processor) {\n const title = hasOtherAvailableCreditCardProcessor('stripe') ? __('Credit Card (Stripe)', 'surecart') : __('Credit Card', 'surecart');\n return (\n <sc-payment-method-choice key={processor?.id} processor-id=\"stripe\" card={this.stripePaymentElement}>\n <span slot=\"summary\" class=\"sc-payment-toggle-summary\">\n <sc-icon name=\"credit-card\" style={{ fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n <span>{title}</span>\n </span>\n\n <div class=\"sc-payment__stripe-card-element\">\n <slot name=\"stripe\" />\n </div>\n </sc-payment-method-choice>\n );\n }\n\n renderPayPal(processor) {\n return (\n <Fragment>\n <sc-payment-method-choice key={processor?.id} processor-id=\"paypal\">\n <span slot=\"summary\" class=\"sc-payment-toggle-summary\">\n <sc-icon name=\"paypal\" style={{ width: '80px', fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n <sc-visually-hidden>{__('PayPal', 'surecart')}</sc-visually-hidden>\n </span>\n\n <sc-card>\n <sc-payment-selected label={__('PayPal selected for check out.', 'surecart')}>\n <sc-icon slot=\"icon\" name=\"paypal\" style={{ width: '80px' }} aria-hidden=\"true\"></sc-icon>\n {__('Another step will appear after submitting your order to complete your purchase details.', 'surecart')}\n </sc-payment-selected>\n </sc-card>\n </sc-payment-method-choice>\n {!hasOtherAvailableCreditCardProcessor('paypal') && (\n <sc-payment-method-choice key={processor?.id} processor-id=\"paypal\" method-id=\"card\">\n <span slot=\"summary\" class=\"sc-payment-toggle-summary\">\n <sc-icon name=\"credit-card\" style={{ fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n <span>{__('Credit Card', 'surecart')}</span>\n </span>\n\n <sc-card>\n <sc-payment-selected label={__('Credit Card selected for check out.', 'surecart')}>\n <sc-icon name=\"credit-card\" slot=\"icon\" style={{ fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n {__('Another step will appear after submitting your order to complete your purchase details.', 'surecart')}\n </sc-payment-selected>\n </sc-card>\n </sc-payment-method-choice>\n )}\n </Fragment>\n );\n }\n\n renderMock(processor: Processor) {\n return <MockProcessor processor={processor} />;\n }\n\n renderPaystack(processor: Processor) {\n const title = hasOtherAvailableCreditCardProcessor('paystack') ? __('Credit Card (Paystack)', 'surecart') : __('Credit Card', 'surecart');\n\n if (!processorSupportsCurrentCurrency(processor)) return;\n\n return (\n <sc-payment-method-choice key={processor?.id} processor-id=\"paystack\">\n <span slot=\"summary\" class=\"sc-payment-toggle-summary\">\n <sc-icon name=\"credit-card\" style={{ fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n <span>{title}</span>\n </span>\n\n <sc-card>\n <sc-payment-selected label={__('Credit Card selected for check out.', 'surecart')}>\n <sc-icon slot=\"icon\" name=\"credit-card\" aria-hidden=\"true\"></sc-icon>\n {__('Another step will appear after submitting your order to complete your purchase details.', 'surecart')}\n </sc-payment-selected>\n </sc-card>\n <sc-checkout-paystack-payment-provider />\n </sc-payment-method-choice>\n );\n }\n\n /** Combined Razorpay — Razorpay's modal fans out all enabled methods itself. */\n renderRazorpayCombined(processor: Processor) {\n return (\n <sc-payment-method-choice key={processor?.id} processor-id=\"razorpay\">\n <span slot=\"summary\" class=\"sc-payment-toggle-summary\">\n <sc-icon name=\"razorpay\" style={{ fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n <span>{__('Cards, Netbanking, Wallet & UPI', 'surecart')}</span>\n </span>\n\n <sc-card>\n <sc-payment-selected label={__('Cards, Netbanking, Wallet & UPI selected for check out.', 'surecart')}>\n <sc-icon slot=\"icon\" name=\"razorpay\" aria-hidden=\"true\"></sc-icon>\n {__('Another step will appear after submitting your order to complete your purchase details.', 'surecart')}\n </sc-payment-selected>\n </sc-card>\n </sc-payment-method-choice>\n );\n }\n\n /** Per-method Razorpay tile. Rendered as a sibling so `sc-payment-method-choice` can wire it into `sc-toggles`. */\n renderRazorpayMethodChoice(method: PaymentMethodType) {\n const label = getRazorpayMethodLabel(method.id) ?? method.id;\n const icon = getRazorpayMethodIcon(method.id);\n\n return (\n <sc-payment-method-choice key={`razorpay-${method.id}`} processor-id=\"razorpay\" method-id={method.id}>\n <span slot=\"summary\" class=\"sc-payment-toggle-summary\">\n <sc-icon name={icon} style={{ fontSize: '24px' }} aria-hidden=\"true\"></sc-icon>\n <span>{label}</span>\n </span>\n\n <sc-card>\n <sc-payment-selected label={sprintf(__('%s selected for check out.', 'surecart'), label)}>\n <sc-icon slot=\"icon\" name={icon} aria-hidden=\"true\"></sc-icon>\n {__('Another step will appear after submitting your order to complete your purchase details.', 'surecart')}\n </sc-payment-selected>\n </sc-card>\n </sc-payment-method-choice>\n );\n }\n\n renderRazorpay(processor: Processor) {\n if (!processorSupportsCurrentCurrency(processor)) return;\n\n // Split into per-method tiles on recurring checkouts — Razorpay's recurring API requires\n // an explicit `payment_method_type`, while the one-time modal fans all methods out itself.\n const methods = availableMethodTypes() || [];\n if (checkoutState.checkout?.reusable_payment_method_required && methods.length > 0) {\n return methods.map(method => this.renderRazorpayMethodChoice(method));\n }\n return this.renderRazorpayCombined(processor);\n }\n\n render() {\n // payment is not required for this order.\n if (checkoutState.checkout?.payment_method_required === false) {\n return null;\n }\n\n // `sc-toggles` wrapper when >1 choice will render (processors, paypal's card fallback, or per-method tiles).\n const Tag = hasMultipleProcessorChoices() || hasMultipleMethodChoices() || selectedProcessor?.id === 'paypal' ? 'sc-toggles' : 'div';\n const mollie = getAvailableProcessor('mollie');\n const razorpay = getAvailableProcessor('razorpay');\n\n return (\n <Host>\n {/* Mounted at Host level so the provider isn't reparented when its own `processorsState.methods` write flips the `Tag` wrapper. */}\n {processorSupportsCurrentCurrency(razorpay) && <sc-checkout-razorpay-payment-provider processor-id={razorpay.id} />}\n <sc-form-control label={this.label} exportparts=\"label, help-text, form-control\">\n <div class=\"sc-payment-label\" slot=\"label\">\n <div>{this.label}</div>\n <slot name=\"label-end\" />\n </div>\n\n {mollie?.id ? (\n <sc-checkout-mollie-payment processor-id={mollie?.id}></sc-checkout-mollie-payment>\n ) : (\n <Tag collapsible={false} theme=\"container\">\n {!availableProcessors()?.length && !availableManualPaymentMethods()?.length && (\n <sc-alert type=\"info\" open>\n {window?.scData?.user_permissions?.manage_sc_shop_settings ? (\n <Fragment>\n {__('You do not have any processors enabled for this mode and cart. ', 'surecart')}\n <a\n href={addQueryArgs(`${window?.scData?.admin_url}admin.php`, {\n page: 'sc-settings',\n tab: 'processors',\n })}\n style={{ color: 'var(--sc-color-gray-700)' }}\n >\n {__('Please configure your processors', 'surecart')}\n </a>\n .\n </Fragment>\n ) : (\n __('Please contact us for payment.', 'surecart')\n )}\n </sc-alert>\n )}\n {(availableProcessors() || []).map(processor => {\n switch (processor?.processor_type) {\n case 'stripe':\n return this.renderStripe(processor);\n case 'paypal':\n return this.renderPayPal(processor);\n case 'paystack':\n return this.renderPaystack(processor);\n case 'razorpay':\n return this.renderRazorpay(processor);\n case 'mock':\n return this.renderMock(processor);\n }\n })}\n <ManualPaymentMethods methods={availableManualPaymentMethods()} />\n </Tag>\n )}\n </sc-form-control>\n </Host>\n );\n }\n}\n"],"version":3}