Documentation Home

Stripe Quick Start

Broadleaf Commerces offers an out-of-the-box Stripe solution that requires little configuration and is easily set up.
The quick start solution implements the https://stripe.com/docs/checkout/tutorial model offered by Stripe.
This implementation should be useful for those with a simple checkout flow.

You must have completed the Stripe Environment Setup before continuing

Adding Stripe Checkout Support

These instructions assume integration with the default Heat Clinic Demo Site provided with the framework.

  1. Create a form with Stripe JS library on your checkout page:
<form action="/checkout/stripe/complete" method="POST" th:inline="javascript">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    th:attr="data-key=${#stripe.generateClientToken()},data-amount=${#stripe.calculateTransactionTotal(paymentRequestDTO)}"
    data-name="Demo Site"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>

  <input type="hidden" th:name="${@blExploitProtectionService.getCsrfTokenParameter()}" th:value="${@blExploitProtectionService.getCSRFToken()}" />
</form>

If you don't have csrf protection, then remove the hidden field

  1. Create a Spring MVC Controller in your site directory to handle the form you created above in order to process the payment nonce and confirm the transaction.
@Controller
public class StripeCheckoutController extends BroadleafCheckoutController {

    @Resource(name = "blAddressService")
    protected AddressService addressService;

    @RequestMapping(value = "/checkout/stripe/complete")
    public String completeStripeCheckout(Model model, HttpServletRequest request, RedirectAttributes redirectAttributes, @PathVariable Map<String, String> pathVars) throws PaymentException, PricingException {
        //Get Cart
        Order cart = CartState.getCart();

        //Get Payment Nonce From Request
        String nonce = request.getParameter(MessageConstants.STRIPE_TOKEN);

        //Create a new PAYMENT_NONCE Order Payment
        OrderPayment paymentNonce = orderPaymentService.create();

        paymentNonce.setType(StripePaymentType.PAYMENT_NONCE);
        paymentNonce.setPaymentGatewayType(StripePaymentGatewayType.STRIPE);
        paymentNonce.setAmount(cart.getTotalAfterAppliedPayments());
        paymentNonce.setOrder(cart);

        //Populate Billing Address per UI requirements
        //For this example, we'll copy the address from the temporary Credit Card's Billing address and archive the payment,
        // (since Heat Clinic's checkout template saves and validates the address in a previous section).
        OrderPayment tempPayment = null;
        for (OrderPayment payment : cart.getPayments()) {
            if (PaymentGatewayType.TEMPORARY.equals(payment.getGatewayType()) &&
                PaymentType.CREDIT_CARD.equals(payment.getType())) {

                tempPayment = payment;
                break;
            }
        }

        if (tempPayment != null){
            paymentNonce.setBillingAddress(addressService.copyAddress(tempPayment.getBillingAddress()));

            orderService.removePaymentFromOrder(cart, tempPayment);
        }

        // Create the UNCONFIRMED transaction for the payment
        PaymentTransaction transaction = orderPaymentService.createTransaction();

        transaction.setAmount(cart.getTotalAfterAppliedPayments());
        transaction.setRawResponse("Stripe Payment Nonce");
        transaction.setSuccess(true);
        transaction.setType(PaymentTransactionType.UNCONFIRMED);
        transaction.getAdditionalFields().put(MessageConstants.STRIPE_TOKEN, nonce);
        transaction.setOrderPayment(paymentNonce);

        paymentNonce.addTransaction(transaction);

        orderService.addPaymentToOrder(cart, paymentNonce, null);
        orderService.save(cart, true);

        return processCompleteCheckoutOrderFinalized(redirectAttributes);
    }

}

request.getParameter(MessageConstants.STRIPE_TOKEN) returns a one-time token you can use to charge the customer.

When processCompleteCheckoutOrderFinalized is called, the checkout workflow is invoked and the ValidateAndConfirmPaymentActivity
is executed to confirm the payment nonce.

Enable Stripe OMS Support

  1. The OMS module allows for the creation of Customer Payment Tokens so that a CSR can change orders and add new payment methods when necessary. To integrate Stripe with Customer Payment capability, you will need to create a Spring MVC Controller to handle the drop-in credit card form to process the payment nonce and save the token as a Customer Payment.
@Controller
public class StripeCustomerPaymentController {

    protected static final String CUSTOMER_PAYMENT_ERROR = "CUSTOMER_PAYMENT_OMS_ERROR";
    protected static String customerPaymentErrorMessage = "customerPaymentOMSErrorMessage";

    @Resource(name = "blStripeCustomerService")
    protected PaymentGatewayCustomerService stripeCustomerService;

    @Resource(name = "blCustomerPaymentGatewayService")
    protected CustomerPaymentGatewayService customerPaymentGatewayService;

    @Resource(name = "blStripeConfiguration")
    protected StripeConfiguration configuration;

    @RequestMapping(value = "/payment-method-oms/stripe/add")
    public String addStripePaymentMethod(Model model, HttpServletRequest request, RedirectAttributes redirectAttributes, @PathVariable Map<String, String> pathVars) throws PaymentException, PricingException {
        //Get Cart
        Customer customer = CustomerState.getCustomer();

        //Get Payment Nonce From Request
        String nonce = request.getParameter(MessageConstants.STRIPE_TOKEN);

        PaymentRequestDTO requestDTO = new PaymentRequestDTO()
                .customer()
                    .customerId(customer.getId().toString())
                    .firstName(customer.getFirstName())
                    .lastName(customer.getLastName())
                    .email(customer.getEmailAddress())
                    .done()
                .additionalField(MessageConstants.STRIPE_TOKEN, nonce);

        PaymentResponseDTO responseDTO = stripeCustomerService.createGatewayCustomer(requestDTO);

        if (responseDTO.isSuccessful()) {
            // Populate BillTo Address per business requirements...
            // For demonstration purposes, we'll just add an address manually.
            // In most cases you can POST it along with the form and get it off the request.
            responseDTO.billTo()
                    .addressFullName("Bill Stripe")
                    .addressLine1("123 Broadleaf Rd")
                    .addressCityLocality("Austin")
                    .addressStateRegion("TX")
                    .addressCountryCode("US")
                    .addressPostalCode("78759");

            customerPaymentGatewayService.createCustomerPaymentFromResponseDTO(responseDTO, configuration);

            return OMSCsrToolsController.REDIRECT_OMS_CHECKOUT;
        }

        redirectAttributes.addAttribute(CUSTOMER_PAYMENT_ERROR, customerPaymentErrorMessage);

        return getOMSCustomerPaymentRedirectUrl();
    }

    public String getOMSCustomerPaymentRedirectUrl() {
        String redirect = BLCSystemProperty.resolveSystemProperty("oms.changeOrder.payment.gateway.customerPayment.redirectUrl");

        return BLCRequestUtils.getRequestedServerPrefix() + redirect;
    }
}

The MessageConstants.TRANSACTION_ID value in responseDTO.additionalFields needs to be passed to checkout instead of the Stripe token

Done!

At this point, all the configuration should be complete and you are now ready to test your integration with Stripe. Add something to your cart and proceed with checkout.