Vaadin flow with stripe payment

Does anyone has successfully implemented this with vaadin 14?
Was wondering how we can get this working…

Hi Wei. Do you mean using their payments js or using the maven library?

Hi Martin,

i’m very new to vaddin flow. I want to implemt stripe payment but not sure how to do it.

Wei liang lim:
Does anyone has successfully implemented this with vaadin 14?
Was wondering how we can get this working…

I have implemented it successfully just a few days back (using Stripe Checkout).

Here are the following basic steps:

  1. Read the documentation of stripe and the different tutorials. They all provide information about the stripes Java Library and how to use it. Implement the library via Gradle/Maven, ect.

  2. Implement the Stripe Checkout Script on the Page where your payment interaction is located (or your mainlayout)

@JavaScript("https://js.stripe.com/v3/")
@Route(value = "payment", layout = MainLayout.class)
  1. Implement a button which opens the checkout page. In my example i use it to pay a subscription plan.

2.1. Create a session (i create one based on an existing stripe customer). Stripe Customer should be created before (read more about it in the Stripe API) also a Plan has to be created before.

	public static Session createSession(@NotNull String stripeUserId,@NotNull String planId, boolean withAdress) throws StripeException {

		Stripe.apiKey = StripeSettings.PRIVATE_KEY;

		Map<String, Object> params = new HashMap<String, Object>();

		params.put("customer", stripeUserId);

		ArrayList<String> paymentMethodTypes = new ArrayList<>();
		paymentMethodTypes.add("card");
		params.put("payment_method_types", paymentMethodTypes);

		HashMap<String, Object> subscriptionData = new HashMap<String, Object>();
		HashMap<String, Object> items = new HashMap<String, Object>();
		HashMap<String, Object> item = new HashMap<String, Object>();
		item.put("plan", planId);
		items.put("0", item);
		subscriptionData.put("items", items);
		params.put("subscription_data", subscriptionData);


		params.put("success_url", "your url");
		params.put("cancel_url", "your other url");

		// if you want the customer to input address on payment
		if(withAdress) {
			params.put("billing_address_collection", "required");
		}

		Session session = Session.create(params);

		return session;
	}

2.2. Use this session to open Checkout page

	public static void openCheckout(Session session, UI ui) {
		String javaScriptStripe = "" +
				"    var stripe = Stripe('"+StripeSettings.PUBLIC_KEY+"');\n" +
				"    stripe.redirectToCheckout({\n" +
				"           sessionId: '"+session.getId()+"'" +
				"        });";

		ui.access(() -> ui.getPage().executeJs(javaScriptStripe));

	}

THe most important thing is to read the documentation of the Stripe API to get an understanding of how it works and which functionality of the API you need for your usecase.