Light

adyen-examples / adyen-sdk-explorer Goto Github PK

View Code? Open in Web Editor NEW

5.0 2.0 3.0 5.95 MB

JavaScript 3.50% HTML 1.39% TypeScript 95.03% Dockerfile 0.08%

adyen-sdk-explorer's Introduction

Run this integration in seconds using Gitpod

Open your Adyen Test Account and create a set of API keys.
Go to gitpod account variables.
Set the ADYEN_API_KEY, ADYEN_CLIENT_KEY, ADYEN_HMAC_KEY and ADYEN_MERCHANT_ACCOUNT variables.
Click the button below!

NOTE: To allow the Adyen Drop-In and Components to load, you have to add gitpod.io as allowed origin for your chosen set of API Credentials

Adyen SDK Explorer

What this is

This is a tool to help you configure and use the Adyen web components before writing any of your own code, while providing you with the exact code you will need to replicate it.

Configuration

You will need to create .env files in both the client and server directories. The exact variables you will need are contained in the respective env-example files in these directories.

Installation

From the root directory, run npm install. This should take care of all the necessary packages you will need.

Using this repo

You have two choices on how to start this repository. If you would like to run it all at once, you can run npm start from the root directory. This will create a build of the front end, start the server, and serve it from there.

If you would like to run the front-end and back-end separately, you can cd into each of them and run them both with npm start.

adyen-sdk-explorer's People

Contributors

Stargazers

Watchers

Forkers

jlengrand whitej031788 ossiggy

adyen-sdk-explorer's Issues

Feature/Landing Page

Create a landing page

Feature/Add array properties to configuration

Currently, arrays properties are not working with our configuration objects. We need to be able to add multiple items to these props.

Feature/Klarna Component

Add the Klarna component as one of the options for rendering

Styling/Put prop names on same line as checkbox

Currently, the property names reside on the same line as the checkbox leading to the UI being much bigger than it should be.

Feature/iDeal component

Add the iDeal component as one of the options for rendering

Feature/Redirect component

Build a component to handle Redirect payment methods

Feature/Header component

Complete Header with Adyen logo. This will also eventually need to contain the log in functionality.

Feature/ACH Component

Add the ACH component as one of the options for rendering.

Required field per Payment Method

We need to update required fields per payment method so that they are able to be filled out without issue. Ex: Klarna requires line items among other things.

Feature/PayPal Component

Add the PayPal component as one of the options for rendering

Required field validations

We should be validating that all required fields have been filled before allowing a user to go to the next step. Also, having all required fields at the top of the list would help the user see what needs to be added.

Feature/Balance Platform

Create demo of balance platform API and onboarding walkthrough

Bug/Back after drop-in renders causes dupes

If you proceed to drop-in and then head back to the checkout builder, there are duplicate properties for each section.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.