Version: Beta

Step 3: Add Gr4vy Embed

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

Install Gr4vy Embed#

There are a few ways to install Gr4vy Embed, either as a React component, Node library, or straight off your Gr4vy instance's CDN.

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

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

Initialize the UI#

With Gr4vy Embed installed it's now possible to initialize the Gr4vy UI. Embed expects the ID of your Gr4vy 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 Gr4vyEmbed from (`@gr4vy/embed-react)
// or: const { default: Gr4vyEmbed } = require(`@gr4vy/embed-react`)
<form action='/' id='payment-form'>
<Gr4vyEmbed
gr4vyId='acme'
form='#payment-form'
amount={1299}
currency='USD'
country='US'
token={token}
/>
<input type="submit" />
</form>

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

The Gr4vy Embed checkout experienceThe Gr4vy Embed checkout experience

Catch transaction ID#

The Gr4vy 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 querystring parameters gr4vy_transaction_id and gr4vy_transaction_status. Optionally, this form submission behavior can be overridden using the onComplete option.

const Gr4vyEmbed = require(`@gr4vy/embed-react`)
// or: import Gr4vyEmbed from (`@gr4vy/embed-react)
<form action='/' id='payment-form'>
<Gr4vyEmbed
gr4vyId='acme'
form='#payment-form'
amount={1299}
currency='USD'
country='US'
token={token}
onEvent={
(eventName, data) => {
if (eventName === 'transactionCreated') {
console.log(data.id)
}
}
}
/>
<input type="submit" />
</form>
form vs onEvent

In this example Gr4vy Embed uses the onEvent callback to log the transaction ID when the transaction was successfully created. Additionally, it submits the form to the form's action URL appending gr4vy_transaction_id and gr4vy_transaction_status to the querystring.

Summary#

In this step you:

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