Skip to main content
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

There are a few ways to install Embed, either as a React component, Node library, or straight from the CDN. Visit the 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, initializing the embedded payment page is now possible. 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="submit" />
</form>
The instance ID is the unique identifier for the deployment of the system and is included in every API call. Together with the environment (sandbox or production) it is used to connect to the right APIs, as well as dashboard.
The Node and CDN versions of Embed need to be attached to an HTML element. In this case, the UI is attached to a <div> with the class container. The UI can be attached to any element using any querySelector-compatible query.
Embed should now be loaded on the page. The available payment methods heavily depend on the enabled payment services in the account.

​
Catch transaction ID

The Embed UI handles the capture of any payment details and then creates a transaction. Once the transaction has been created Embed submits the form it was attached to and append the query string parameters transaction_id and 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 onCompleteIn this example, Embed uses the onComplete callback to catch the transaction ID when the transaction was created. When no onComplete is present it submits the attached form and appends transaction_id and transaction_status to the query string of the page that’s being submitted to.

​
Submission without a form

Embed does not require a form to be present, submit can be called directly. onComplete should be used if you are choosing this option. Additionally, the form option should not be passed in this scenario to avoid issues related to Embed being submitted twice in a row. 
const { default: Embed, EmbedInstance } = require("@gr4vy/embed-react")
// or: import Embed, { EmbedInstance } from "@gr4vy/embed-react"

const embed = useRef<EmbedInstance>();

<div>
  <Embed
    ref={embed}
    gr4vyId="example"
    amount={1299}
    currency="AUD"
    country="AU"
    token={token}
    onComplete={(transaction) => { ... }}
  />
  <button onClick={() => embed.current.submit()}>Submit</button>
</div>

​
Summary

In this step you:
  • Installed and initialized Embed.
  • Caught the resulting transaction identifier.