COPYandPAY – makes payment super easy
Integration guide COPYandPAY
Set up your fully integrated payment page, in your own design.
COPYandPAY -
Preparation
Unzip „COPYandPAY - a sales storyboard.zip” with a double click on the zip folder. Unpack it, otherwise it will not work -> right click on zip folder -> Extract files
Open the COPYandPAY interactive tutorial:
We prepare you with a white label URL, please ask for one via support / your account manager
Please note the followings:
Be careful, if you do a payment once during the next steps you always need a new token. Don’t forget it! It’s easy to generate one with the tutorial, but don’t forget it.
Extract all files in the same folder otherwise it won’t work.
Always save your changes within the index.html – otherwise changes won’t be seen in your page
The three step model – definition
COPYandPAY is a three-step payment model performing asynchronous workflows such as 3D Secure, PayPal, sofortüberweisung.
To integrate COPYandPAY into your page you need to generate a token for building the payment page. The first and the third calls are secure server-to-server calls (merchant server/psp server). The second step is building the payment form by using the javascript library, and that can be done for testing purpose without setting up a server. It works by using the tutorial( The tutorial is an interactive one, which means that it won’t simulate payment it just does real payment.
The first step shows three different programming languages. Just copy and paste what you need; it will work. Remember: it is a server-to-server call due to the secure data. For testing and starting the integration no server is needed. You need to generate a valid token within the tutorial and use it later in step 2.
Let’s start with step 1:
Generate a valid token by clicking on the “try it out”- link within the tutorial:
Now you prepared a token for the payment by sending one request with credentials and fixed data, such as an amount in a server-to-server call.
The preparation call is simply done with a POST request from your server to the payment server. The JSON response contains a token which you need in the second step for initialising the JavaScript library in order to build the payment form with your desired brands.
Go to step 2:
In step 2 you only need two lines of code to integrate the payment form with different payment methods on the merchant’s page. By copying the two lines of codes a JavaScript library is loaded and parses the page in order to find the copied form and the chosen payment methods (Visa, Master, PayPal, Amex and Sofortüberweisung in that case). It will build the form directly to be placed in html where the form is found. There is no iFrame, it’s just integrated in the merchant’s page by using its already defined style and behavior.
Go to the “Storyboard folder” and open the index.html in a web browser. You will see the brandsforfriends checkout page (without any possibility for payment). Do a short demonstration to show how easy it is to integrate COPYandPAY. You will only need two minutes for offering several payment methods.
Open the index.html with notepad or dreamweaver (right click on index.html -> open with -> “choose notepad or dreamweaver”).
Copy the script tag from the tutorial
and paste it into line 5 in index.html
Save the changes in the index.html
Then copy go back to the tutorial and copy the form tag
and paste it into line 96 in index.html
Save the changes in the index.html
The tutorial explains the tag “url for redirecting the shopper after the payment”:
Remember: you generated already a valid token in Step 1. Switch back to the tutorial and copy the token and the redirect url (just copy,
and paste it into line 96.
Reload the brandsforfriends page and you will see a payment form:
Editing the payment widgets to your CI:
Here you can see how easy it is to redesign the widgets and adapt it to your corporate identity.
Change the language:
You can easily change the language. Switch back to your index.html which is already open in notepad or dreamweaver. Scroll to line 5 and change the language parameter from “de” to “en”.
Change payment methods:
Switch back to the browser and reload your page. The text is now in English. Now, show how easy it is to offer different payment methods. Remove PAYPAL and SOFORTUEBERWEISUNG from index.html (line 96) and reload the page again. There is now no longer any PAYPAL and SOFORTUEBERWEISUNG button.
You can play around with the settings and try all of the available payment methods which are documented in the tutorial. If you miss something, the integration of new payment methods in the library can easily be done. Just ask your Account Manager.
Switch back to the browser and click pay, without anything filled you will get an error message.
We have a basic JavaScript validation of the data. You can enter a valid data: Select Visa, enter 4200 0000 0000 0000, your name, a valid date and 123 for CVV. Execute a payment. You will be redirected to the redirect url you’ve entered before; it’s probably Your payment is done.
Now, you can easily get the result of the payment in a simple call either server-side or from the browser, using the token obtained earlier. The integration was successful. You can now let your shoppers pay. In order to get the status of the transaction just call the following https://yuupay.test.ctpe.net/frontend/GetStatus;jsessionid={token}
Change the style:
If you want to change the card, just open brandsforfriends index.html: use the plain style and apply your own corporate identity. You change that by editing line 5 in the index.html
Reload the index.html in the browser, and you will see the plain layout instead of the card layout.
Customize of the form:
Now you can customizethe plain layout by changing the color and the size of the input fields and the select boxes. Switch back to the index.html and scroll to line 8. Add a style for select and input fields there.
Reload the index.html in the browser and the form appears as follows:
Any change can be made within the merchant’s checkout page: adapting colors, changing fonts, regrouping fields, adapting button layout. Change and adapt everything as you like, it is in your page.Set up your fully integrated payment page, in your own design.
COPYandPAY -