The final step is to add Embed to your checkout experience. Embed handles the discovery of available payment methods, processing of the payment, and creating a transaction.

​
Install Embed

There are a few ways to install Embed, either as a React component, Node library, or straight from our CDN.

Visit our Embed guide for more information about available parameters, events and options for locale and theming.

npm install @gr4vy/embed-react --save
# or: yarn add @gr4vy/embed-react

When using the CDN the latest version of the library is always pulled straight from the server for every request.

​
Initialize the UI

With Embed installed it’s now possible to initialize the embedded payment page. Embed expects the ID of your instance (gr4vyId), the amount and currency of the transaction, the country to process this transaction in, and the embed token you generated in the previous step.

import Embed from "@gr4vy/embed-react";
// or: const { default: Embed } = require("@gr4vy/embed-react");

<form action='/' id='payment-form'>
  <Embed
    gr4vyId='example'
    form='#payment-form'
    amount={1299}
    currency='AUD'
    country='AU'
    token={token}
    environment='sandbox'
  />
  <input type="submite" />
</form>

The Gr4vy ID is the unique identifier for your instance. Together with the environment (sandbox or production) it is used to connect to the right APIs.

The Node and CDN versions of Embed needs to be attached to an HTML element. In this case, we attached the UI to a <div> with the class container. The UI can be attached to any element using any querySelector-compatible query.

You should now see Embed loaded on the page. The available payment methods will heavily depend on the enabled payment services in your account.

​
Catch transaction ID

The Embed UI will handle the capture of any payment details and then creates a transaction. Once the transaction has been created Embed will submit the form it was attached to and append the query string parameters gr4vy_transaction_id and gr4vy_transaction_status. Optionally, this form submission behavior can be overridden using the onComplete option.

const Embed = require("@gr4vy/embed-react");
// or: import Embed from "@gr4vy/embed-react";

<form action="/" id="payment-form">
  <Embed
    gr4vyId="example"
    form="#payment-form"
    amount={1299}
    currency="AUD"
    country="AU"
    token={token}
    onComplete={(transaction) => { ... }}
  />
  <input type="submit" />
</form>;

form vs onComplete

In this example, Embed uses the onComplete callback to catch the transaction ID when the transaction was created. When no onComplete is present it will submit the attached form and append gr4vy_transaction_id and gr4vy_transaction_status to the query string of the page that’s being submitted to.

​
Summary

In this step you:

  • Installed and initialized Embed.
  • Caught the resulting transaction identifier.

Was this page helpful?

2. Generate token4. Inspect transaction