3D Secure Card Payment

[AmandaDLyon]

Describe the bug
Hey guys, help me out here...

I am working on a client project for an Indian company and I got the stack running on my local machine with my own API keys. Everything but the payment seems to be working.

When I attempt to checkout, I get the following error:

completeCheckoutUsingCard Service Error: As per Indian regulations, export transactions require a customer name and address

Now I know what the error means, but why does it show and how would one fix this on your codebase (I just begun working on the client project and this is the first time I am building an E-Commerce site, so please, please help...)(FYI, I am 19 and this is my first client)

Also, I played around a bit with your version of it (over on shop.veniqa.com) and I know for a fact that you are using test API keys (duh) so I tried using a 3D secure Card from one of Stripes Test Cards section such as

4000002760003184 or 4000 0027 6000 3184 and neither work.

I really, really need your help. Please help me.

Thanks.

--

To Reproduce
Steps to reproduce the behavior:

1. Go to shopping-client facing app
2. Click on checkout with one of the aforementioned cards
3. It will say 'payment failed' and then take a look at your console logs
4. You would then See error

Expected behavior

3D secure window for Two-Factor Authentication should pop up (like a Modal).

I really really hope that you guys would help me out here. Eagerly looking forward to your response!

[smaharj1]

Thanks for bringing up this issue. I looked up and I am getting an authentication issue. It is going to take some time for us to look into it, but feel free to go around these parts to try to debug it if you would like to contribute to have a quick fix.

[gfyre]

@AmandaDLyon you are receiving the following error because your Stripe Account may have been set up with India as you Account's location. Change that to the United States to make this error go away.

completeCheckoutUsingCard Service Error: As per Indian regulations, export transactions require a customer name and address

As for 3D secure, I am facing the same issue and I think that it might have something to do with this part

@smaharj1 will be the best person to guide you here

[Viveckh]

Hey @AmandaDLyon, good to know you're adopting Veniqa for your use case!

Regarding the As per Indian regulations... error, @gfyre is spot on about that.

And as per the 3D Secure payment, the reason the payments aren't going through is because of the fact that 3D Secure card payments require an additional level of authentication which typically requires the user to be redirected to the authentication page on the Bank's website. MFA with a text code being sent to the user's phone is also involved.
More about that described on official Stripe Documentation.

This is something Veniqa doesn't support at the moment. If that's a must for your project, you'd have to implement that by updating

• Payment layout and flow on the web-client.
• PaymentService on the shopping-server (I have a feeling this might not be necessary if the frontend flow ends with stripe issuing a payment token ID as it normally does with its regular credit card payments. In this case, the backend should work as is)

In order to accept additional fields like Billing Customer Name, etc, it'd be the same.

[AmandaDLyon]

@Viveckh I don't know if I'd need 3D Secure but it seems like Indian Banks require support for MFA and it would be necessary for me to implement it.

It would be much better if guys could do this as it would be a lot quicker if the guys who made this platform integrated it. I know its asking a lot but it would mean a lot if you could make it happen...

[AmandaDLyon]

I couldn't help but notice, when you are in the Order window, you would see Stripe AUTHORIZATION

What does that mean exactly?

[Viveckh]

@AmandaDLyon Hey Amanda! At the moment, we're only doing bugfixes and patches for the platform, due to our limited bandwidth and commitment to other projects. If you'd like a custom enhancement for your use case from one of us original developers, it is still available as a premium service. You can find out more about that by emailing us.

[gfyre]

@AmandaDLyon I am going to attempt to add PaymentIntent which would allow 3D secure to work. Once I have successfully implemented and tested it, I'll submit a PR and you can take it ahead from there.

[AmandaDLyon]

Hey @Viveckh, a premium service won't be possible for me at the moment however (since this is my first project as a freelancer). I will try the implementation myself and hopefully @gfyre is able to make 3D secure work.

However, if absolutely needed, I will consider taking you up on your service.

Thanks for offering it though.

Could you also assist me on

I couldn't help but notice, when you are in the Order window, you would see Stripe AUTHORIZATION

What does that mean exactly?

Cheers!

[Viveckh]

@AmandaDLyon
If you are referring to the Stripe Authorization within the order details page, then that refers to a Stripe payment has been authorized but the card hasn't been charged yet. When an admin confirms a customer order (assuring that the order can be fulfilled), the card gets charged then. 1

[AmandaDLyon]

@Viveckh @smaharj1 I have been dabbling around with Stripe and it turns out that 3D secure runs over a different Stripe API (Payment Intent API) whereas Veniqa uses Stripe Charges API.

Implementing 3D secure would hence require edits to the Webclient-Server as well.

Refer to this

[gfyre]

Hey Amanda, I've looked at Stripe Migration documents and am trying to implement Payment Intents API into Veniqa. However, I have hit a snag. I'll keep you @Viveckh and @smaharj1 updated upon when I am done implementing and testing the same.

[gfyre]

@smaharj1 @Viveckh I have managed to migrate the backend to the Payment Intents api. Essentially go into orderService.js

and under const chargeObj in completeCheckoutUsingCard, replace that bit of code with the following:

const chargeObj = stripe.paymentIntents.create({
                amount: Math.round(checkout.cart.totalPrice.amount * 100),
                currency: 'usd',
                payment_method: 'pm_card_visa',
                confirmation_method: 'manual',
                metadata: {
                    user_email: userObj.email
                },
                description: "Veniqa Order " + checkoutId.substr(checkoutId.length - 6), // Last six chars of id
                statement_descriptor: "Veniqa Order " + checkoutId.substr(checkoutId.length - 6)
            });

Now what needs to be done next is to take the client-secret id which is generated by the payment intent we created above needs to be made accessible on the client side where you would then Use the confirmCardPayment function, which collects the payment information and submits it directly to Stripe where the payment would be processed after the 3D secure window shows up.

[gfyre]

I need one of you to help me out with this bit

[AmandaDLyon]

@AmandaDLyon Hey Amanda! At the moment, we're only doing bugfixes and patches for the platform, due to our limited bandwidth and commitment to other projects. If you'd like a custom enhancement for your use case from one of us original developers, it is still available as a premium service. You can find out more about that by emailing us.

@Viveckh @smaharj1 I have emailed you on this address. Please take a look. Thanks.

[AmandaDLyon]

I managed to get 3D secure to work. Soon I'll submit a pull request. @smaharj1 @Viveckh

[smaharj1]

I managed to get 3D secure to work. Soon I'll submit a pull request. @smaharj1 @Viveckh

Awesome! That'd be a great help. If possible make sure the PR explains what you did to make it work.

[AmandaDLyon]

@smaharj1 Once I have launched my clients project, I'll implement my solution into Veniqa submit a pull request along with what I did to make it work.

However, basically, these are the steps to follow:

Stripe 3DS SCA integration needs to be done on the Client and Server end. Below are the steps in general:

1. Create a paymentIntent (ID essentially) on the server when the client is on the checkout page (for example)
2. You then take the “client_secret” (which is within the paymentIntent created above) and make it accessible to the web client (customer-facing frontend)
3. Then you collect the card details which in our case is collected by Stripe Elements
4. Then call stripe.confirmCardPayment
5. Handle a declined payment by asking the customer to re-check their card details and only if the payment is successful, push the order to an approved checkout bucket and push the customer to the checkout page.