braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 126 forks source link

How to create a reccurring billing with drop in UI #129

Closed bchavez closed 7 years ago

bchavez commented 7 years ago

Server-side is .NET. Client-side is the browser.

I'd like to create a recurring subscription payment as easily as possible with the least amount of code. How do I go about this with the drop-in UI for a completely new customer?

As far as I understand, at a high-level:

Also, looks like PayPal Payment Method can do 'recurring billing' too:-1: This stinks, I hate PayPal's dumpster-fire APIs. If I wanted PayPal I would have used their SDK. /endrant. Anywho, even more, unanswered questions:

General information

crookedneighbor commented 7 years ago

All Drop-in (this version or the version bundled into braintree-web v2) does is capture the payment method details of the customer. Any additional customer information is up to you to collect. For instance:

<div id="customer-information">
  <input id="customer-first-name" />
  <input id="customer-last-name" />
</div>

<div id="drop-in-container"></div>

<button id="start">Start Subscription</button>

<script>
  var btn = document.getElementById('start');
  var firstNameInput = document.getElementById('customer-first-name');
  var lastNameInput = document.getElementById('customer-last-name');
  var dropin; // assumes you have your drop-in setup code some where and have saved the instance to this dropin variable

  btn.addEventListener('click', function () {
    // run function that validates that first and last name inputs are filled in  

    dropin.requestPaymentMethod(function (err, payload) {
      if (err) {
        // Handle errors in requesting payment method
        // This includes invalid card form or no payment method available
        // Errors relevant to customers will be show in the UI as well

        return;
      }

      var firstName = firstNameInput.value;
      var lastName = lastNameInput.value;
      // Send payload.nonce, firstName and lastName to your server
    });
  });
</script>

You can then use the nonce, firstName and lastName values to create a new customer. You can grab the token for the created payment method from the PaymentMethods array on the customer result object. customer.PaymentMethods[0].Token. Finally, you can create a subscription with the payment method token and plan id.

If you're working with an existing customer, you need to generate a client token with a customer id. This will prompt Drop-in to display the saved payment methods for that customer and allow them to create new ones (which will be automatically vaulted for that customer). You can then use that nonce to create a subscription by passing it into the PaymentMethodNonce field.

In regard to your additional questions:

Does this PayPal "vault" flow support capturing "customer" info in step 1 (or maybe I don't even need step 1)?

Yes. Here is the data you can expect to receive when tokenizing. This of course requires that the customer has provided that information in their PayPal account (such as shipping address).

Do my special credit card processing rates I have with Braintree apply with this PayPal checkout vault flow? Or will I get charged "Paypal's 2.9%+30c" standard rates?

This isn't really a question for the SDK team. Please contact support, they will be able to answer those questions better than I can.

Can I use this PayPal "vault" flow without burdening the user with shipping address info?

I'm not exactly sure what you're asking here. If you can trust that the shipping information in their PayPal account is accurate, you can use the shipping address information returned in the details from tokenizing. Again, I recommend contacting support for help with your integration.

JanBN commented 4 years ago

I would request example for this (.net, recurring billing, dropin). Could you please provide one ? The only example I found was one time transaction.

crookedneighbor commented 4 years ago

For assistance with your integration, please contact our support team: https://help.braintreepayments.com/