Question

我已经提到了这个https://www.braintreepayments.com/blog/your-checkout-our-iframes/并创建了一个表单来进行如下付款。

<form id="payment-form" method="post" action="{{ path('job_checkout', {id: job.id}) }}">
    <div class="form-group first">
        <div class="col-md-6 col-sm-12  col-xs-12">
            <label class="hidden-xs" for="card-number-field">Card Number</label>
            <div id="card-number-field"></div>
        </div>
        <div class="hidden-xs hidden-sm col-md-6 pull-right">
            <i>Please enter your Credit Card Number</i>
        </div>
    </div>
    <div class="form-group date-group">
        <div class="col-md-6 col-sm-12 col-xs-12">
            <label for="expiration-date-field">Expiration Date</label>
            <div id="expiration-date-field"></div>
        </div>
        <div class="hidden-xs hidden-sm col-md-6 pull-right">
            <i>Please select your cards expiration date</i>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-6 col-sm-12 col-xs-12">
            <label class="hidden-xs" for="security-code-field">Verification No</label>
            <div id="security-code-field"></div>
        </div>
        <div class="hidden-xs hidden-sm  col-md-6 pull-right">
            <i>Please enter your cards Verification number (3 digits on the back) </i>
        </div>
    </div>

    <button class="btn btn-primary" type="submit">
        Purchase
    </button>
</form>

这是我的剧本。

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

<script>
    braintree.setup('{{ clientToken }}', 'custom', {
        id: "payment-form",
        hostedFields: {
            number: {
                selector: '#card-number-field',
                placeholder: 'Card Number'
            },
            cvv: {
                selector: '#security-code-field',
                placeholder: 'CVV'
            },
            expirationDate: {
                selector: '#expiration-date-field',
                placeholder: 'MM/YYYY'
            }
        }
    });
</script>

但它显示以下错误。

Error: Unable to find an input with data-braintree-name="number" in your form. Please add one。

但是，在使用data-braintree-name时，本指南https://developers.braintreepayments.com/javascript+php/guides/hosted-fields/upgrading-from-custom#markup已提及不需要hostedFields值。

当我使用dropin UI时，我的付款方式正常。我不知道这里有什么问题。请帮我。

Answer 1

我在Braintree上使用JavaScript SDK。

由于托管字段仍处于测试阶段，因此您需要使用不同版本的braintree.js。最新的测试版可以在这里找到：https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.17.min.js

有关详细信息，请查看我们的Hosted Fields documentation。

Braintree自定义用户界面无效

1 个答案: