Accepting Stripe Payment Methods

Octane relies on Stripe to collect and store payment methods. You can use Stripe Elements to collect credit card or other payment method information from customers. This tutorial explains the full flow for setting up future payments in Stripe.

Octane simplifies this process for you by providing an API to Create Setup Intent which returns:

publishable_key
account_id
client_secret

These fields should be used to initialize the Stripe client:

// Initializing Stripe using the response of Octane's Create Setup Intent endpoint
const stripe = Stripe(
  "{{PUBLISHABLE_KEY}}",
  { stripeAccount: "{{ACCOUNT_ID}}" }
);
const elements = stripe.elements({
  clientSecret: "{{CLIENT_SECRET}}",
});

Here is a full example of rendering a Stripe payment element to accept a customer's payment method:

<!DOCTYPE html>
<html>
  <head>
    <title>Checkout</title>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <form id="payment-form">
      <div id="payment-element">
        <!-- Elements will create form elements here -->
      </div>
      <button id="submit">Submit</button>
      <div id="error-message">
        <!-- Display error message to your customers here -->
      </div>
    </form>

    <script>
      // Initializing Stripe using the response of
      // Octane's Create Setup Intent endpoint
      const stripe = Stripe(
        "{{PUBLISHABLE_KEY}}",
        { stripeAccount: "{{ACCOUNT_ID}}" }
      );
      const elements = stripe.elements({
        clientSecret: "{{CLIENT_SECRET}}",
      });

      // Create and mount the Payment Element
      const paymentElement = elements.create("payment");
      paymentElement.mount("#payment-element");

      const form = document.getElementById("payment-form");

      form.addEventListener("submit", async (event) => {
        event.preventDefault();

        const { error } = await stripe.confirmSetup({
          //`Elements` instance that was used to create the Payment Element
          elements,
          confirmParams: {
            return_url: "https://example.com/account/payments/setup-complete",
          },
        });

        if (error) {
          // This point will only be reached if there is an immediate error when
          // confirming the payment. Show error to your customer (for example, payment
          // details incomplete)
          const messageContainer = document.querySelector("#error-message");
          messageContainer.textContent = error.message;
        }
      });
    </script>
  </body>
</html>