Braintree dropin move paypal button at the bottom?

Question

I've used the php implementation to add the dropin and it's working. I would like to move the paypal button below the form. Can that be done?

<script src="https://js.braintreegateway.com/js/braintree-2.27.0.min.js"></script>
<script>
    var checkout = new Demo({
        formID: 'payment-form'
    })
    var client_token = "<?php echo(Braintree\ClientToken::generate()); ?>";
    braintree.setup(client_token, "dropin", {
        container: "bt-dropin"
    });
</script>

Edit: What I mean is move the button under the credit card number and expiration date fields? Currently the dropin generates a paypal button at the top followed by credit card number field and expiration date field.

Answer 1

Assuming your <form> is not created by the javascript, using $.appendTo() from jquery you should be able to move the button container #bt-dropin to the end of the form.

Normaly I would move the button to after </form> in the <form> container, But since I dont have your html moving it at the end of the <form> should place it under the fields assuming no css move it afterward.

so again im not sure what your HTML looks like, But if you have jquery already in your page.

<script>
    var checkout = new Demo({
        formID: 'payment-form'
    })
    var client_token = "<?php echo(Braintree\ClientToken::generate()); ?>";
    braintree.setup(client_token, "dropin", {
        container: "bt-dropin"
    });
    $("#bt-dropin").appendTo($("#payment-form"));
</script>

if you dont have jquery included in your page add this.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Answer 2

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support .}

Since the Drop-in is a form that Braintree renders as one iframe, there's no way to really adjust the individual parts within the Drop-in itself. One thing you can do is drop the PayPal button from the Drop-in and manually add it in below the frame. However, in this instance you would have to have one merchant account with PayPal enabled and one without, so that the Drop-in wouldn't render the button.

Another suggestion would be to use the Hosted Fields integration, so that you can have one merchant account PayPal enabled with a customization option in terms of location of the PayPal button