Online payments using the new Web Payment APIs

This page summarizes the projects mentioned and recommended in the original post on dev.to

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • payment-request-api-example

    A sample app showcasing the Payment Request API

  • # Clone this repo $ git clone https://github.com/deepu105/payment-request-api-example $ cd payment-request-api-example # Install dependencies $ npm install # create a file named `.env` with values `API_KEY="your_Adyen_API_key"` and `MERCHANT_ACCOUNT="your_Adyen_merchant_account"` $ vi .env # start application $ npm start

  • adyen-node-online-payments

    Accept payments on your Node.js/Express-based website with cards, wallets, and key local payment methods

  • You can find the complete source code for this example here. I'm not going to focus on the backend as I'm using a simplified version of the NodeJS backend from this example, you can read this tutorial if you are interested in the backend.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • adyen-cse-web

    Discontinued [DEPRECATED] Client-side encryption on JavaScript

  • async function checkout() { try { const adyenPaymentMethods = await callServer("/api/getPaymentMethods"); // create a new payment request const request = new PaymentRequest(buildSupportedPaymentMethodData(adyenPaymentMethods), buildShoppingCartDetails()); // show payment sheet const payment = await request.show(); // Here we would process the payment. const response = await callServer("/api/initiatePayment", { // This works only for PCI compliant credit card payments. // For non PCI compliant payments the data needs to be encrypted with something like https://github.com/Adyen/adyen-cse-web // But encrypting data here is not secure as a malicious script may be able to access the data in memory here paymentMethod: { type: "scheme", number: payment.details.cardNumber, expiryMonth: payment.details.expiryMonth, expiryYear: payment.details.expiryYear, holderName: payment.details.cardholderName, cvc: payment.details.cardSecurityCode, }, }); // Handle the response code switch (response.resultCode) { case "Authorised": await payment.complete("success"); window.location.href = "/result/success"; break; case "Pending": case "Received": await payment.complete("unknown"); window.location.href = "/result/pending"; break; case "Refused": await payment.complete("fail"); window.location.href = "/result/failed"; break; default: await payment.complete("fail"); window.location.href = "/result/error"; break; } } catch (error) { // ... } return false; }

  • adyen-web

    Adyen Web Drop-in and Components

  • Note: This is absolutely not recommended for production use with Adyen as the Payment Request API is quite new and capturing credit card data via this is still not as secure as using the Web components provided by Adyen which securely encrypts the data. I'm not encrypting card details, which is only possible if you are PCI compliant and your Adyen account has the necessary roles. In the future, once the Payment Handler API becomes widely implemented by browsers, this could change and Adyen might start providing official support for this. We will see more about that later in the post.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • How You Can Stay Up-To-Date with Adyen Tech

    2 projects | dev.to | 28 Dec 2022
  • Create a Single Page Application in React.js Using EasyFrontend

    1 project | dev.to | 20 Apr 2024
  • A Guide to Integrating with Adyen Web for 3D Secure 2 Payments

    4 projects | dev.to | 12 Jan 2024
  • Skeleton UI – v2.0 Release Candidate

    1 project | news.ycombinator.com | 15 Aug 2023
  • Updates to Skeleton - new release, new store, and v2 soon! [self promotion]

    2 projects | /r/sveltejs | 20 Jul 2023