How to Add Braintree as a Payment Provider

The Braintree checkout workflow is similar to that explained in Getting Started with Sales in Arc XP Subscriptions. The three main steps are the same, the remaining steps are modified and the changes are explained below.

Step 1. Cart Add Item

Step 2. Authenticate

Step 3. Create Order

Step 4. Initialize Payment

Sales.InitializePayment(OrderNumber: String, PaymentMethodID: Number) (or GET /Sales/Public/V1/Checkout/Order/{OrderNumber}/Payment/{Mid})

If it’s successful, a token will be returned (Parameter 1), which is used to start the interaction with Braintree.

Step 4a. Execute Braintree’s js

Remember,Arc XP Subscriptions supports credit card and PayPal payments through Braintree

import Sales from '@arc-publishing/sdk-sales';
import DropIn from 'braintree-web-drop-in';
...

    const [isSubmitting, setIsSubmitting] = useState(false);
    ...
        const payment = await Sales.initializePayment(orderNumber, paymentMethodID);
        
        var button = document.querySelector('#submit-button');
        DropIn.create(
          {
            authorization: payment.parameter1,
            container: '#dropin-container',
            card: {
              cardholderName: {
                required: true
              }
            },
            paypal: {
              flow: 'vault'
            }
          },
          (_createErr, instance) => {
            button.addEventListener('click', () => {
              instance.requestPaymentMethod((err, payload) => {
                setIsSubmitting(true);
                if (payload && payload.nonce) {
                  Sales.finalizePayment(orderNumber, paymentMethodID, payload.nonce)
                    .then(() => {
                      setIsSubmitting(false);
                      history.push('/success');
                    })
                    .catch(err => {
                      setIsSubmitting(false);
                      if (err && err.message) {
                        setError(err.message);
                      }
                    });
                } else {
                  setIsSubmitting(false);
                  if (err && err.message) {
                    setError(err.message);
                  }
                }
              });
            });
          }
        );

If you see, the token (Parameter 1) returned from “Initialize Payment” will be sent during the calling to DropIn.create().

"Drop-In UI: Setup & Integration

Step 5. Finalize Payment

If the payment was approved by Braintree, a token will be returned. Then, this token should be sent to “Finalize Payment”.

Sales.FinalizePayment(OrderNumber: String, PaymentMethodID: Number, Token: String) (or PUT /Sales/Public/V1/Checkout/Order/{OrderNumber}/Payment/{Mid})

The flow associated with updating a credit card for Braintree is very similar to those for checkout.

Step 1. Initialize Payment Update

Sales.InitializePaymentUpdate(PaymentID: Number, PaymentMethodID: Number) (or PUT /Sales/Public/V1/Paymentmethod/{Id}/Provider/{Pid})

If it’s successful, a token will be returned (Parameter 1), which is used to start the interaction with Braintree.

Step 1a. Execute Braintree’s js

import Sales from '@arc-publishing/sdk-sales';
import DropIn from 'braintree-web-drop-in';
...
    const [isSubmitting, setIsSubmitting] = useState(false);
    ...

        const paymentUpdate = await Sales.initializePaymentUpdate(paymentID, paymentMethodID);
        
        var button = document.querySelector('#submit-button');
        DropIn.create(
          {
            authorization: paymentUpdate.parameter1,
            container: '#dropin-container',
            card: {
              cardholderName: {
                required: true
              }
            },
            paypal: {
              flow: 'vault'
            }
          },
          (_createErr, instance) => {
            button.addEventListener('click', () => {
              instance.requestPaymentMethod((err, payload) => {
                setIsSubmitting(true);
                if (payload && payload.nonce) {
                  Sales.finalizePaymentUpdate(paymentID, paymentMethodID, payload.nonce)
                    .then(() => {
                      setIsSubmitting(false);
                      history.push('/update-payment/complete?status=ok');
                    })
                    .catch(err => {
                      setIsSubmitting(false);
                      if (err && err.message) {
                        setError(err.message);
                      }
                    });
                } else {
                  setIsSubmitting(false);
                  if (err && err.message) {
                    setError(err.message);
                  }
                }
              });
            });
          }
        );

Step 2. Finalize Payment update

If the card/payU was verified successfully by Braintree a token will be returned. Then, this token should be sent to “Finalize Payment method update”.

Sales.FinalizePaymentUpdate(PaymentID: Number, PaymentMethodID: Number, Token: String) (or PUT /Sales/Public/V1/Paymentmethod/{Id}/Provider/{Pid}/Finalize)

Braintree Sign up: https://www.braintreepayments.com/sandbox | https://apply.braintreegateway.com/country/usa?refer=170a687145d890-0b750c09c9fd6f-39647b0e-1aeaa0-170a687145e959

Braintree Setup & Configuration: https://developers.braintreepayments.com/guides/drop-in/setup-and-integration/JavaScript/V3

Braintree Themes block: Arc XP does not currently offer a core component for Braintree.