Stripe: Use apple pay on the web for a subscription

Question

In the documentation for setting up Apple pay with Stripe, the steps tell you to create a payment request with stripe elements in order to display the apple pay button - the example request is a one-time direct charge. You must have a payment request to display the button - so how can I create a payment request for a subscription? The payment request object is a stripe elements thing and is not described in the stripe api.

var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
  paymentRequest: paymentRequest,
});

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
  }
});

The flow for using a credit card is completely different. It doesn't require any payment request, you simply create a token from the stripe elements card form to create a customer.

The Stripe support page for Using Apple Pay for recurring payments just says "apple pay will create a token" but provides no clue how you would set it up without a one-time charge.

How can I make stripe display the apple pay button without requesting payment? If I have to request payment, is it just for one interval of the subscription, and will this amount be able to be billed on a recurring basis?

Answer 1

The payment request that you make with Stripe.js does not actually process a payment:

1. It simply confirms that the user's browser supports Apple/Google Pay, and displays a payment-sheet with the provided payment details.
2. After the user authorizes the payment described on the payment-sheet, Stripe will produce a payment method.
3. At this point, if you don't integrate the remaining steps, the user would never be charged - you would simply have a Stripe payment method ID.

Remaining steps you'd need to integrate at this point are:

1. Save the payment method ID to a Customer: https://stripe.com/docs/api/payment_methods/attach
2. Set the payment method as the default for subscription invoices: https://stripe.com/docs/api/customers/update (by setting invoice_settings.default_payment_method)
3. Subscribe the customer to a recurring Price (e.g., https://stripe.com/docs/billing/subscriptions/fixed-price)

You would trigger all of the above logic as a result of receiving the payment method from the payment request:

paymentRequest.on('paymentmethod', function(ev) {
  const paymentMethodId = ev.paymentMethod.id;

  // Send ID to your server to:
  //  a) attach it to a Customer
  //  b) set it as the default for subscription invoices
  //  c) create the subscription
});