Merge pull request #4302 from 3scale/fix-invoice-payment-page

THREESCALE-14843: Fix invoice payment page

Author: mayorova

.circleci/config.yml

@@ -148,7 +148,7 @@ dnsmasq-container: &dnsmasq-container
       --log-facility=- \
       --log-queries \
       --no-poll \
-      --server=/circleci.com/dns.podman/circleci-tasks-prod.s3.us-east-1.amazonaws.com/circleci-binary-releases.s3.amazonaws.com/$DEFAULT_DNS \
+      --server=/circleci.com/dns.podman/circleci-tasks-prod.s3.us-east-1.amazonaws.com/circleci-binary-releases.s3.amazonaws.com/api.stripe.com/js.stripe.com/$DEFAULT_DNS \
       --address=/#/127.0.0.1
 
 only-master-filter: &only-master-filter

app/javascript/packs/invoice_payment.ts

@@ -27,7 +27,7 @@ const style = {
 // eslint-disable-next-line @typescript-eslint/no-misused-promises
 document.addEventListener('DOMContentLoaded', async () => {
   const dataset = document.querySelector<HTMLElement>('.stripe-form')!.dataset
-  const { stripePublishableKey = '', clientSecret = '' } = dataset
+  const { publishableKey = '', clientSecret = '' } = dataset
   const form = document.querySelector('#payment-form')!
   const callbackForm = document.querySelector<HTMLFormElement>('#payment-callback-form')!
   const payButton = document.querySelector<HTMLButtonElement>('#submit-payment')!
@@ -36,7 +36,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   const spinner = document.querySelector('#spinner')!
   const buttonText = document.querySelector('#button-text')!
 
-  const stripe = await loadStripe(stripePublishableKey)!
+  const stripe = await loadStripe(publishableKey)
   const elements = stripe!.elements()
   const card = elements.create('card', { style })
 

features/developer_portal/admin/account/payment_details.feature

@@ -89,6 +89,19 @@ Feature: Dev Portal Buyer Payment Details
       When the buyer is reviewing their account settings
       Then the buyer can't add an incomplete billing address for stripe
 
+    @javascript
+    Scenario: Buyer pays a failed invoice
+      Given the provider has Stripe configured as payment gateway
+      And the buyer has an invoice for May, 2026 with the following items:
+       | Name      | Description     | Quantity | Cost |
+       | Something | Nice things     | 1        | 10   |
+      And the invoice has a pending payment intent
+      And they go to the invoice dev portal page
+      And Stripe API is stubbed
+      And they follow "Pay invoice"
+      Then the current page is the invoice payment page on dev portal
+      And the Stripe form is visible and configured
+
   Rule: Braintree
 
     Background:

features/step_definitions/finance/invoicing_steps.rb

@@ -92,6 +92,13 @@
   invoice.fail
 end
 
+Given("the invoice has a pending payment intent") do
+  invoice = @invoice.presence || Invoice.last
+  invoice.finalize
+  invoice.issue
+  FactoryBot.create(:payment_intent, invoice: invoice, reference: 'pi_test', state: 'requires_payment_method')
+end
+
 Then(/^I should (?:see|still see) (\d+) invoices?$/) do |count|
   if count.to_i == 0
     should have_no_xpath("//tr[contains(@id, 'invoice_')]")
@@ -232,3 +239,18 @@ def assert_line_items(items)
 Then "the total cost is/should( be) {string}" do |cost_with_currency|
   assert_equal cost_with_currency, find('table.invoice tfoot tr td#invoice_cost').text
 end
+
+Given "Stripe API is stubbed" do
+  stub_request(:get, %r{https://api\.stripe\.com/v1/payment_intents/pi_test})
+    .to_return(status: 200, body: '{"id": "pi_test", "client_secret": "pi_test_secret", "object": "payment_intent"}', headers: { 'Content-Type' => 'application/json' })
+end
+
+Then "the Stripe form is visible and configured" do
+  stripe_form = page.find('.stripe-form')
+
+  assert_not_empty stripe_form['data-publishable-key']
+  assert_not_empty stripe_form['data-client-secret']
+  within(stripe_form) do
+    assert_selector('#card-element iframe')
+  end
+end

features/step_definitions/finance/settings_steps.rb

@@ -4,6 +4,11 @@
   provider.update!(payment_gateway_type: nil, payment_gateway_options: nil)
 end
 
+Given "{provider} has Stripe configured as payment gateway" do |provider|
+  provider.update(payment_gateway_type: :stripe, payment_gateway_options: { login: 'sk_test', publishable_key: 'pk_test', endpoint_secret: 'some-secret' })
+  assert_instance_of ActiveMerchant::Billing::StripeGateway, provider.payment_gateway
+end
+
 But "the provider's payment gateway is unconfigured" do
   @provider.update!(payment_gateway_options: nil)
 end

features/support/capybara.rb

@@ -38,7 +38,7 @@
   options.add_argument('--no-sandbox')
   options.add_argument('--no-zygote') # zygote proc used by sandboxing
   options.add_argument('--disable-popup-blocking')
-  options.add_argument('--host-resolver-rules=MAP * ~NOTFOUND , EXCLUDE *localhost*')
+  options.add_argument('--host-resolver-rules=MAP * ~NOTFOUND , EXCLUDE *localhost*,EXCLUDE api.stripe.com,EXCLUDE js.stripe.com')
   options.add_argument('--process-per-site')
   options.add_argument('--disable-gpu') # TODO: gpu-process still started
   options.add_argument('--disable-gpu-early-init')

features/support/paths.rb

@@ -683,10 +683,14 @@ def path_to(page_name, *args) # rubocop:disable Metrics/AbcSize, Metrics/Cycloma
     when 'the dev portal invoices page'
       admin_account_invoices_path
 
-    when /^the invoice "(.*)" dev portal page$/
-      invoice = Invoice.find_by!(friendly_id: $1)
+    when /^the invoice(?: "(.*)")? dev portal page$/
+      invoice = $1.present? ? Invoice.find_by!(friendly_id: $1) : @invoice
       admin_account_invoice_path(invoice)
 
+    when /^the invoice(?: "(.*)")? payment page on dev portal$/
+      invoice = $1.present? ? Invoice.find_by!(friendly_id: $1) : @invoice
+      payment_admin_account_invoice_path(invoice)
+
     when 'the provider site page'
       admin_site_settings_path