New Zuora component for validation through API

Angelo Gulinarequested to merge
ag/zuora_with_token_new_zuora_component into master

What does this MR do and why?

Describe in detail what your merge request does and why.

This MR introduces a new component to validate payment methods via the new API previously introduced – related to gitlab-org/gitlab#357156. It is part of a group of MR.

Description MR
Introduce FF to validate payment method via API !84292 (merged)
Introduce new API method !84296 (merged)
Introduce new Zuora component for validation through API 👈 you are here

Note: this feature is released behind a feature flag (!84292 (merged))

Screenshots and video
Form loading loading
Failing to load the form Screenshot_2022-04-06_at_17.21.32
CC invalid. Inline client-side validation Screenshot_2022-04-06_at_10.22.13
CC invalid. Server-side validation Screen_Recording_2022-04-06_at_17.15.37
CC valid. Validation fails from CustomersDot Screen_Recording_2022-04-06_at_17.23.21
CC valid. Success Screen_Recording_2022-04-06_at_17.24.30

How to test/reproduce

This requires both gdk and CustomersDot running.

  • Setup the HPM in Zuora Api Sandbox, you have two ways:
    1. create an HPM similar to this: https://apisandbox.zuora.com/apps/HostedPageLite.do?method=preview&id=8ad099157fd495bf017fdadbab7e6959 – for URL/host, use your gdk host
    2. just use mine 😇 (but please, do not change the configuration) – it assumes you run gdk on http://localhost:3000
  • copy the id of the page (mine is 8ad099157fd495bf017fdadbab7e6959)
  • go to secrets.yml in CustomersDot and use it for zuora_payment_method_validation_page_id in development settings (if not there, add it manually)
  • (restart CustomersDot)
  • in your terminal, export GITLAB_SIMULATE_SAAS=true (if gdk is already running, do a gdk restart)
  • go to the gdk rails console and type Feature.enable(:ci_require_credit_card_on_free_plan)

How to see the iFrame

  • Create a new User on your gdk. You can add it by visiting /admin/users/ and logging in with your root. The user should not be ad admin
  • Log in with the new user
  • Create a group and a project
  • In the repository of the project, create a .gitlab-ci.yml file (you can select whatever template)
  • Visit /-/pipelines/new under your project
  • Click on Run pipeline
  • An alert should appear (see screenshot), click on Validate account
  • To use the new form, go to the gdk rails console and type Feature.enable(:use_api_for_payment_validation)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Angelo Gulina

Merge request reports