Skip to content

Latest commit

 

History

History
 
 

next-minimal

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
pages
pages
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

README.md

Payment form from scratch with nextjs

This page explains how-to create a dynamic payment form from scratch using next.js with react and embedded-form-glue library.

Requirements

You need to install node.js LTS version.

Create the project

mkdir next-minimal
cd next-minimal

and add package.json file with:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Install deps:

npm install --save next react react-dom @babel/core @lyracom/embedded-form-glue

and add ./pages/index.js:

function Home() {
  return <div>Welcome to Next.js!</div>;
}

export default Home;

and then just run npm run dev and go to http://localhost:3000. For more details on next.js web-site.

add the payment form

First you have to add 2 theme files:

File Description
classic-reset.css default style applied before the Lyra Javascript Library is loaded
classic.js theme logic, like waiting annimation on submit button, ...

Update ./pages/index.js: to:

import Head from "next/head";
import React from "react";
import dynamic from "next/dynamic";

class IndexPage extends React.Component {
  componentDidMount() {
    import("@lyracom/embedded-form-glue").then(glue => {
      const endpoint = "CHANGE_ME: JAVASCRIPT ENDPOINT";
      const publicKey = "CHANGE_ME: YOUR PUBLIC KEY";
      const formToken = "DEMO-TOKEN-TO-BE-REPLACED";
      const KRGlue = glue.default;

      KRGlue.loadLibrary(endpoint, publicKey) /* Load the remote library */
        .then(({ KR }) =>
          KR.setFormConfig({
            /* set the minimal configuration */
            formToken: formToken,
            "kr-language": "en-US" /* to update initialization parameter */
          })
        )
        .then(({ KR }) =>
          KR.addForm("#myPaymentForm")
        ) /* add a payment form  to myPaymentForm div*/
        .then(({ KR, result }) =>
          KR.showForm(result.formId)
        ); /* show the payment form */
    });
  }

  render() {
    return (
      <div>
        <Head>
          <title>My page title</title>
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          <link
            rel="stylesheet"
            href="https://[CHANGE_ME: JAVASCRIPT ENDPOINT]/static/js/krypton-client/V4.0/ext/classic-reset.css"
          />
          <script src="https://[CHANGE_ME: JAVASCRIPT ENDPOINT]/static/js/krypton-client/V4.0/ext/classic.js"></script>
        </Head>
        <div id="myPaymentForm"></div>
      </div>
    );
  }
}

export default IndexPage;

note: Replace [CHANGE_ME] with your credentials and end-points.

For more information about theming, take a look to Lyra theming documentation Your payment form will be added to #myPaymentForm element.

your first transaction

The payment form is up and ready, you can try to make a transaction using a test card with the debug toolbar (at the bottom of the page).

If you try to pay, you will have the following error: CLIENT_998: Demo form, see the documentation. It's because the formToken you have defined using KR.setFormConfig is set to DEMO-TOKEN-TO-BE-REPLACED.

you have to create a formToken before displaying the payment form using Charge/CreatePayment web-service. For more information, please take a look to:

Run it from github

You can try the current example from the current github repository doing:

cd examples/vuejs/minimal-example
npm install
npm run dev