Buttons not showing on Nuxt.js with ssr enabled

[Rexhmati]

Using the package on Nuxt.js ( v2 ), with ssr enabled.

• I have created the plugin:

import { loadScript } from '@paypal/paypal-js'

export default async ({ app }, inject) => {
  const paypalSdk = await loadScript({
    'client-id': process.env.PAYPAL_SANDBOX_CLIENT_ID,
    currency: 'EUR'
  })

  inject('paypal', paypalSdk)
}

• Created a vue component:

<template>
  <client-only>
    <div ref="paypalContainer"></div>
  </client-only>
</template>

<script>
export default {
  name: 'PayPalButton',

  mounted () {
    this.renderPayPalButtonIfClient()
  },

  methods: {
    renderPayPalButtonIfClient () {
      if (process.client) {
        this.$nextTick(() => {
          this.renderPayPalButton()
        })
      }
    },

    async renderPayPalButton () {
      const order = await this.$paypal.Buttons({
        createOrder (data, actions) {
          // Create the order and return its ID
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  value: '10.00' // The amount you want to charge
                }
              }
            ]
          })
        },
        onApprove (data, actions) {
          // Capture the approved payment
          return actions.order.capture()
        }
      })

      await order.render(this.$refs.paypalContainer)
    }
  }
}
</script>

<style scoped>

</style>

• Usage of the component:

<client-only>
      <PayPalButton />
 </client-only>

PayPal buttons are showing correctly on the first-page load, but are not showing anymore on the second visit.
It works only if I reload the page.

It looks like there is an issue with ssr, because it works fine with ssr disabled. But I cannot disable ssr on this project.
There is no error on the console or requests
Does anyone have any idea about this issue?

Thank you in advance

[AndrewBogdanovTSS]

Problem 1: Wrapping <div> inside client only is redundant, Nuxt has no issues with rendering html markup

<template>
  <div ref="paypalContainer" />
</template>

Problem 2: Checking for process.client inside a function that is called inside mounted() hook is redundant, because mounted hook is never called on the server, nextTick is also redundant

mounted () {
    this.renderPayPalButton()
  },

Problem 3: async functions should be called with await

mounted () {
    await this.renderPayPalButton()
  },

Problem 4: wrapping component in client-only is redundant because you use mounted, the only reason for using client-only is when you want to call something in setup or you have some logic that should be executed before component is mounted but still only on the client, here we clearly see - it's not the case

<PayPalButton />

Problem 5: Plugins that are called on the client only should contain .client.ts in the name or be loaded inside plugins with a special syntax (check Nuxt docs)

Problem 6: When you want to get a solution to the problem you should describe it properly, if something is not showing you probably get some errors in terminal/console, what those are?

[wsbrunson]

@Rexhmati did @AndrewBogdanovTSS's answers help solve your issue?

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information.