RazorPay 表单在页面加载时自动加载，无需单击立即付款按钮答案

【问题标题】：RazorPay form auto load on page load without clicking Pay Now buttonRazorPay 表单在页面加载时自动加载，无需单击立即付款按钮
【发布时间】：2020-09-27 21:31:45
【问题描述】：

我正在尝试将 Razorpay 集成到我的应用程序中。这是一个在单击“立即付款”按钮时控制加载付款模型的代码。我想在页面加载时进行模式加载，而不是单击按钮。我尝试通过 javascript 提交表单以查看是否加载了模式，但这不起作用。

代码如下：

<form action="verify.php" method="POST" id="gateway">
  <script
    src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="<?php echo $data['key']?>"
    data-amount="<?php echo $data['amount']?>"
    data-currency="INR"
    data-name="<?php echo $data['name']?>"
    data-image="<?php echo $data['image']?>"
    data-description="<?php echo $data['description']?>"
    data-prefill.name="<?php echo $data['prefill']['name']?>"
    data-prefill.email="<?php echo $data['prefill']['email']?>"
    data-prefill.contact="<?php echo $data['prefill']['contact']?>"
    data-notes.shopping_order_id="3456"
    data-order_id="<?php echo $data['order_id']?>"
    <?php if ($displayCurrency !== 'INR') { ?> data-display_amount="<?php echo $data['display_amount']?>" <?php } ?>
    <?php if ($displayCurrency !== 'INR') { ?> data-display_currency="<?php echo $data['display_currency']?>" <?php } ?>
  >
    document.getElementById("gateway").submit(); // Not working
  </script>
  <!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
  <input type="hidden" name="shopping_order_id" value="3456">
</form>

但是，我也注意到表单操作到页面verify.php，所以如果提交表单，它将转到我只想加载支付模式的那个页面。因此，我尝试过的不可能是解决方案。

【问题讨论】：

标签： javascript html jquery ajax razorpay

【解决方案1】：

将 onload 事件附加到脚本并在处理程序中模拟点击

<script>
  function loadPaymentModal() {
    const elem = document.getElementsByClassName('razorpay-payment-button')[0];
    elem.click();
  }
</script>
<form action="verify.php" method="POST" id="gateway">
  <script onLoad="loadPaymentModal()" src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="<?php echo $data['key']?>" 
    data-amount="<?php echo $data['amount']?>" 
    data-currency="INR"
    data-name="<?php echo $data['name']?>"
    data-image="<?php echo $data['image']?>"
    data-description="<?php echo $data['description']?>" 
    data-prefill.name="<?php echo $data['prefill']['name']?>"
    data-prefill.email="<?php echo $data['prefill']['email']?>"
    data-prefill.contact="<?php echo $data['prefill']['contact']?>" 
    data-notes.shopping_order_id="3456"
    data-order_id="<?php echo $data['order_id']?>"
    <?php if ($displayCurrency !=='INR' ) { ?> data - display_amount="<?php echo $data['display_amount']?>" <? php } ?>
    <? php if ($displayCurrency !== 'INR') { ?> data - display_currency="<?php echo $data['display_currency']?>" <? php } ?>
  >
    </script>
  <!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
  <input type="hidden" name="shopping_order_id" value="3456">
</form>

【讨论】：

【解决方案2】：

我找到了解决方案。发布，因为它可能对将来的某人有所帮助：

在razorpay/checkout/automatic.php (or manual.php) 中，将其放在开头的<form> 元素之后：

<script>
  $(window).on('load', function() {
    $('.razorpay-payment-button').click();
  });
</script>

【讨论】：

你从哪里得到文件：razorpay/checkout/automatic.php（或manual.php）？

【解决方案3】：

<script src="{{url('/')}}/frontendtheme/js/plugins/jquery-3.3.1.min.js"></script>
<script>
    $(window).on('load', function() {
        jQuery('#gateway').submit();
    });
</script>

注意：在脚本源中使用您的 min.js 文件夹

【讨论】：