Dashboard

Embedded Experience

Suggest Edits

MoneyHash's Embedded Experience allows you to integrate seamlessly by using a URL, either on an iframe or by redirecting your customer to a new page.

To use the Embedded integration, you need to create an intent for each transaction through API calls. The response from the intent creation endpoint provides the 'embed_url' which will provide the necessary URL for the integration.

Prerequisites

Before starting using the Embedded integration, be sure to have completed the steps described below.

  1. Get Started with MoneyHash to access your own Organization.
  2. Create an Account within your Organization.
  3. Connect providers to your new Account.
  4. Set up your Payment Defaults.
  5. Get your API keys in the dashboard to make API calls.

Using the Embedded experience

To use Embedded integration, you need to start by creating a new intent through an API call to the Payment intent endpoint:

POST
/api/v1.1/payments/intent/

To use MoneyHash endpoints, you need to provide correct authentication information. Otherwise, you will not be able to create intents or perform other requests to MoneyHash API.

Custom fields

At the intent creation, you are able to send an object as parameter in the custom_fields key. For example, if you already have this customer's information you may desire to send this data here, eliminating the need for this customer to type in his personal information again

The response from the Payment intent endpoint will contain all information related to the newly created intent. You find the URL to embed the payment on your page and show your customer the checkout experience at response.data.embed_url. As mentioned above, you can embed the URL content through an iframe or redirect customers to a new page.

Iframe

You can render the iframe directly in your HTML like this:

<iframe src ="https://embed.moneyhash.io/embed/payment/LWa7PYZ"></iframe>

Redirect

You can use the URL recovered to redirect your customer in a few ways, for example, using an <a> tag:

<a href="https://embed.moneyhash.io/embed/payment/LWa7PYZ">Checkout</a>

With these steps, your customer will be presented with the Embedded integration provided by MoneyHash, and they will be able to perform their payment. Examples of this solution can be seen in our Sandbox feature.

Loader UI

Here are some query parameters you can add to the embed URL to change the UI of the loader.

loader[backgroundColor] -> controls the background color

loader[color] -> controls the spinner color

loader[icon] -> Custom loader icon (image url)

loader[size] -> controls loader icon/spinner size

loader[animate]=true -> enable the spinner animation on the custom loader

Notifications

After integrating with MoneyHash through the Embedded Experience, it's recommended you learn how to configure and use Webhooks and Redirects to receive notifications and automatically redirect your customer.

Updated 2 months ago