Skip to main content

Options

Gr4vy Embed can be configured in a few ways.

Setup with element & form

Gr4vy Embed expects the query for two HTML elements to attach itself to. The values for these elements are a query string that can be parsed by document.querySelector. For example, <div class="container"></div> would be represented as .container, while <form id="cardform"> would be represented by #cardform.

HTML ElementExampleDescription
element.containerSpecifies the HTML element to attach the form to. Gr4vy Embed will insert the form at this location. This parameter also supports directly providing a HTML element.
form#orderSpecifies the HTML <form> element or a query for the element to attach additional inputs to. Gr4vy will automatically insert a hidden Input field into this form containing the transaction ID.

Note: These elements are not required for Gr4vy Embed for React as this component will handle the form submission in a more React friendly way.

Environment

Gr4vy Embed defaults to production environment. To use Gr4vy Embed in sandbox, set the environment option to sandbox.

Cart Items (Optional)

Optionally, you may pass the contents of your shopping cart to Embed using the cartItems option. Where supported, cartItems will be available to view alongside the transaction details in your Payment Service Provider.

cartItems: [
{
name: "Pot Plant",
quantity: 1,
unitAmount: 1299,
},
{
name: "House Plant",
quantity: 2,
unitAmount: 2499,
discountAmount: 499,
},
]

Properties

FieldTypeRequiredDescription
namestring Max: 255YA descriptive name for the item.
quantityintegerYThe quantity added to the shopping cart for this item. Must be a whole number.
unitAmountintegerYThe unit price for the item in cents (or equivalent). Example: For $12.99 set to 1299.
discountAmountinteger-The total discount for the full quantity of the item in cents (or equivalent). Example: For an item with a unitAmount of 500, a quantity of 2, and a discount of 20%, set to 200 ($5.00 x 2 (quantity) = $10.00, discount @ 20% = $2.00).
taxAmountinteger-The total tax for the full quantity of the item in cents (or equivalent). Example: For an item with a unitAmount of 500, a quantity of 2, and taxed at 10%, set to 100 ($5.00 x 2 (quantity) = $10.00, tax @ 10% = $1.00).
externalIdentifierstring Max: 200-Your own ID for the item.
skustring Max: 200-The SKU (Stock Keeping Unit) of the item.
productUrlurl-The full URL, including the scheme, to the product page for the item.
imageUrlurl-The full URL, including the scheme, to the product image for the item.
categoriesstring[] Max: 50-Specify up to a maximum of 100 custom category names.
productTypestring-One of: physical, digital, gift_card, store_credit, discount, surcharge, shipping_fee, sales_tax.

Cart Items are for information purposes only and will not affect the transaction amount that is charged. You should ensure that amount is set correctly to avoid failing transactions.

Additional configuration

There are additional ways to configure Gr4vy Embed and a lot of additional options that can be passed along on setup.