When I was redirecting my page like this, then it was working perfectly fine the current Order Id I was getting from the method after clicking the button Pay now button

<div slot="footer" class="slds-align_absolute-center">
 <lightning-button variant="brand" label={payNowText} icon-name="utility:moneybag" class="slds-m-left_x-small" onclick={payByStripe}>

            type: 'standard__webPage',
            attributes: {
                url: 'https://sandbox-fun-java-6633-dev-ed-176cc1dd4e4.cs90.force.com/wedgy/checkoutPayment?orderId='+this.order_id
get order_id() {
        return this.cart.orderId;

But when I do this

<div slot="footer" class="slds-align_absolute-center">

<iframe id="vfFrame" src={vfHost} height="650px" width="770px" style="border: 0px"></iframe> </div>

and concatenate this order in my Vfhost then it doesn't load

vfHost = 'https://sandbox-fun-java-6633-dev-ed-176cc1dd4e4.cs90.force.com/wedgy/checkoutPayment?orderId='+this.order_id;

but when I changes the vfHost URL to something like this:

vfHost = 'https://sandbox-fun-java-6633-dev-ed-176cc1dd4e4.cs90.force.com/wedgy/checkoutPayment?orderId=jkahdajk585'

then it works. The only thing changes that I removed the earlier button and inserted an iframe. I am actually very confused in this how can I get this done


You should only show or load the iframe once the orderId is avialable.

So have a template if:true{orderidIsAvailable}> or <div if:true{orderidIsAvailable}> then have your iframe inside this.

<iframe id="vfFrame" src={vfHost} height="650px" width="770px" style="border: 0px"></iframe>

JS as :

get orderidIsAvailable(){
    return !!this.orderId;

This will load iframe only if orderId is populated.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.