Order summary conditional to payment method

Support
#1

Hi there!

I would like to add a custom thank you note in the order summary, depending on the selected payment method (primarily to remind customers to check the email for payment details if deferred payment is selected).

I found that this is possible if I override order, section=“content-header”, but to check which payment method within this code, I think I need some Vue variable for payment method (so I can put v-if…).

Can you just write back am I right and is there a such variable? (I think in general some list of variables used would be helpful for easier customization.)
Thanks!

#2

Hi @srdjanr,

By order summary, are you’re referring to the order component (the page that appears after an order is completed)?

If that’s the case, you can retrieve the name of the used payment method inside the template using the cart.paymentDetails.method variable.

Let me know if that helps,

Cheers!

#3

Hi @Michael ,

yes, I believe that’s right, I was referring to the order component.

The solution you suggested didn’t help - I believe the reason is that the cart.paymentDetails.method is evaluated/checked on page load, and because the user still hasn’t chosen the payment method (they are not done with the checkout yet), the value of cart.paymentDetails.method cannot be correct or useful. (We have tried similar approaches before postng the question).

That’s way I asked about the Vue variable, like the one used there already, isConfirmationAsync, because only that could work dinamically from what we can tell.

#4

Hi @srdjanr,

Could you clarify your use case or maybe send us a screenshot of what you’d like to change inside the cart? I believe we may be talking about a different component.

#5

Hi there,

component is Order Component, we are using this template from docs for customization.

In snipcart-order__details, section content-header, beneath the following code:

<div v-if="isConfirmationAsync" class="snipcart-order__async-confirmation-notice">
    <flash-message type="success">
        {{ $localize('confirmation.async_confirmation_notice') }}
    </flash-message>
</div>
<div v-else class="snipcart-order__invoice-number">
    {{ $localize('cart.invoice_number') }} : <em class="snipcart-order__invoice-number--highlight snipcart__font--black snipcart__font--secondary">{{ cart.invoiceNumber }}</em>
</div>

we want to add some additional information depending on the chosen payment method.

How do you suggest we do that? All standard Javascript approaches don’t work since they get evaluated on page load, so other than using Vue variables (so we can do something like v-if="someVariable==='CreditCard'"), we don’t see a way to manage this.