Orkun-style-react | Stripe Developers | Page 1

barren solstice Sep 9, 2022, 7:22 PM

#

Hi there

desert swallow Sep 9, 2022, 7:23 PM

#

Hello!

barren solstice Sep 9, 2022, 7:23 PM

#

CardElement takes an options prop that includes style

#

See: https://stripe.com/docs/payments/accept-card-payments?platform=web&ui=elements&html-or-react=react#add-and-configure-a-component

desert swallow Sep 9, 2022, 7:24 PM

#

I've seen that documentation but I can't get it to look the way I'd like it

#

I want to have all the fields vertical

#

Instead of horizontal

#

Not sure how to accomplish that

#

Also not sure how to style each field individually

barren solstice Sep 9, 2022, 7:25 PM

#

Ah I see. Yeah that's not possible with Card Element. What you want are to use the Elements individually in this case: https://stripe.com/docs/stripe-js/react#available-element-components

#

So you would have a CardNumberElement CardExpiryElement and CardCvcElement

desert swallow Sep 9, 2022, 7:28 PM

#

Can I use the stripe.createToken(card) method for that

#

I mean with individual elements

barren solstice Sep 9, 2022, 7:28 PM

#

Yep

#

But really you should use stripe.createPaymentMethod

#

As createToken is our legacy method

desert swallow Sep 9, 2022, 7:29 PM

#

So I should use the Payment Intent instead?

barren solstice Sep 9, 2022, 7:29 PM

#

Yes

#

You should use PaymentIntents and PaymentMethods

desert swallow Sep 9, 2022, 7:29 PM

#

The only problem I ran into with that is that when I hit the stripe.ConfirmPayment, it doesn't return a receipt url which I need for my business logic

barren solstice Sep 9, 2022, 7:31 PM

#

It does. The receipt_url will be within the charges hash on the PaymentIntent

#

Specifically charges.data: https://stripe.com/docs/api/payment_intents/object#payment_intent_object-charges-data

#

PaymentIntents still use Charges under the hood

#

So everything on the Charge object will be present with a PaymentIntent

desert swallow Sep 9, 2022, 7:33 PM

#

I don't see the receipt_url in the PaymentIntent return object

#

  "id": "pi_3LXCmgAHSUNFp47b0gdSmDpm",
  "object": "payment_intent",
  "amount": 4444,
  "amount_capturable": 0,
  "amount_details": {
    "tip": {}
  },
  "amount_received": 0,
  "application": null,
  "application_fee_amount": null,
  "automatic_payment_methods": null,
  "canceled_at": null,
  "cancellation_reason": null,
  "capture_method": "automatic",
  "charges": {
    "object": "list",
    "data": [],
    "has_more": false,
    "url": "/v1/charges?payment_intent=pi_3LXCmgAHSUNFp47b0gdSmDpm"
  },
  "client_secret": "pi_3LXCmgAHSUNFp47b0gdSmDpm_secret_GnCYstadZDdHHmNv8tmBnbofq",
  "confirmation_method": "automatic",
  "created": 1660606406,
  "currency": "usd",
  "customer": null,
  "description": null,
  "invoice": null,
  "last_payment_error": null,
  "livemode": false,
  "metadata": {},
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": null,
  "payment_method_options": {
    "card": {
      "installments": null,
      "mandate_options": null,
      "network": null,
      "request_three_d_secure": "automatic"
    }
  },
  "payment_method_types": [
    "card"
  ],
  "processing": null,
  "receipt_email": null,
  "review": null,
  "setup_future_usage": null,
  "shipping": null,
  "statement_descriptor": null,
  "statement_descriptor_suffix": null,
  "status": "requires_payment_method",
  "transfer_data": null,
  "transfer_group": null
}```

barren solstice Sep 9, 2022, 7:34 PM

#

That PaymentIntent hasn't been confirmed

#

Notice "status": "requires_payment_method"

desert swallow Sep 9, 2022, 7:35 PM

#

My BE developers created an endpoint for confirming payment intent which can return a receipt_url

#

But that endpoint requires a payment method

#

How can I create a payment method that returns a payment method id?

barren solstice Sep 9, 2022, 7:36 PM

#

Why do you want to confirm on the Server and not the client?

desert swallow Sep 9, 2022, 7:37 PM

#

Because I implemented it in a way where I was calling the stripe.confirmPayment on the client before and it wasn't returning a receipt_url even after the payment was confirmed

barren solstice Sep 9, 2022, 7:37 PM

#

Sure. That's because you need to pass the PaymentIntent back to your server after successful confirmation on the client and retrieve it from your server to access the Receipt URL.

desert swallow Sep 9, 2022, 7:37 PM

#

I was using <PaymentElement />

barren solstice Sep 9, 2022, 7:38 PM

#

The Receipt URL is sensitive and not something that we provide client-side.

#

Like most of the PaymentIntent data

desert swallow Sep 9, 2022, 7:38 PM

#

Right, so that's why my BE team implemented this https://stripe.com/docs/api/payment_intents/confirm

Stripe API reference – Confirm a PaymentIntent – curl

Complete reference documentation for the Stripe API. Includes code snippets and examples for our Python, Java, PHP, Node.js, Go, Ruby, and .NET libraries.

barren solstice Sep 9, 2022, 7:38 PM

#

Yeah but you don't need that

#

Let me write out the flow for you

desert swallow Sep 9, 2022, 7:38 PM

#

Sure, thank you

barren solstice Sep 9, 2022, 7:40 PM

#

1/ create PaymentIntent on server
2/ pass client secret from server to client
3/ render Payment Element on client
4/ Confirm PaymentIntent using confirmPayment on client to complete payment
5/ Pass the successful PaymentIntent ID back to your Server
6/ Retrieve the PaymentIntent on your Server using: https://stripe.com/docs/api/payment_intents/retrieve to access the Receipt_URL
7/ Pass the Receipt_URL back to your client to provide to your customer

#

This is really just the flow here: https://stripe.com/docs/payments/accept-a-payment, with a couple added steps to retrieve the receipt_url from your server and pass it back to your client

desert swallow Sep 9, 2022, 7:48 PM

#

So the receipt_url will be there once our BE hits gets back the payment intent Id from me?

#

Thanks a lot for the flow btw

barren solstice Sep 9, 2022, 7:51 PM

#

Yep

#

The receipt_url is created as soon as the PaymentIntent is successfully confirmed (once there is a successful Charge)

#

You just can't see it from the client since we don't expose sensitive data on the client (like metadata/receipt_url/etc.)

desert swallow Sep 9, 2022, 7:59 PM

#

We got it working this way! Thank you so much!

#Orkun-style-react