CODEWITHSUNDEEP
braintree
Dinuka Thilanga
Dinuka Thilanga

Reputation: 4330

Braintree custom UI is not working

I have referred this https://www.braintreepayments.com/blog/your-checkout-our-iframes/ and create a form to do payment like follows. 

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

This is my script. 

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

But it is showing following error.

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

But this guide https://developers.braintreepayments.com/javascript+php/guides/hosted-fields/upgrading-from-custom#markup has mention no need data-braintree-name values when using hostedFields.

My payment form is working when i was using dropin UI. I don't know what is the issue here. Please help me.

Upvotes: 1

Views: 1049

Answers (1)

kdetella
kdetella

Reputation: 661

I work at Braintree on the JavaScript SDK.

Since Hosted Fields is still in Beta, you will need to use a different version of braintree.js. The latest beta version can be found here: https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.17.min.js

For more information, check out our Hosted Fields documentation.

Upvotes: 2

Related Questions