Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
public
src
.env
.gitignore
README.md
package-lock.json
package.json
yarn.lock

README.md

Payment form from scratch with react-cli

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

Requirements

You need to install node.js LTS version.

Create the project

First, create the react app HelloWorld project:

npx create-react-app minimal-example

Enter on the project

cd minimal-example

Add the dependency with yarn:

# with npm
npm install --save @lyracom/embedded-form-glue
# or with yarn
yarn add @lyracom/embedded-form-glue

Run and test it:

npm run start

see the result on http://localhost:3000/

For more details, see https://cli.vuejs.org/guide/creating-a-project.html

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, ...

Add them in public/index.html in the the HEAD section:

<!-- theme and plugins. should be loaded in the HEAD section -->
<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>

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

For more information about theming, take a look to Lyra theming documentation

Replace the src/App.css styles to:

h1 { margin: 40px 0 20px 0; width: 100%; text-align: center; } .container {
display: flex; justify-content: center; }

Next, update src/App.js to:

import React, { Component } from "react";
import KRGlue from "@lyracom/embedded-form-glue";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="form">
        <h1>Payment form</h1>
        <div className="container">
          <div id="myPaymentForm"></div>
        </div>
      </div>
    );
  }

  componentDidMount() {
    const endpoint = "CHANGE_ME: JAVASCRIPT ENDPOINT";
    const publicKey = "CHANGE_ME: YOUR PUBLIC KEY";
    const formToken = "DEMO-TOKEN-TO-BE-REPLACED";

    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 */
  }
}

export default App;

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 start
You can’t perform that action at this time.