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 thatamount
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.