morey-elements

[kindred stump]

hello @little basin could you elaborate a bit more on what you're trying to pay for here?

[little basin]

Hi Alex sure.

Currently I have a system using

FE: React
BE: Firebase & firebase cloud functions

My customer payment journey looks like this

1. Customer Account is created with stripe through cloud functions for all new customers

2. Customer add a valid creditcard on file first. result from elements is sent to cloud functions, which calls stripe and attaches to customer

3. Customer makes calls to service provider for a unknown duration and unknown payment amount. Amount is known after end of call.

4. Cloud functions trigger and send automatic payment to stripe.

5. In case of payment failure or 3d payment requirement (not sure how to implement without web-hook), we have another page which customer can go to, to try the payment again.

The question I have is regarding step 5. Customer can try the payment again. I was hoping to use elements for ease. If not, I can pass the "next_action" to an iframe.

[kindred stump]

@little basin sorry for taking a while to get back, had to handle some other stuff.

[little basin]

Haha it's ok. Stripe's team was the fastest for QA :D. Firebase guys I have to wait 6h + for something

[kindred stump]

you can't prefill but to handle the situation whereby you need to handle 3DS subsequently, you can use this method : https://stripe.com/docs/js/payment_intents/handle_card_action

you wouldn't need to fill up the credit card details again if you're using handle_card_action

[little basin]

oh

Will that handle the 3ds properly too?

[kindred stump]

maybe let me step back to the beginning too to ask some questions too

when you first add the card in step 2, do you also set usage=off_session ?
https://stripe.com/docs/api/setup_intents/create#create_setup_intent-usage

if you don't already do so, you should.

[little basin]

Yes I did

 let intent = await stripe.setupIntents.create({
          customer: customerData.customer_id,
          payment_method_types: ["card"],
          usage: "on_session",
        });```

I wrote it like this

oh wait

it hsould be off

[kindred stump]

yep

[little basin]

lol

looked at it twice, i guess went cross eyed here

[kindred stump]

now moving back to handling payment failures or 3ds payment requirement - you would use https://stripe.com/docs/payments/accept-a-payment-synchronously#web-handle-next-actions which would automatically trigger the UI for 3DS if needed

[little basin]

Ok let me read that

handleServerResponse(response) {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle required card action
    stripe.handleCardAction(
      response.payment_intent_client_secret
    ).then(handleStripeJsResult);
  } else {
    // Show success message
  }
}

function handleStripeJsResult(result) {
  if (result.error) {
    // Show error in payment form
  } else {
    // The card action has been handled
    // The PaymentIntent can be confirmed again on the server
    fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ payment_intent_id: result.paymentIntent.id })
    }).then(function(confirmResult) {
      return confirmResult.json();
    }).then(handleServerResponse);
  }
}```

This code on the front-end auto triggers the 3ds?

the stripe.handleCardAction.

[kindred stump]

yes, you can test it out if you want to be 100% sure. You can create a payment intent with a card that requires 3ds : https://stripe.com/docs/testing#regulatory-cards which should trigger require_actions subsequently

[little basin]

Got it.

Thank you... Next issue is I don't have call back from server to client

client to server is ok since firebase triggers on document changes

Would you think adding a web-hook on heroku or something is absolutely needed?

nvm just read through it. I know the answer to this. Do need a node backend or google cloud for call backs.... can't rely on firebase functions.

Thank you Alex!

[kindred stump]

you're welcome !