skip to Main Content

I want to know if I can use the stripe express checkout element for subscription?

I use ruby btw

Based on the document, one of the modes made it seem possible:

const elements = stripe.elements({
  mode: 'payment', // This can be `subscription`
  amount: 1099,
  currency: 'usd',
  appearance,
})

I have a lookup key for the subscription price. I was hoping to use it somewhere once the payment method is confirmed here:

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

I want to create the subscription at the return_url. But based on the provided document, it’s only for a one-time payment.

So if I did this (without using the subscription price id and just create the subscription of the customer at the return url). They will gonna be two charges, one for the one-time payment at express checkout and the second on when the subscription is created.

Any help?

2

Answers


  1. Chosen as BEST ANSWER

    I used pgs' answer as a hint for mine.

    const elements = stripe.elements({
      mode: 'setup'
      amount: 1099,
      currency: 'usd',
      setupFutureUsage: 'off_session',
      paymentMethodCreation: 'manual', 
      appearance,
    })
    

    This would set the express checkout button to be able to create the payment method using stripe.createPaymentMethod

    Now for the confirm of express checkout:

    expressCheckoutElement.on('confirm', async (event) => {
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        return;
      }
    
      // Create a Payment method
      const {error, paymentMethod} = await stripe.createPaymentMethod({
        // `elements` instance used to create the Express Checkout Element
        elements,
        params: {
          // Use billing details at payment method
          billing_details: event.billingDetails
        }
      });
    
      if (error) {
        // This point is only reached if there's an immediate error when
        // confirming the payment. Show the error to your customer (for example, payment details incomplete)
        handleError(error);
      } else {
       // Attach paymentMethod.id to customer
       // Set payment method as default
       // Create subscription 
      }
    });
    

    Attach paymentMethod.id to customer. I use Ruby for the backend

    Stripe::PaymentMethod.attach(
      payment_method_id,
      {customer: customer_id},
    )
    

    Set payment method as default:

    Stripe::Customer.update(customer_id, {invoice_settings: {default_payment_method: payment_method_id}})
    

    Now you should be able to create a subscription.


  2. You can use their Express Checkout Element for subscriptions. As you’ve mentioned on the client site you would specify the mode to subscription.

    const options = {
        mode: 'subscription',
        amount: 1000,
        currency: 'usd',
        setupFutureUsage: 'off_session', 
      };
    

    You can also pass the return url on the confirmation call on the client side:

     const {error} = await stripe.confirmSetup({
        elements,
        confirmParams: {
          return_url: 'https://example.com/order/123/complete',
        },
      }); 
    

    On the server side, you’d use their stripe.subscriptions.create method similar to this section of their other integration path. I integrated it with subscriptions and when they say ‘payments’ on their document, they are using it as a broader term maybe rather than saying it works for ‘payment mode’ only.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search