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!
Thanks!