CODEWITHSUNDEEP
paypalbraintree
Petr Žampach
Petr Žampach

Reputation: 95

braintree embedded paypal checkout

we have a payment page on our site. We implemented it via Braintree. The PoC is here http://petrzampach-001-site11.smarterasp.net/ The code is similar to this:

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
@using (Html.BeginForm("CreatePurchase", "Home", FormMethod.Post, new { role = "form" }))
{
<div id="paymentGate">
    <div id="payment-form"></div>
</div>
<script>
    braintree.setup(
    "@ViewBag.BrainTreeClientToken",
    "dropin", {
        container: "payment-form"
    });
</script>
}

So far so good. But, we dont like the pop up window when you click on the Paypal button. We would like to integrate it into our site. I asked Braintree support and they told us about v.zero. Excellent! But unfortunatelly we cannot figure this one out. No matter what we try it always opens in a pop up window. My another PoC is here: http://petrzampach-001-site11.smarterasp.net/home/CustomUI The code looks like this:

<script src="https://js.braintreegateway.com/js/braintree-2.21.0.min.js"></script>
@using (Html.BeginForm("CreatePurchase", "Home", FormMethod.Post, new { role = "form", id = "payment-form" }))
{
<label for="card-number">Card Number</label>
<div id="card-number" style="border:1px solid black;height:20px;"></div>

<label for="cvv">CVV</label>
<div id="cvv" style="border:1px solid black;height:20px;"></div>

<label for="expiration-date">Expiration Date</label>
<div id="expiration-date" style="border:1px solid black;height:20px;"></div>

<div id="paypal-container"></div>

<script type="text/javascript">
    braintree.setup("@ViewBag.BrainTreeClientToken", "custom", {
        id: "payment-form",
        hostedFields: {
            number: {
                selector: "#card-number"
            },
            cvv: {
                selector: "#cvv"
            },
            expirationDate: {
                selector: "#expiration-date"
            }
        },
        paypal: {
            container: "paypal-container",
        },
        onPaymentMethodReceived: function (obj) {
        }
    });
</script>
}

We can customize the credit card fields, but still cannot embed the Paypal login into our page.

Thank you for any advice. Petr

Upvotes: 0

Views: 460

Answers (1)

pblesi
pblesi

Reputation: 534

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

When using v.zero, the form for accepting PayPal credentials opens within a popup. This is so customers know they are providing their credentials to PayPal in a secure, encrypted manner and not entering their credentials on a malicious site. People that pay with PayPal expect that they can verify their credentials are only being submitted to PayPal, and implementing v.zero in this way leads to higher conversion rates, which is our motivation for implementing it this way.

There is no option to allow PayPal credentials to be entered not through a popup.

Upvotes: 1

Related Questions