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 Element	Example	Description
element	.container	Specifies 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	#order	Specifies 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

Field	Type	Required	Description
name	string Max: 255	Y	A descriptive name for the item.
quantity	integer	Y	The quantity added to the shopping cart for this item. Must be a whole number.
unitAmount	integer	Y	The unit price for the item in cents (or equivalent). Example: For $12.99 set to 1299.
discountAmount	integer	-	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).
taxAmount	integer	-	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).
externalIdentifier	string Max: 200	-	Your own ID for the item.
sku	string Max: 200	-	The SKU (Stock Keeping Unit) of the item.
productUrl	url	-	The full URL, including the scheme, to the product page for the item.
imageUrl	url	-	The full URL, including the scheme, to the product image for the item.
categories	string[] Max: 50	-	Specify up to a maximum of 100 custom category names.
productType	string	-	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.

• All options for Gr4vy Embed
• All options for Gr4vy Embed for React