Payment widget integration



  • 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:

    1. 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. )
    2. 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!


Log in to reply