Name: Testing and Troubleshooting the Checkout Page in Payment Integration with the Open Payment Framework
Uploaded: 2025-6-8
Duration: 326 s
Description: This video demonstrates how to test and troubleshoot a checkout page to verify the payment integration configuration with the Open Payment Framework.

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div>This video demonstrates how to test and troubleshoot a checkout page to verify the payment integration configuration with the Open Payment Framework.</div>

Testing and Troubleshooting the Checkout Page in Payment Integration with the Open Payment Framework

Hello and welcome.  In this video, I will demonstrate how to test and troubleshoot a checkout page to verify the payment integration configuration with the Open Payment Framework.  After setting up the basic configuration and authorization for the payment integration, we are ready to perform testing.  Let's start by opening the current integration page.  Although testing can be performed at any time, it's important to follow specific steps for accurate results.  First, ensure that your payment configuration is assigned to the correct site.  For this demo, I'm using the Sample Electronics US site and will save my changes.  Next, navigate to the Settings page.  Under Allowed Domains, verify that the API access for your payment provider, Stripe, in this case, has been added to the Allowed Domains list. Please note, in a development  environment, developers often have access to modify allowed domains, whereas in staging or production, such changes are typically restricted to administrators.  On the Payment Integrations page, confirm that the Stripe integration is assigned to the Electronics U.S. site.  Now, return to the Storefronts Checkout page.  After clicking Continue, you should see the Stripe Payment option under the Payment Methods.  However, if a connection error appears, troubleshooting is needed.  Switch to the OPF workbench and open the Request Log tab for payment integrations.  Here, you can observe all API calls made by SAP Commerce Cloud to OPF and OPF to the payment providers.  By inspecting a failed call, which returned a 400 error, you can review the request and response bodies.  In this case the error indicates that the return URL can only be used with UI mode embedded.  Reviewing the creating a session page in stripes API documentation I realized I had misunderstood the configuration.  Instead of a return URL I need to define a cancel URL since we're using a full page redirect flow. Additionally i'll need to reconfigure API parameters for the checkout session, such as line items, and supply product and price data dynamically.  There are more parameters for advanced use cases, but for this demo, I'm creating a minimal working example.  Returning to the OPF, I will navigate to the authorization configuration page via the quick link included in the log entry here.  I navigate to the session initialization request.  I change the return URL parameter to cancel URL as discussed and update the corresponding mapping.  Coming back to the checkout page and clicking retry to continue,  I encounter another failure, likely due to unmapped line items.  Let's review the request logs again.  Here, it's evident that the cancel URL is being sent,  but the payment provider is requesting the missing line items.  Next, I go back to the authorization configuration and request mapping.  I prepare the necessary parameters, including quantity, price data with currency, product info, and so on. I generate the appropriate fields to configure the mappings.  OPF supports mapping all individual line items by using array mapping,  which treats each line item as an array element.  For simplicity, I'll map a single line item for the entire order.  I assign a simple product name,  set quantity to 1, and specify the amount based on the existing field, amount and exponent.  Additionally, I need to map the currency of the line item, which is required by the payment provider API.  After saving these changes, it's time for another test.  Back on the checkout page, I click retry to continue.  This time, a Place Order button appears.  Clicking it redirects to the hosted payment page, with order details successfully passed, indicating that the issue has been resolved.  To confirm, I review the request logs again.  API calls now return success responses, HTTP 200, showing that OPF correctly called the payment provider and received the checkout link for redirection.  This can then redirect to the hosted payment page displayed when testing with the storefront.  Finally, switching to the transaction page, I can see that a new transaction has been created.  Multiple attempts may distribute multiple transaction entries, but the presence of a checkout transaction with the status waiting confirms successful processing.  That concludes our demonstration on testing and troubleshooting the checkout page for payment integration with the Open Payment Framework.