Zephr User Guide

Payment Details

4 views 0

Enter the name for this step in the Title text box. By default, this is pre-filled with Payment Details. You can edit this if required.

The available fields for the payment details are as follows:

  • Progress Bar

    This allows you to show or hide the progress bar. By default, the progress bar is shown.

    To hide the progress bar, complete the following steps:

    1. Select the three dots at the end of the row
    2. Select Edit

      The Progress Bar dialog box displays, as illustrated below:

      Progress Bar

    3. Deselect the Show Progress Bar checkbox
    4. Select the Save button to save your changes and return to the Registration screen. Selecting the Cancel button displays the Registration screen without saving any changes

    Note: The headings used on the Progress Bar match the Title text entered in your sections.

  • Purchase Summary

    This defines the summary text displayed at each step of your form.

    To edit the text displayed, complete the following steps:

    1. Select the three dots at the end of the row
    2. Select Edit

      The Purchase Summary dialog box displays, as illustrated below:

      Purchase Summary

    3. Enter the title text you want to display in the Subscription Title Text text box
    4. Enter the text you want to display in the total cost section in the Total Cost Text text box
    5. Select the Save button to save your changes and return to the Payment screen. Selecting the Cancel button displays the Payment screen without saving any changes
  • Card Details

    You cannot update this section.

    It displays the fields that allow your end user to enter the card information for the account from which to take payment.

  • Divider

    This defines the divider used in your form.

    To define the divider, complete the following steps:

    1. Select the three dots at the end of the row
    2. Select Edit

      The Divider dialog box displays, as illustrated below:

      Divider

      At the top of the Divider dialog box, you can see a representation of the divider as it appears in your form.

    3. Update the text in the Divider Text text box
    4. By default, the Divider line checkbox is selected. This displays a line either side of your defined text. To remove the lines, deselect the Divider line checkbox
    5. Select whether to display or hide the divider from the Visibility radio buttons. The options are as follows:
      • Show
      • Hide
    6. Select the Save button to save your changes and return to the Email Address screen. Selecting the Cancel button displays the Email Address screen without saving any changes
  • Apply Pay and Google Pay

    This enables or disables payment using Apple Pay and Google Pay.

    By default, payments using Apple Pay and Google Pay are disabled. To enable payments using Apple Pay and Google Pay, select the toggle.

    Note: Only one option is displayed to the end user, based on their device and browser. For example, if an end user visits your site using the Chrome browser, the Google Pay option displays; if they visit from an iPhone, the Apple Pay option displays.

    If using Stripe as your payment provider, refer to the following Stripe documentation for further information on going live:

    If using Braintree as your payment provider, refer to the following Braintree documentation for further information on going live:

  • Button (Continue)

    This displays the Confirm and process payment button, which your end user can use to make the purchase.

    To define the text used on the button, complete the following steps:

    1. Select the three dots at the end of the row
    2. Select Edit

      The Button dialog box displays, as illustrated below:

      Button

      At the top of the Button dialog box, you can see a representation of the button as it appears in your form.

    3. Update the text in the Button Text text box
    4. Select the Save button to save your changes and return to the Email Address screen. Selecting the Cancel button displays the Email Address screen without saving any changes
  • Add Custom Text

    If you want to add custom text to your form, select the Add Custom Text button

    The Text dialog box displays, as illustrated below:

    Text

    To define the custom text, complete the following steps:

    1. Enter the text you want to display in the text box

      Note: If you want to format the text, for example to include a heading or a list, use the formatting bar at the top of the text box.

    2. Select the Save button to save your changes and return to the Email Address screen. Selecting the Cancel button displays the Email Address screen without saving any changes
  • Add User Attribute

    If you want to add a field to obtain further information from the end user, select the Add A User Attribute button

    Note: You must have defined user attributes for any fields that you want to add. For further information on user attributes, see the User Attributes topic.

    The User Attribute dialog box displays, as illustrated below:

    User Attribute

    To add a single field, select the Add button at the end of the row for the user attribute you want to add. The Registration screen displays with the field added in the step.

    To add multiple fields, select the checkbox beside the user attributes you want to add, then select the Add Selected button. The Registration screen displays with each user attribute added as a field in the step.

    If you want to make a user attribute field mandatory in your registration form, select the Required toggle at the end of the row for the relevant user attribute.

    To edit the display of a user attribute field in your create password form, complete the following steps:

    1. Select the three dots at the end of the row for the relevant field
    2. Select Edit

      The Edit dialog box displays, as illustrated below:

      Edit Attribute

    3. Edit the label displayed above the field in the Label text box. By default, this is pre-filled with the name of the user attribute
    4. If required, edit the text displayed in the field in the Place Holder (Optional) text box. By default, this is blank
    5. If required, edit the default value of the field in the Default Value (Optional) text box
    6. Select the Save button to save your changes and return to the Registration screen. Selecting the Cancel button displays the Registration screen without saving any changes

    For information on editing the user attribute, see the User Attributes topic.

    To delete a user attribute field, select the three dots at the end of the row for the relevant field, then select Delete.

  • Add a Section

    If required, select the Add A Section button to add a step to your registration form

    By default, the new section contains the following fields:

    • Title

      By default, the Title text box is pre-filled with New Section x. This is displayed on the progress bar. You can edit the text if required.

    • Progress Bar

      This allows you to show or hide the progress bar. By default, the progress bar is shown.

      To hide the progress bar, complete the following steps:

      1. Select the three dots at the end of the row
      2. Select Edit

        The Progress Bar dialog box displays, as illustrated below:

        Progress Bar

      3. Deselect the Show Progress Bar checkbox
      4. Select the Save button to save your changes and return to the Registration screen. Selecting the Cancel button displays the Registration screen without saving any changes

      Note: The headings used on the Progress Bar match the Title text entered in your sections.

    • Card Details

      You cannot update this section.

      It displays the fields that allow your end user to enter the card information for the account from which to take payment.

    • Button (Submit)

      This defines the Submit button

      To define the text used on the button, complete the following steps:

      1. Select the three dots at the end of the row
      2. Select Edit

        The Button (Submit) dialog box displays, as illustrated below:

        Button

        At the top of the Button (Submit) dialog box, you can see a representation of the button as it appears in your form.

      3. Update the text in the Button Text text box
      4. Select the Save button to save your changes and return to the Login screen. Selecting the Cancel button displays the Login screen without saving any changes

      Note: The button for the previous section is automatically updated to Button (Continue) and the pre-filled text reverts to Continue. If necessary, edit the button text for this button accordingly.

      You can also do the following:

      • Select the Add A User Attribute button to add user attribute fields to this step as described above
      • Select the Add Custom Text button to add a custom text field to this step as described above

      You can add as many steps as you require.

    When you publish your feature, the payment details display in your site in a similar way to the following:

    Payment As Displayed in Your Site