Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ekashida/50a56d0c4c3082db97e3f107bd1f7d6c to your computer and use it in GitHub Desktop.
Save ekashida/50a56d0c4c3082db97e3f107bd1f7d6c to your computer and use it in GitHub Desktop.
<commerce_builder-checkout-payment-salesforce class="lwc-2j5p0v1i8ah lwc-740crqttth4-host" data-solo-credit-card="">
<div class="lwc-740crqttth4 slds-hide" data-checkout-payment-salesforce-edit="">
<div class="lwc-740crqttth4 slds-p-top_small billing-address">
<fieldset class="lwc-740crqttth4" name="billing-address">
<commerce_unified_checkout-billing-address-group class="lwc-740crqttth4" data-billing-address-group="">
<h3 class="slds-text-heading_small slds-p-bottom_medium">Billing Address</h3>
<lightning-input data-use-same-shipping-address="" checked="" class="slds-form-element" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-checkbox lwc-6o8rhidlqpi="" exportparts="indicator" checked="" variant="standard" lwc-58oju4proqp-host="">
<div lwc-58oju4proqp="" class="slds-form-element__control slds-grow">
<span lwc-58oju4proqp="" class="slds-checkbox" part="input-checkbox">
<input lwc-58oju4proqp="" type="checkbox" part="checkbox" id="checkbox-4" name="use-same-shipping-address" value="" />
<label lwc-58oju4proqp="" class="slds-checkbox__label" for="checkbox-4" part="label-container">
<span part="indicator" class="slds-checkbox_faux" lwc-58oju4proqp=""></span>
<span part="label" lwc-58oju4proqp="" class="slds-form-element__label">My billing address is the same as my shipping address</span>
</label>
</span>
</div>
</lightning-primitive-input-checkbox>
</lightning-input>
<div class="slds-hide">
<commerce_unified_checkout-input-address data-billing-input-address="" class="lwc-5hupo8npnnr-host">
<div class="lwc-5hupo8npnnr slds-form-element">
<div class="lwc-5hupo8npnnr slds-form-element__row name-fields">
<lightning-input class="lwc-5hupo8npnnr slds-size_1-of-2 name-field slds-form-element" data-firstname-field="" data-validate="" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-6" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-7" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.firstNameLabel
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-7" autocomplete="given-name" id="input-7" name="firstname" part="input" required="" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
<lightning-input class="lwc-5hupo8npnnr slds-size_1-of-2 name-field slds-form-element" data-lastname-field="" data-validate="" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-8" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-9" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.lastNameLabel
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-9" autocomplete="family-name" id="input-9" name="lastname" part="input" required="" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
</div>
<lightning-input-address class="lwc-5hupo8npnnr slds-form-element_stacked" data-address-fields="" data-validate="" variant="label-hidden" lwc-5hupo8npnnr-host="">
<fieldset lwc-5hupo8npnnr="" class="slds-form-element slds-form-element_compound slds-form-element_address" part="input-address">
<legend lwc-5hupo8npnnr="" class="slds-form-element__label slds-form-element__legend slds-assistive-text"></legend>
<div lwc-5hupo8npnnr="" class="slds-form-element__control">
<div lwc-5hupo8npnnr="" class="slds-form-element__group">
<div lwc-5hupo8npnnr="" class="slds-form-element__row">
<lightning-lookup-address lwc-5hupo8npnnr="" class="slds-form-element slds-size_6-of-6" data-field="street" lwc-5jokd0eeulf-host="">
<label lwc-5jokd0eeulf="" class="slds-form-element__label" part="label" for="combobox-input-12">
<abbr class="slds-required" lwc-5jokd0eeulf="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.addressLineOneLabel
</label>
<div lwc-5jokd0eeulf="" class="slds-form-element__control">
<lightning-base-combobox lwc-5jokd0eeulf="" class="slds-combobox_container" lwc-mbi94r3lm6-host="">
<div lwc-mbi94r3lm6="" class="slds-combobox_container">
<div lwc-mbi94r3lm6="" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click">
<div lwc-mbi94r3lm6="" class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<div lwc-mbi94r3lm6="" part="input-text">
<div lwc-mbi94r3lm6="" part="input-container">
<input
lwc-mbi94r3lm6=""
class="slds-combobox__input slds-input"
id="combobox-input-12"
type="text"
role="combobox"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="address-line1"
data-value=""
name="street"
placeholder=""
aria-disabled="false"
aria-readonly="false"
aria-autocomplete="list"
aria-owns="dropdown-element-12"
part="input"
aria-controls="dropdown-element-12"
/>
</div>
</div>
<div lwc-mbi94r3lm6="" class="slds-input__icon-group slds-input__icon-group_right">
<lightning-icon lwc-mbi94r3lm6="" class="slds-input__icon slds-input__icon_right slds-icon-utility-search slds-icon_container" icon-name="utility:search" lwc-1t3e59bspvv-host="">
<span lwc-1t3e59bspvv="" style="--sds-c-icon-color-background: var(--slds-c-icon-color-background, transparent);" part="boundary">
<lightning-primitive-icon lwc-1t3e59bspvv="" exportparts="icon" size="x-small" variant="" lwc-274ut3d34qo-host="">
<svg focusable="false" aria-hidden="true" viewBox="0 0 520 520" part="icon" lwc-274ut3d34qo="" data-key="search" class="slds-icon slds-icon-text-default slds-icon_x-small">
<g lwc-274ut3d34qo="">
<path d="M496 453L362 320a189 189 0 10-340-92 190 190 0 00298 135l133 133a14 14 0 0021 0l21-21a17 17 0 001-22zM210 338a129 129 0 11130-130 129 129 0 01-130 130z" lwc-274ut3d34qo=""></path>
</g>
</svg>
</lightning-primitive-icon>
</span>
</lightning-icon>
</div>
</div>
<div
lwc-mbi94r3lm6=""
class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_left"
id="dropdown-element-12"
data-dropdown-element=""
role="listbox"
part="dropdown overlay"
></div>
</div>
</div>
</lightning-base-combobox>
</div>
<lightning-primitive-iframe lwc-5jokd0eeulf="" style="display: none;" lwc-5lrsq2lhkpi-host="">
<iframe lwc-5lrsq2lhkpi="" src="https://maps.a.forceusercontent.com/lightningmaps/mapsloader?version=224&amp;resource=placeApi&amp;locale=en" width="100%" height="100%"></iframe>
</lightning-primitive-iframe>
</lightning-lookup-address>
</div>
<div lwc-5hupo8npnnr="" class="slds-form-element__row">
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_6-of-6" data-field="subpremise" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-16" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-17" part="label">
B2C_Lite_CheckoutInputAddress.addressLineTwoLabel<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-17" autocomplete="address-line2" id="input-17" maxlength="80" name="subpremise" part="input" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
</div>
<div lwc-5hupo8npnnr="" class="slds-form-element__row">
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_4-of-6" data-field="city" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-18" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-19" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.cityLabel
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-19" autocomplete="address-level2" id="input-19" maxlength="40" name="city" part="input" required="" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_2-of-6" data-field="province" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-20" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-21" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.provinceLabel
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-21" autocomplete="address-level1" id="input-21" maxlength="80" name="province" part="input" required="" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
</div>
<div lwc-5hupo8npnnr="" class="slds-form-element__row">
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_4-of-6" data-field="postalCode" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-22" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-23" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.postalCodeLabel
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-23" autocomplete="postal-code" id="input-23" maxlength="20" name="postalCode" part="input" required="" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_2-of-6" data-field="country" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-24" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-25" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.countryLabel
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="text">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-25" autocomplete="country" id="input-25" maxlength="80" name="country" part="input" required="" type="text" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
</div>
</div>
</div>
</fieldset>
</lightning-input-address>
<commerce_unified_checkout-multi-country-phone-field class="lwc-5hupo8npnnr lwc-5lbbhqke0fp-host">
<div class="lwc-5lbbhqke0fp slds-form-element">
<label class="lwc-5lbbhqke0fp slds-form-element__label slds-hide" for="phone-number-field" id="phone-number-label"><abbr class="slds-required lwc-5lbbhqke0fp" title="required">* </abbr> </label>
<div class="lwc-5lbbhqke0fp slds-form-element__control">
<div class="lwc-5lbbhqke0fp slds-grid">
<div class="lwc-5lbbhqke0fp slds-no-flex">
<div class="lwc-5lbbhqke0fp slds-form-element">
<label class="slds-form-element__label slds-assistive-text lwc-5lbbhqke0fp">B2C_Lite_CheckoutInputAddress.phonePrefixLabel</label>
<div class="lwc-5lbbhqke0fp slds-form-element__control">
<div class="lwc-5lbbhqke0fp slds-combobox_container">
<div class="lwc-5lbbhqke0fp slds-dropdown-trigger slds-dropdown-trigger_click" aria-owns="listbox">
<div class="lwc-5lbbhqke0fp slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<button
class="lwc-5lbbhqke0fp slds-input slds-combobox__input slds-text-align_center slds-has-focus"
id="prefix"
required="true"
aria-expanded="false"
aria-haspopup="listbox"
aria-controls="listbox"
aria-labelledby="phone-number-label prefix"
type="button"
></button>
<div class="lwc-5lbbhqke0fp slds-input__icon-group slds-input__icon-group_right">
<lightning-icon class="lwc-5lbbhqke0fp slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right" lwc-1t3e59bspvv-host="">
<span lwc-1t3e59bspvv="" part="boundary">
<lightning-primitive-icon lwc-1t3e59bspvv="" exportparts="icon" size="xx-small" variant="inverse" lwc-5cmvo2251gk-host="">
<svg lwc-5cmvo2251gk="" class="slds-icon slds-icon_xx-small" focusable="false" data-key="" aria-hidden="true" part="icon">
<use lwc-5cmvo2251gk="" xlink:href="basePath/assets/icons/chevron-down.svg#chevron-down"></use>
</svg>
</lightning-primitive-icon>
</span>
</lightning-icon>
</div>
</div>
<div class="lwc-5lbbhqke0fp slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" id="listbox" role="listbox" aria-labelledby="phone-number-label prefix">
<ul class="lwc-5lbbhqke0fp slds-listbox slds-listbox_vertical" role="presentation"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lwc-5lbbhqke0fp slds-col">
<lightning-input class="lwc-5lbbhqke0fp slds-form-element" data-phonenumber="" id="phone-number-field" lwc-6o8rhidlqpi-host="">
<lightning-primitive-input-simple lwc-6o8rhidlqpi="" exportparts="input-text, input-container, input" aria-errormessage="help-message-29" lwc-75d7h989q9d-host="" variant="standard">
<div lwc-75d7h989q9d="" part="input-text">
<label lwc-75d7h989q9d="" class="slds-form-element__label slds-no-flex" for="input-30" part="label">
<abbr class="slds-required" lwc-75d7h989q9d="" title="LightningControl.required">*</abbr>
<slot lwc-75d7h989q9d="" name="label-end"><slot lwc-6o8rhidlqpi="" name="label-end" slot="label-end"></slot></slot>
</label>
<div lwc-75d7h989q9d="" class="slds-form-element__control slds-grow" part="input-container" type="tel">
<input lwc-75d7h989q9d="" class="slds-input" aria-errormessage="help-message-30" autocomplete="tel" id="input-30" name="phonenumber" part="input" pattern="^[^+]*$" placeholder=" " required="" type="tel" />
</div>
</div>
</lightning-primitive-input-simple>
</lightning-input>
</div>
</div>
</div>
</div>
</commerce_unified_checkout-multi-country-phone-field>
</div>
</commerce_unified_checkout-input-address>
</div>
</commerce_unified_checkout-billing-address-group>
</fieldset>
</div>
<b2c_lite_commerce-scoped-notification class="lwc-740crqttth4"></b2c_lite_commerce-scoped-notification>
</div>
<commerce_unified_checkout-stencil class="lwc-740crqttth4">
<div class="stencil-container" data-payment="">
<div class="pamyment-spacer slds-m-bottom_small"></div>
<div>
<div class="stencil-item-container-payment">
<div class="stencil-item line-small-payment slds-m-bottom_xx-small"></div>
<div class="stencil-item line-box-payment"></div>
</div>
<div class="stencil-item-container-payment">
<div class="stencil-item line-small-payment slds-m-bottom_xx-small"></div>
<div class="stencil-item line-box-payment"></div>
</div>
<div class="stencil-item-container-payment">
<div class="stencil-item line-small-payment slds-m-bottom_xx-small"></div>
<div class="stencil-item line-box-payment"></div>
</div>
</div>
<div class="pamyment-spacer slds-m-top_large"></div>
<div>
<div class="stencil-item-container">
<div class="stencil-item icon"></div>
<div class="stencil-item line-payment slds-m-left_small"></div>
</div>
</div>
<div class="pamyment-spacer"></div>
</div>
</commerce_unified_checkout-stencil>
</commerce_builder-checkout-payment-salesforce>
<div lwc-mbi94r3lm6="" class="slds-combobox_container">
<div lwc-mbi94r3lm6="" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click">
<div lwc-mbi94r3lm6="" class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<div lwc-mbi94r3lm6="" part="input-text">
<div lwc-mbi94r3lm6="" part="input-container">
<input
lwc-mbi94r3lm6=""
class="slds-combobox__input slds-input"
id="combobox-input-12"
type="text"
role="combobox"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="address-line1"
data-value=""
name="street"
placeholder=""
aria-disabled="false"
aria-readonly="false"
aria-autocomplete="list"
aria-owns="dropdown-element-12"
part="input"
aria-controls="dropdown-element-12"
/>
</div>
</div>
<div lwc-mbi94r3lm6="" class="slds-input__icon-group slds-input__icon-group_right">
<lightning-icon lwc-mbi94r3lm6="" class="slds-input__icon slds-input__icon_right slds-icon-utility-search slds-icon_container" icon-name="utility:search" lwc-1t3e59bspvv-host=""></lightning-icon>
</div>
</div>
<div lwc-mbi94r3lm6="" class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_left" id="dropdown-element-12" data-dropdown-element="" role="listbox" part="dropdown overlay"></div>
</div>
</div>
<fieldset lwc-5hupo8npnnr="" class="slds-form-element slds-form-element_compound slds-form-element_address" part="input-address">
<legend lwc-5hupo8npnnr="" class="slds-form-element__label slds-form-element__legend slds-assistive-text"></legend>
<div lwc-5hupo8npnnr="" class="slds-form-element__control">
<div lwc-5hupo8npnnr="" class="slds-form-element__group">
<div lwc-5hupo8npnnr="" class="slds-form-element__row"><lightning-lookup-address lwc-5hupo8npnnr="" class="slds-form-element slds-size_6-of-6" data-field="street" lwc-5jokd0eeulf-host=""></lightning-lookup-address></div>
<div lwc-5hupo8npnnr="" class="slds-form-element__row"><lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_6-of-6" data-field="subpremise" lwc-6o8rhidlqpi-host=""></lightning-input></div>
<div lwc-5hupo8npnnr="" class="slds-form-element__row">
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_4-of-6" data-field="city" lwc-6o8rhidlqpi-host=""></lightning-input>
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_2-of-6" data-field="province" lwc-6o8rhidlqpi-host=""></lightning-input>
</div>
<div lwc-5hupo8npnnr="" class="slds-form-element__row">
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_4-of-6" data-field="postalCode" lwc-6o8rhidlqpi-host=""></lightning-input>
<lightning-input lwc-5hupo8npnnr="" class="slds-form-element slds-size_2-of-6" data-field="country" lwc-6o8rhidlqpi-host=""></lightning-input>
</div>
</div>
</div>
</fieldset>
<label lwc-5jokd0eeulf="" class="slds-form-element__label" part="label" for="combobox-input-12">
<abbr class="slds-required" lwc-5jokd0eeulf="" title="LightningControl.required">*</abbr>B2C_Lite_CheckoutInputAddress.addressLineOneLabel
</label>
<div lwc-5jokd0eeulf="" class="slds-form-element__control"><lightning-base-combobox lwc-5jokd0eeulf="" class="slds-combobox_container" lwc-mbi94r3lm6-host=""></lightning-base-combobox></div>
<lightning-primitive-iframe lwc-5jokd0eeulf="" style="display: none;" lwc-5lrsq2lhkpi-host=""></lightning-primitive-iframe>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment