Display an order summary page with CopyandPay

Follow

Use case

  • Per business or legal requirements, the following flow is required: shopping cart (1) -> Address data (2) -> payment form (3) -> Order overview (confirm transaction to be executed) (4) -> Execute Payment (5).
  • This means the following changes as far as COPYandPAY is concerned: In page (3) the shopper fills the COPYandPAY payment form, but doesn't execute the payment. The actual execution is in step (5)

Solution

  • Don't post the payment form, when the user is active on (3), with an ExecutePayment call, but call GenerateToken instead (with the same form data). When the payment is to be executed (5), post an empty form to ExecutePayment. This is facilitated by passing a special parameter to COPYandPAY.

Walkthrough of the Steps

Start with step 1:

  • Within cnp_Options set useSummaryPage to true (see COPYandPAY Options & Api for utilizing this functionality). This changes the payment button's name and modifies the action attribute of the form from pointing to ExecutePayment to GenerateToken.
  • All payment information is held on the payment server, however the payment is not immediately executed.
  • Optionally the onGenerateToken function can be utilized. This is the callback inclusive of the result of the GenerateToken callback. The JSON payment response will be returned with the token (per step 3 in the Integration Guide and Code Samples).

Example:

Modifying the payment form Collapse source
<script src="https://code.jquery.com/jquery.js" ></script>
<script type="text/javascript">
    var cnp_Options = {
        useSummaryPage: true,
        onGenerateToken: function(data){
            // data is the JSON response: { "transaction": { "token": "token"}  }
            console.log(data.transaction.token);
        }
    }
</script>

Go to step 2:

  • On the last page (5) the merchant needs to make note of the "PAY"-Button. It is at this point that the merchant will POST an empty form, who's action points to the original address of the payment form. ex: this form now does the call to ExecutePayment.
  • The response to this call will redirect the shopper to the merchant's result page. It is here that GetStatus is called just per the usual COPYandPAY payment workflow.

 

Have more questions? Submit a request

Comments

Powered by Zendesk