Bread Checkout

Display Inline Checkout Experience

You can also trigger the checkout experience inline by simply replacing the buttonId field with formId. The value of this field will be the id attribute of the <div> where this inline checkout will appear. As a note, the Bread Inline Experience should not exist on the same page as a Bread Checkout or Bread Apply/Promo button.

<form id="bread-checkout-form" action="/confirm" method="POST">
<script>
var opts = {
  formId: 'bread-checkout-btn',
  actAsLabel: false,
  asLowAs: true,
  items: [
  {
    name:'Couch',
    price:150000,
    sku:'COUCH123',
    imageUrl:'[REPLACEMEWITHAREALURL]',
    detailUrl:'[REPLACEMEWITHAREALURL]', 
    quantity: 1
  }]
};
bread.checkout(opts);
</script>
</form>

The information passed into the shippingContact and/or billingContact fields in the opts object will not appear to the customer during the checkout process. If this information is modified or updated, you will need to run bread.checkout() with the new opts object.

Don’t worry – the form below is in sandbox mode; no real emails or texts will be sent, and no real credit file will be pulled.

Example Form