Customize Embed Layout

When starting a payment by creating a new intent, you have multiple options to customize the Embed Experience that MoneyHash gives you through the embed_url. On this page, we explore these customizations.

Customizations

For every customization we will present, you need to start at the creation of the intent using the Create Intent endpoint:

POST

/api/v1.1/payments/intent/

For comparison between each option, we will start to present below. Here is an example image of the embed experience:

In the payload, with the required fields (amount, amount_currency, operation and webhook_url), you will add one of the following flags, indicating the customization you desire to apply:

Header

You can use the hide_header flag to customize the header content:

Property	Type	Description
`amount`	Number	The amount to charge in the payment process.
`amount_currency`	String	The currency of the amount is represented by a string of alphabetic codes from ISO 4217 Currency codes.
`operation`	String	The type of the current intent. It can be one of `purchase`, `authorize`, or `capture`.
`webhook_url`	String	A URL that the MoneyHash server will send a POST request to you when needed.
`hide_header`	Boolean	This flag set as `true` will hide the presented logo from the header of the page.

Sidebar

You can use the hide_amount_sidebar flag to customize the sidebar:

Property	Type	Description
`amount`	Number	The amount to charge in the payment process.
`amount_currency`	String	The currency of the amount is represented by a string of alphabetic codes from ISO 4217 Currency codes.
`operation`	String	The type of the current intent. It can be one of `purchase`, `authorize`, or `capture`.
`webhook_url`	String	A URL that the MoneyHash server will send a POST request to you when needed.
`hide_amount_sidebar`	Boolean	This flag set as `true` will hide the sidebar on the right containing the payment amount.

You can use the template flag to customize the sidebar:

Property	Type	Description
`amount`	Number	The amount to charge in the payment process.
`amount_currency`	String	The currency of the amount is represented by a string of alphabetic codes from ISO 4217 Currency codes.
`operation`	String	The type of the current intent. It can be one of `purchase`, `authorize`, or `capture`.
`webhook_url`	String	A URL that the MoneyHash server will send a POST request to you when needed.
`template`	Object	The template field is an object containing details to be added.
`template.template_id`	String	The identification of the template's type.
`template.template_data`	Array of objects	An Array of objects to inform MoneyHash what you wish to present to the customer.

{
  "amount": 50,
  "amount_currency": "usd",
  "operation": "purchase",
  "template": {
    "template_id": "adjustable_custom_amounts",
    "template_data": [
      {
        "title": { // the title for the field in each language you wish to provide.
          "en": "Select how much to donate:"
        },
        "type": "donation", // the type of the field to be present at the payment amount.
        "values": [ // the optional choices of value to present your customer.
          50,
          100
        ]
      },
      {
        "title": {
          "en": "Select how much to tip:"
        },
        "type": "tipping",
        "values": [
          45,
          50
        ]
      }
    ]
  },
  "webhook_url": "https://webhook.site/b8954509-f628-4805-a4b4-58a0fb2be958"
}

By using the template flag, you will have an embed experience, as the image below presents:

Form

You can use the form_only flag to customize the embed experience forms:

Property	Type	Description
`amount`	Number	The amount to charge in the payment process.
`amount_currency`	String	The currency of the amount is represented by a string of alphabetic codes from ISO 4217 Currency codes.
`operation`	String	The type of the current intent. It can be one of `purchase`, `authorize`, or `capture`.
`webhook_url`	String	A URL that the MoneyHash server will send a POST request to you when needed.
`form_only`	Boolean	By setting this flag to `true`, you must also inform the payment_method field in the intent creation, such as `"payment_method": "CARD"` to this option to work properly. This will result in an embedded experience that shows the customer only the card form to fulfill.