Quick start
DPD’s embed components are HTML elements you paste into your own site: product cards, add to cart buttons, a cart and a checkout button. Your visitors browse and fill their cart on your page. When they check out, they go to your store’s hosted checkout to pay.
The examples on these pages are live. They sell from DPD’s demo store, which runs in test mode, so go ahead and add things to the cart.
1. Add dpd.js to your page
Section titled “1. Add dpd.js to your page”Every DPD store serves a copy of dpd.js from its cart host. Put the
script tag in your page’s <head>, with your store’s subdomain in place of
STORE:
<script src="https://STORE.dpdcart.com/dpd.js" defer></script>2. Allow your website
Section titled “2. Allow your website”The components only work on sites you’ve allowed. Your store’s website (the one in its settings) is allowed already. For any other domain, add it in the DPD admin under Settings > Checkout > Embed domains. See Where they work for the details.
3. Add a product
Section titled “3. Add a product”<dpd-product> shows a product’s image, name and price, with an add to cart
button. Its product is the product’s ID, which you’ll find in the DPD
admin (it’s also in the button code page’s components tab).
<dpd-product product="163005"></dpd-product>Click Add to cart and the cart opens in a drawer at the side of the page.
4. Add a cart button
Section titled “4. Add a cart button”Put <dpd-cart-button> in your site’s header. It shows how many things are
in the cart, and opens the drawer.
<dpd-cart-button label="Cart"></dpd-cart-button>That’s a working shop. The drawer has the cart’s items, quantities, coupon field, totals and a checkout button.
The elements
Section titled “The elements”| Element | What it is |
|---|---|
<dpd-product> |
A product card, or the full product with its description |
<dpd-add-to-cart> |
An add to cart button, with your own label |
<dpd-cart> |
The cart, right in your page |
<dpd-cart-button> |
A cart icon with the item count, which opens the drawer |
<dpd-checkout-button> |
Goes straight to the hosted checkout |
They all share one cart, the same one DPD’s classic buy buttons use, so you can mix them on a page.
More than one store
Section titled “More than one store”Each element sells from the store whose dpd.js you loaded. To sell from
another store on the same page, give the element a store attribute with
that store’s cart host:
<dpd-add-to-cart store="otherstore.dpdcart.com" product="456"></dpd-add-to-cart>store also takes a full origin, like https://shop.example.com for a
store on its own domain. Each store gets its own cart and drawer.