获取条带令牌后如何在表单中发送其他用户信息 - angular [英] how do I send additional user information in a form after getting stripe token - angular

问题描述

因此，我使用 Stripe 接受表单上的付款，该表单还包含其他信息 - 姓名 - 地址等.我正在使用以下库:

https://github.com/gtramontina/stripe-angular

我的表单设置如下:

<!-- 我们的嵌套状态视图将在这里注入--><div id="form-views" ui-view></div></表单>

以及嵌套表单视图的示例(非条纹内容)

<label for="name">Name</label><input type="text" class="form-control" name="name" ng-model="formData.name" required>

和条纹的东西:

<label for="card_number">卡号</label><input type="text" class="form-control" size="20" data-stripe="number" ng-model="formData.card"/>

我的控制器(仅相关功能):

//处理表单的函数$scope.saveCustomer = 函数(状态，响应){var $form = $('#signup-form');如果(响应.错误){//在表单上显示错误$form.find('.payment-errors').text(response.error.message);$form.find('button').prop('disabled', false);} 别的 {//响应包含 id 和 card，其中包含额外的卡片详细信息var token = response.id;var html = '<input type="hidden" name="stripeToken" ng-model=formData.'+token+'/>';//将令牌插入到表单中，以便将其提交给服务器$form.append($(html));//并提交$form.get(0).submit();控制台日志(表单数据)；}}

这是我的问题 - 如果 'saveCustomer' 函数相当于 stripe 文档中的 stripeResponseHandler 函数，那么他们在向表单附加令牌后提交表单.如果我将数据添加到我的 formData 对象中，我如何将此信息添加到该对象中.我现在的逻辑是，我正在添加链接到控制器中另一个函数 (processForm) 的 ng-submit 属性，但这似乎很垃圾，无论如何我都无法获取数据 - 我如何获取令牌和所有其他 formData 数据如果我在 saveCustomer 函数中看不到 formData ，将其转换为单个函数以将其发送到服务器?

解决方案

直接使用 jquery 处理 DOM 与 Angular-way 不符.我建议您使用模型对象而不是处理 DOM.在您的示例代码中，模型对象是formData".

如果你想访问 $scope.formData，下面的代码可以帮助你这样做.

$scope.formData = {};var formData = $scope.formData;$scope.saveCustomer = 函数(状态，响应){控制台日志(表单数据)；//不是 $scope.formData;}

So i'm using Stripe to accept payment on a form that also takes other info - name - address etc. I'm using the following library:

https://github.com/gtramontina/stripe-angular

and I have the form set up like this:

<form id="signup-form" ng-submit="processForm()" stripe:form="saveCustomer">
      <!-- our nested state views will be injected here -->
          <div id="form-views" ui-view></div>
</form>

and an example of nested form view (non stripe stuff)

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" name="name" ng-model="formData.name" required>
</div>

and the stripe stuff:

<div class="form-group">
    <label for="card_number">Card Number</label>
      <input type="text" class="form-control" size="20" data-stripe="number" ng-model="formData.card"/>
    </div>

my controller (only relevant function):

// function to process the form
    $scope.saveCustomer = function(status, response) {
            var $form = $('#signup-form');

            if (response.error) {
                // Show the errors on the form
                $form.find('.payment-errors').text(response.error.message);
                $form.find('button').prop('disabled', false);
              } else {
                // response contains id and card, which contains additional card details
                var token = response.id;
                var html = '<input type="hidden" name="stripeToken" ng-model=formData.'+token+'/>';
                // Insert the token into the form so it gets submitted to the server
                $form.append($(html));
                // and submit
                $form.get(0).submit();
                console.log(formData);
             }
        }

Here is my question - if the 'saveCustomer' function is the equivalent of the stripeResponseHandler function in the stripe docs, then they are submitting the form after appending the token to it. If i'm adding data into my formData object, how do I add this information into that object. My logic now is that I'm adding the ng-submit attribute linking to another function (processForm) in the controller but this seems rubbish and I can't get the data anyway - How can i get the token and all the other formData data into a single function to send it to the server if I can't see the formData within the saveCustomer function?

解决方案

It dones not match Angular-way to treat DOM directly through using jquery. I recommend you to use model object instead of treating DOM. In your sample code, model object is 'formData'.

If you want to access $scope.formData, the code like below help you to do so.

$scope.formData = {}; 
var formData = $scope.formData;

$scope.saveCustomer = function(status, response) { 
    console.log(formData); // NOT $scope.formData; 
}

这篇关于获取条带令牌后如何在表单中发送其他用户信息 - angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！