Customizing Forms

DemoSitePrivate has out-of-box support with the Subscription module via the NullPaymentGateway, which you will want to replace with your own implementation. The following is an example of how you would replace the NullPaymentGateway using the Braintree Module Drop-In UI. This requires you to have already configured setting up the Braintree Module.

Account

Form

In subscriptionDetails.html you will want to replace the following segment

<!-- Start Payment Gateway form -->
...
<!-- End Payment Gateway form -->

with

<div id="creditCardFields">
    <div class="form50">
        <label for="paymentName" class="prompt">
            <span>Payment Name</span>
        </label>
        <div class="form50 isSavePaymentInfo">
            <span>
                <input th:name="PAYMENT_NAME" class="field50 cloneable" type="text"
                       placeholder="Payment Name"/>
            </span>
        </div>
    </div>
</div>

<blc:form th:action="@{/account/subscriptions/braintree/} + *{getPrimaryOrder().orderNumber} + @{/createPayment}"
method="POST">
    <div id="payment-form-dropin">
    </div>
    <input type="submit" value="Save" />
</blc:form>

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

<script type="text/javascript" th:inline="javascript">
    braintree.setup([[${#braintree.generateClientTokenWithOptions(null, null, null,
                        customer.id)}]], "dropin", {
        container: 'payment-form-dropin'
    });
</script>

Controller

You will want to add the following controller as well:

@Controller
@RequestMapping("/account/subscriptions/braintree")
public class ManageBraintreeSubscriptionController extends BroadleafManageSubscriptionController {

    @RequestMapping(value = "/{orderNumber}/createPayment", method = RequestMethod.POST)
    public String createPayment(HttpServletRequest request, Model model, @PathVariable("orderNumber") String orderNumber) {
        String[] paymentName = (String[])request.getParameterMap().get(PaymentAdditionalFieldType.PAYMENT_NAME.getType());

        PaymentRequestDTO requestDTO = new PaymentRequestDTO()
                .customer()
                .customerId(CustomerState.getCustomer().getId().toString())
                .done()
                .creditCard()
                .additionalFields(MessageConstants.PAYMENT_NONCE, request.getParameterMap().get("payment_method_nonce")[0])
                .done()
                .additionalField(PaymentAdditionalFieldType.PAYMENT_NAME.getType(), paymentName[0]);;

        return super.createPayment(request, model, BraintreePaymentGatewayType.BRAINTREE.getType(), orderNumber, requestDTO);
    }

}

Checkout

Form

The form changes described in setting up Braintree checkout should still work for Subscriptions.

Controller

You will want to add the following to your MyBraintreeCheckoutController set up with the Braintree module:

Add the following lines before setting the transaction on the payment nonce

if (cart.getPayments().get(0).getCustomerPayment() != null) {
    transaction.getAdditionalFields().put(MessageConstants.TOKEN, cart.getPayments().get(0).getCustomerPayment()
            .getPaymentToken());
}
transaction.getAdditionalFields().put(MessageConstants.CUSTOMERID, cart.getCustomer().getId().toString());