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="submit" />
</form>
The instance ID is the unique identifier for your deployment of our 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 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 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 will submit the attached form and append 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.