Step 3: Add Embed
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.
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.
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 possible values for your ID are one of wpay
, wpay1
, wpay2
, or wpay3
. We will inform you
in which instance your account has been set up.
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.
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 transaction_id
and
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?