Documentation

Integration with Zuora payment page

Suggest Edits

Overview

To allow adding payment methods via the Stigg app, a payment page must first be created in Zuora.

Follow the steps below to complete the setup.

📘

All payment methods are stored directly in Zuora.


Setting up the integration

Log in to your Zuora account.

Under the Settings section, click on Payments.

In the opened page, click on Setup Payment Page and Payment Link.

In the opened screen scroll down to the Page List section.

Edit an existing page or create a new one.

When creating a new page, select the Credit card type.


Under the Basic Information section, enter the following information:

  1. Page name - Stigg app
  2. Hosted domain - https://app.stigg.io
  3. Callback path - /

Ensure all card input fields, including Expiration Date, are set to Display and Required.

Under the CSS section, enter the below CSS rules to match the page styling to the Stigg app's styling:

body, td, input, textarea, select {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
}

input, select {
  vertical-align: middle;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  height: 36px;
  padding: 0 12px;
}

select {
  background: #fff;
}

input.hint {
  color: #888;
}

label {
  display: block;
  padding-left: 8px;
  color: darkblue; /* Updated field names text color to dark blue */
}

h3 {
  color: rgba(0, 0, 0, 0.54);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.334;
  letter-spacing: 0em;
  margin: 1rem 0;
}

h2, label {
  color: rgba(0, 0, 0, 0.54);
}

body {
  margin: 8px;
}

.form {
  padding: 24px 16px;
  margin: 0 auto;
}

.invalid {
  border: 1px solid #f44336;
}

.form-group {
  margin-bottom: 16px;
}

.form-element {
  display: inline-block;
  padding-left: 1px;
  min-width: 270px;
}

.form-element.required {
  border-left: 4px solid #3f51b5;
  padding: 2px;
}

.form-group .error {
  margin: 4px 0 5px 140px;
  color: darkred; /* Updated error text color to dark red */
  font-size: 12px;
}

.popup {
  background-color: #fafafa;
}

.popup .form {
  padding: 0;
  width: 100%;
  border-radius: 8px;
}

.popup .form h2 {
  padding: 16px;
  margin: 0 auto;
  background-color: #eeeeee;
  border-bottom: 1px solid #d5d5d5;
}

.popup .form h3 {
  padding: 16px;
  margin-top: 0;
  border-bottom: 0;
}

.popup .form .content {
  padding: 16px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

a.modalCloseImg {
  background: url(Images/hpm/icon-close.gif) no-repeat;
  width: 7px;
  height: 7px;
  display: inline;
  position: absolute;
  top: 13px;
  right: 13px;
  cursor: pointer;
}

.required-desc {
  float: right;
  margin-top: 11px;
  border-left: 4px solid #3f51b5;
  min-width: 120px;
}

.spacer {
  padding: 2px;
}

#btn-submit {
  float: right;
  margin-right: 16px;
}

.error {
  font-size: 12px;
  color: darkred; /* Updated error text color to dark red */
  margin: -8px 0 5px 0;
}

.date-separator {
  font-size: 12px;
}

.bottom {
  margin-top: 15px;
  overflow: hidden;
}

.form .desc {
  margin-bottom: 16px;
  margin-top: 5px;
}

.popup .form .desc {
  margin-left: 16px;
  margin-right: 16px;
}

.tooltip-text {
  font-size: 12px;
}

.image-cvv {
  cursor: pointer;
  top: -3px;
}

.image-cvv-position {
  position: relative;
}

.image-cvv-des {
  position: absolute;
  top: 28px;
  left: 120px;
  z-index: 20;
  border: 1px solid #e8e8e8;
}

.btn-submit {
  display: inline-block;
  padding: 9px 20px;
  color: white;
  font-weight: bold;
  font-size: 12px;
  border-radius: 3px;
  background-color: #3f51b5;
}

.btn-submit.disabled {
  background-color: #e0e0e0;
  pointer-events: none;
  cursor: default;
}

.MuiPaper-root {
  background-color: #fff;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 24px;
}

.MuiButton-root {
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem;
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.75;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.MuiButton-containedPrimary {
  color: #fff;
  background-color: #3f51b5;
}

.MuiButton-textPrimary {
  color: #3f51b5;
}

.MuiIconButton-root {
  color: rgba(0, 0, 0, 0.54);
  padding: 8px;
  border-radius: 50%;
  transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.MuiTypography-h3 {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.167;
  letter-spacing: 0em;
  margin: 1rem 0;
}

.MuiAlert-root {
  display: flex;
  padding: 6px 16px;
  border-radius: 4px;
  background-color: #e0f7fa;
  color: #006064;
}

.MuiAlert-icon {
  margin-right: 12px;
  padding: 7px 0;
  display: flex;
  font-size: 22px;
  opacity: 0.9;
}

.MuiSvgIcon-root {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.MuiGrid-root {
  margin: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.MuiGrid-item {
  margin: 0;
  box-sizing: border-box;
}

.MuiGrid-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

Click on Generate and Save Page to save the changes.

When you do so, the web page might scroll up, but an alert will appear in the middle of the page.

Click OK and save the new details.


Go live check list

  • Verify the payment page settings and fields before enabling them in production.
  • Ensure the hosted domain and callback path are correctly set to avoid integration issues.
  • Always test in the sandbox environment before moving to production to ensure everything works as expected.

Updated 2 months ago