Version: 1.1.0

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 install @gr4vy/embed-react
Gr4vy Embed

Head over to GitHub to learn more about Gr4vy Embed, it's parameters, events, and all the different ways in which it can be integrated into your UI.

Initialize the UI#

With Gr4vy Embed installed it's now possible to initialize the Gr4vy UI. Gr4vy expect the ID of your Gr4vy instance (gr4vyId ), the amount and currency of the transaction, the country to process this transaction in, and the client 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 completed can either emit the transaction ID as an event, or submit any form it was attached to with the transaction ID embedded in the form.

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 will both log the transaction ID when a transaction was successfully created. Additionally, it will insert a hidden HTML input into the form with the name gr4vy_transaction_id.

Summary#

In this step you:

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