Enabling punch-out payment in a pop-up window to the third-party payment service provider with SimplePunchout plug-in

You can enable support for punch-out payments in starter stores with the SimplePunchout plug-in and a punch-out payment service simulator. During check-out, customers complete their payment in a third-party payment service provider in a pop-up window. When the payment is complete, the pop-up window is closed and the customer returns to the storefront to complete the checkout process.

Note: To connect to other punch-out payment service providers, you must create your own punch-out plug-in.

Before you begin

Before you can enable a punch-out payment in a pop-up window, make sure that you complete the following prerequisites:
  • Installed WebSphere Commerce Version 8
  • Published a starter store

Procedure

  1. Enable the punch-out payment change flow option in your starter store.
    1. Log on the Management Center.
    2. Select Store Management from the main menu.
    3. Select Stores from the left navigation frame.
    4. Select the store that you want to configure.
    5. In the Checkout page, select the Punch-out payment check-box.
  2. Set up the simulator.
    1. Deploy the psp.war file to your web container. For more information about deploying a WAR module, see Deploying a WAR module.
    2. Check the firewall configuration to ensure that port 8080 is opened.
  3. Modify the plug-in deployment descriptor file.
    1. Open the WC_instancename.ear/xml/config/payments/ppc/plugins/SimplePunchoutPlugin/PluginDeployment.xml file.
    2. Find the PluginProperty entries with name authenticationBaseURL, callback_url. Change domains if needed.
      Property Description
      authenticationBaseURL This URL is for the shopper to browse to SimplePunchout (simulator). Ensure that shoppers can establish a connection to this domain.
      callback_url This URL is for SimplePunchout (simulator) to call back to WebSphere Commerce. Ensure that the SimplePunchout (simulator) can establish connection to this domain.
      Configure the following values:
      <PluginProperty name="authenticationBaseURL" value="http://IPAddressOfSimulagtor:8080/psp/gateway" /> 
      <PluginProperty name="callback_url" value="http://hostNameOfCommerceServer/webapp/wcs/stores/servlet/PunchoutPaymentCallBack" />
    If you are using remote store and simulator, use the following configuration:
    <PluginProperty name="callback_url" value="http://hostNameOfCommerceServer/wcs/resources/store/{storeId}/cart/@self/payment_instruction/callback" />
    Add the following configuration into WC_instance.ear/Rest.war/WEB-INF/config/com.ibm.commerce.rest/wc-rest-security.xml:
    <sslConfig resource="store/{storeId}/cart/@self/payment_instruction/callback" enabled="false"/>
  4. Confirm that the SimplePunchout payment method can be displayed.
    1. Check the policy table by running the following SQL statement:
      SELECT * FROM POLICY WHERE POLICYNAME='SimplePunchou' and STOREENT_ID=store_id;
    2. If the record of the policy table does not exist, set up the payment method for the specific store and ensure that the parameter display is set to true.
      1. Insert the payment policy for PayInStore into the POLICY table:
        insert into policy ( policy_id, policyname, policytype_id, storeent_id, properties ) 
        values (#####, 'SimplePunchout', 'Payment', store_id, 'attrPageName=StandardPayLater&paymentConfigurationId=default&display=true&compatibleMode=false'); 
        
      2. Insert the translated descriptions for the payment policy into the POLICYDESC table. You can insert only English description.
        insert into policydesc ( policy_id, language_id, description, longdescription ) 
        values ( #####, -1, 'Simple Punchout', 'Simple Punchout'); 
        
      3. To use the payment plug-in controller, set up the business policy commands for the new policy.
        insert into policycmd ( policy_id, businesscmdclass ) values 
        ( #####, 'com.ibm.commerce.payment.actions.commands.DoPaymentActionsPolicyCmdImpl'),
        ( #####, 'com.ibm.commerce.payment.actions.commands.EditPaymentInstructionPolicyCmdImpl'),
        ( #####, 'com.ibm.commerce.payment.actions.commands.QueryPaymentsInfoPolicyCmdImpl' );  
        
      4. Restart your WebSphere Commerce instance to pick up the new configurations.
    3. If the record exists and the parameter display is set to false, update the parameter display value to true. Restart your WebSphere Commerce instance to pick up all the new configurations.
      update policy set properties = 'attrPageName=StandardPayLater&paymentConfigurationId=default&display=
      true&compatibleMode=false' where policy_id = #####;
  5. Specify the merchant configuration properties.
    1. Open WebSphere Commerce Accelerator. Log on as a user with Site Administrator authority.
    2. In the Store name list, select the store to enable punch-out payment and click OK.
      For example, Aurora.
    3. In the browser window opened in step 5.a, enter the following URL: https://hostname:8002/webapp/wcs/admin/servlet/PPCMerchantEdit?actionName=create&merchantName=myMerchant
      This URL creates a merchant that is named myMerchant. The browser window returns a blank page.
    4. Run the following SQL statement to confirm that the row is inserted to the database:
      SELECT * FROM MERCHANT WHERE NAME='myMerchant';
      Note the value of MERCHANT_ID.
    5. Using the browser window opened in step 5.a, enter the following URL and replace MERCHANT_ID.
      https://hostname:8002/webapp/wcs/admin/servlet/PPCStoreMerchantAssociate?actionName=create&merchantId=MERCHANT_ID This URL creates an association with the starter store. The browser window returns a blank page.
    6. Run the following SQL statement to confirm that the row is inserted to the database:
      SELECT * FROM STOREMERCH WHERE MERCHANT_ID=MERCHANT_ID;
    7. Using the browser window opened in step 5.a, enter the following URL replacing MERCHANT_ID.
      https://hostname:8002/webapp/wcs/admin/servlet/PPCMerchantConfigurationEdit?actionName=create&merchantId=MERCHANT_ID&paymentConfigurationGroup=default&paymentSystemName=SimplePunchout
      This URL creates a merchant configuration. The browser window returns a blank page.
    8. Run the following SQL statement to confirm that the row is inserted to the database:
      SELECT * FROM MERCHCONF WHERE MERCHANT_ID=MERCHANT_ID;
      Note the value of MERCHCONF_ID.
    9. Using the browser window opened in step 5.a, enter the following URLs replacing MERCHCONF_ID:
      https://hostname:8002/webapp/wcs/admin/servlet/PPCMerchantConfigurationInfoEdit?actionName=create&merchantConfId=MERCHCONF_ID&propertyName_1=merchant&propertyValue_1=2088101897450674
      This URL creates a merchant configuration entry. The browser window returns a blank page.
    10. Run the following SQL statement to confirm that the row is inserted to the database:
      SELECT * FROM MERCHCONFINFO WHERE MERCHCONF_ID=MERCHCONF_ID;

What to do next

To confirm that the simulator is running correctly, start the simulator and WebSphere Commerce server, and place an order with the punch-out payment method. You must be redirected to the simulator's page in a pop-up window to process the payment, and then redirected back to WebSphere Commerce at the order confirmation page window.