Question

我是初学者，实施条带以在我的django应用程序上处理付款。

我正在使用dj-stripe，可以创建客户并通过此设置添加计划。

我想使用stripe.js来创建令牌，这样我就可以使用条纹本身（https://stripe.com/docs/elements/examples）格式良好的卡片提交表单。我不想使用django表单来收集卡片详细信息，因为这些在布局上很难改变，我宁愿不从安全角度使用我的django应用程序来处理信用卡详细信息。

我设法让条带javascript表单工作，并以“令牌”的形式提供输出。我应该将javascript输出传递给我的django应用程序并将其附加到我的客户。

我发现这应该发生在某种jQuery / Ajax设置中，但由于我是初学者，我不知道如何开始。我发现this但不知道如何根据我的需要调整它。

我当前的设置会打印输出令牌，其中payment.html Success! Your Stripe token is <span class="token"></span>已编码。我尝试在这样的jQuery脚本中引用token，但token在浏览器中出现错误could not be read：

我的jQuery / AJAX脚本尝试，之前添加到payment.html但未在support.html下面显示：

<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
        method: 'POST',
        url: '/payments/settings/',
        data: {'yourJavaScriptArrayKey': yourJavaScriptArray},
        success: function (data) {
             //this gets called when server returns an OK response
             alert("it worked!");
        },
        error: function (data) {
             alert("it didnt work");
        }
    });
});
</script>

payment.html：

<style> some styles regarding layout of the js-form</style>

<script src="https://js.stripe.com/v3/"></script>

<form>
  <div class="group">
    <label>
      <span>Name</span>
      <input name="cardholder-name" class="field" placeholder="Jane Doe" />
    </label>
    <label>
      <span>Phone</span>
      <input class="field" placeholder="(123) 456-7890" type="tel" />
    </label>
  </div>
  <div class="group">
    <label>
      <span>Card</span>
      <div id="card-element" class="field"></div>
    </label>
  </div>
  <button type="submit">Add Card</button>
  <div class="outcome">
    <div class="error" role="alert"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>

<script type="text/javascript">

var stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx');
var elements = stripe.elements();

var card = elements.create('card', {
  style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSize: '15px',

      '::placeholder': {
        color: '#CFD7E0',
      },
    },
  }
});
card.mount('#card-element');

function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // Use the token to create a charge or a customer
    // https://stripe.com/docs/charges
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}

card.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = document.querySelector('form');
  var extraDetails = {
    name: form.querySelector('input[name=cardholder-name]').value,
  };
  stripe.createToken(card, extraDetails).then(setOutcome);
});

</script>
<script>
// I am missing an AJAX/jQUERY script to pass the outcome of the javascript generated token
</script>

views.py

def payment(request):
    template = get_template('payment.html')
    context = {

    }
    # HERE THERE SHOULD BE SOME AJAX CALL
    return HttpResponse(template.render(context,request))

我的AJAX / jQuery脚本应如何在payment.html内查看，以便它访问输出的令牌，如何在views.py内调用此令牌？

Answer 1

首先，我不喜欢你如何使用setOutcome两次，一次用于卡的更改事件，然后再次尝试从条带获取令牌时。将这些事情分开：

stripe.createToken(card, extraDetails).then(function(result) {
    if(result.error && result.error.message){
        // Do something with the errors
    }else{
        // Charge the card
        doCardCharge(result.token.id);
    }
});

使您的服务器响应成为JSON类型对象。你的doCardCharge函数如下所示：

function doCardCharge( stripeToken ){
    $.ajax({
        type: 'post',
        data: {
            // Add any other fields you need to here
            'name': $('input[name="cardholder-name"]').val(),
            'stripeToken':  stripeToken
        },
        cache: false,
        url: '/payments/settings/',
        dataType: 'json',
        success: function(data){
            if( data.server_errors ){
                // There could be errors on the server
            }else if( data.status == 'success'){
                // The charge was successful
            }else if( data.errors ){
                // There were validation errors
            }else{
                // There was some unknown error
            }
        },
        error: function(){
            // There was some sort of network error, or error on the server
        }
    });
}

如果你想将它们显示为data.server_errors，那么假设你有某种输出缓冲来捕获错误。如果收费成功，你就会回归成功＆＃34;作为data.status的值。如果服务器遇到验证错误，例如某人的地址=＆＃34; 2oi3n5o2i3n5o2i＆＃34;，那么您正在处理这些错误，因为您将它们设置为data.errors的值。

另请注意，我为ajax响应声明了一个dataType，因为jQuery尝试智能地猜测响应类型，但我发现在很多情况下它并不那么聪明。

在Django中，当您需要在视图中获取发布的数据时，请检查以获取该数据：Django - taking values from POST request

在Django中，您可以非常轻松地设置JSON类型响应。请查看此Stack Overflow页面以获取示例：Creating a JSON response using Django and Python

最后，如果您无法弄清楚发生了什么，有时查看开发人员控制台的网络标签（在您的网络浏览器中）会很有帮助。它会很多次提供原始响应。

使用ajax / jquery将stripe.js标记传递给django

1 个答案: