How do you process credit card transactions from JavaScript?

Hello,
I have a website. I want to use the Payment Request API. I want to support credit cards, android pay and apple pay. This API looks like what I need. But, I see that processing credit cards is shown. Yet, the money isn’t actually received. The developer’s has to take the info collected via the Payment Request API and run it through a credit card processor. This is where I get lost.

What payment processor can be used with the Payment Request API? Everything I see relies on some sort of form hosted by a processing service. Supposedly, this is because of PCI compliance. This means any implementation with the Payment Request API is not PCI compliant. Am I missing something here? Is there a credit card processor that works with the Payment Request API that is PCI compliant? If so, which one?

From my understanding of reading the docs that is merely a UI component that doesn’t do any processing. What you will need to do is also create server-side script/endpoint to process the payment. The server-side script will integrate with a payment API like Stripe to actually carry out transaction. You won’t be able to process the transaction without a payment vendor. So first you need to determine the vendor which you are going to use to process payments. From there you create a server-side script to handle the info coming from the client-side and pass it onto the vendors payment API service. It should also be noted that will only be functional in chrome versions that support he feature. You will still need to implement a fall back checkout process for all other browsers.

Here’s the challenge that I’ve experienced which is why I posted this question. In order to process the payment, you have to get a nonce. However, from what I’ve seen, I can’t get a nonce by just calling an API from my server. Instead, I have to load up an HTML form provided by the payment processor. To further complicate things, I can’t just grab that nonce via JavaScript either due to cross-site scripting restrictions.

It seems to me like there has to be a way to process credit card information collected via the Payment Request API, in a PCI-compliant manner, but I don’t see it.

I think you’re thinking about the problem backwards. What I would recommend is to approach it from the inside out instead. What I mean by this is to start by establishing a vendor that you will use to process payments. Once you have determined this that vendor should provide API documentation for their services. You will then choose an appropriate server-side technology stack to create a script that interacts with their API and process the payment. From there you will than refine and modify your script to accommodate the needs of the front-end code which will interact with that script. Cross origin request will be taken out of equation because it is your back-end script that will interact with the payment gateway and contain security critical info that you can’t make accessible to the front-end like the keys and what not to authenticate with the vendors service. You need to put the horse before the carriage so to speak. In that regards I wouldn’t worry about integrating the google payment api until you have fully functional checkout process with using that api. This will add the feature in gracefully degrading manor since the payment api is really nothing more than a chrome only compatible “decorative”/ux element to enhance the checkout experience for some users.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.