2

我正在使用 Vue js Cdn 而不是节点。所以我想知道如何将 Razorpay 集成到 Vue 中，因为 Vue 模板脚本标签是不允许的。谁能帮我

4

2 回答 2

1

您必须按照 Razorpay 文档中的说明实施手动结帐。阅读此内容以供参考。您可以在 index.html 中包含脚本标记。

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
    "key": "YOUR_KEY_ID",
    "amount": "2000", // 2000 paise = INR 20
    "name": "Merchant Name",
    "description": "Purchase Description",
    "image": "/your_logo.png",
    "handler": function (response){
        alert(response.razorpay_payment_id);
    },
    "prefill": {
        "name": "Gaurav Kumar",
        "email": "test@test.com"
    },
    "notes": {
        "address": "Hello World"
    },
    "theme": {
        "color": "#F37254"
    }
};
var rzp1 = new Razorpay(options);

document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>
于 2018-12-07T09:39:11.383 回答
0

这有效

添加一个 ref 元素

<div ref="rzpform"></div>

mounted然后以编程方式将脚本标记附加到事件上。

var form = document.createElement("form");
var rzpScript = document.createElement("script");
rzpScript['src']="https://cdn.razorpay.com/static/widget/subscription-button.js";
rzpScript.setAttribute('data-subscription_button_id', "pl_IXOuwF4EldEpc5");
rzpScript.setAttribute('async', true);
form.appendChild(rzpScript);
this.$refs.rzpform.appendChild(form);
于 2021-12-14T15:48:05.623 回答