如何在 Vue.js 中集成 razorpay

Posted

技术标签:

【中文标题】如何在 Vue.js 中集成 razorpay【英文标题】:How to integrate razorpay in Vue.js 【发布时间】:2019-03-17 07:13:45 【问题描述】:

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

【问题讨论】:

【参考方案1】:

您必须按照 Razorpay 文档中的说明实施手动结帐。阅读this 以供参考。您可以在 index.html 中包含 script 标签。

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

【讨论】:

您能否指定错误处理程序,例如付款失败或手动取消时如何获取错误? 我认为 Razorpay 会为您处理错误。手动取消也不应该是个问题。付款成功后将调用您的处理函数。但是自从我使用它已经有 2 年了,所以你应该自己测试它。尝试将响应对象记录到控制台,并检查不同情况下是否有异常。 在测试环境中它工作正常并给出正常的成功响应,其中包含 3 个 id,但在生产中会出现什么场景是我不确定的,因为在生产中我们不知道什么响应除了正常的成功响应之外,我们还进入了成功处理程序。【参考方案2】:

这行得通

添加一个 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);

【讨论】:

以上是关于如何在 Vue.js 中集成 razorpay的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iOS 设备的 Flutter 中集成 Razorpay Payment

无法在我的Xcode项目中集成Razorpay付款网关

razorpay_flutter 在 PUBSPEC.YML 文件中集成它显示错误

如何在vue js中集成类似Excel的表排序和过滤

在 Flutter 的底部工作表中集成 Google Pay

如何在 IOS 中集成 Javascript