Payment widget integration

nobilik

Hi! Can’t integrate payment widget to site. I have two parts from bank.

script

<script
  id="alfa-payment-script"
  type="text/javascript"
  src="https://testpay.alfabank.ru/assets/alfa-payment.js">
</script>

div

<div id="alfa-payment-button"
     data-token='replace_this_to_merchant_token'
     data-client-info-selector='.clientInfo'
     data-amount-selector='.amount'
     data-version='1.0'
     data-order-number-selector='.orderNumber'
     data-language='ru'
     data-stages='1'
     data-return-url='http://store.ru/success_url.html'
     data-fail-url='http://store.ru/fail_url.html'
     data-amount-format='.amountFormat'
     data-description-selector='.order' 
></div>

In pure html it gives me a payment button, but in case of vue the div is empty.

I’ve tried:

to place <script> directly to head section of index.template.html (in this case I have an error in my console that the div is not found. So yes, it doesn’t exists, it appears in one dialog element later. )
to add <script> at mounted hook

mounted () {
    this.loadAlfa()
  },
  methods: {
    loadAlfa () {
      let promise = new Promise((resolve, reject) => {
        let script = document.createElement('script')
        script.charset = 'utf-8'
        script.id = 'alfa-payment-script'
        script.src = 'https://testpay.alfabank.ru/assets/alfa-payment.js'
        script.type = 'text/javascript'
        script.async = true
        script.onload = () => {
          resolve()
        }
        script.onerror = (err) => {
          reject(err)
        }
        document.head.appendChild(script)
      })
      return promise
    }
  }

(in this case no error, but also div is empty)

Please help!

No More Posting New Topics!

Payment widget integration