Overview

Oceanpayment supports three approaches for credit card tokenization (card binding). Merchants can choose the option that best fits their integration needs：

• Hosted Creation
• Embedded Creation
• Merchant-Managed Creation

How It Works

Hosted Creation

1. The merchant’s frontend submits the required parameters to the Hosted Checkout endpoint via a form, with the methods parameter fixed to Credit Card.

<form action="https://test-secure.oceanpayment.com/gateway/service/create" method="post">
  <input  type="hidden"  name="account" value="995149" />
  <input  type="hidden"  name="terminal" value="99514901" />
  <input  type="hidden"  name="signValue" value="e7cb35166f9066d2844c29a11ca43f4dd25a3e0f9d145579363a5a0124a901d1"/>
  <input  type="hidden"  name="backUrl" value="http://127.0.0.1/result.php" />
  <input  type="hidden"  name="customer_id" value="123456" />
  <input  type="hidden"  name="methods" value="Credit Card" />
  <input  type="hidden"  name="order_notes" value="abcd" />
  <input  type="hidden"  name="billing_firstName" value="test" />
  <input  type="hidden"  name="billing_lastName" value="test" />
  <input  type="hidden"  name="billing_email" value="test@test.com" />
  <input  type="hidden"  name="billing_phone" value="0755-123456789" />
  <input  type="hidden"  name="billing_country" value="US" />
  <input  type="hidden"  name="billing_state" value="WA" />
  <input  type="hidden"  name="billing_city" value="Washington D.C." />
  <input  type="hidden"  name="billing_address" value="705A big Road" />
  <input  type="hidden"  name="billing_zip" value="529012" />
  <input  type="hidden"  name="logoUrl" value="N/A" />
  <input  type="hidden"  name="cssUrl" value="N/A" />
  <input  type="hidden"  name="language" value="N/A" />
</form>

2. The customer securely enters their card information on the Oceanpayment-hosted payment page.
3. After the process is completed, the customer is redirected back to the merchant’s website.

Embedded Creation

1. Include the Oceanpayment JS SDK on your page.

//Load Oceanpayment
<script src="https://secure.oceanpayment.com/pages/js/onepage-quickpay.js"></script>

2. Create a <div> container on the page to host the payment UI.

//Load Oceanpayment payment page
<div id="oceanpayment-element"></div>

3. Initialize and render the payment UI component into the container using init():

• Pass true to submit to the sandbox environment.
• Leave empty to submit to the production environment.

<script>
  $(function() {
    //Passing `true` commits to the sandbox environment; passing '' commits to the production environment.
    OnePageQuickPay.init(true,'','');
  });
</script>

4. Submit the payment:

• Call the payment method, ensuring duplicate submissions are prevented.
• Use transformToJson(formData) to convert the required parameters into JSON format.
• Call checkout() to submit the necessary parameters to the Oceanpayment payment gateway.

//Submit parameters
<script>
  function pay() {
    //Get form elements
    var register = $("#payForm");
    //Serialize()
    var formData = register.serializeArray();
    //Submit parameter information to Oceanpayment
    OnePageQuickPay.checkout(transformToJson(formData));
  }
  //JSON data
  function transformToJson(formData){
    var obj={}
    for (var i in formData) {
      obj[formData[i].name]=formData[i]['value'];
    }
    return obj;
  }
</script>

Handling the Response

Hosted Creation

1. The synchronous response depends on the backUrl.

Array
(
    [account] => 995149
    [terminal] => 99514901
    [signValue] => F03C3D5154FC2672C5EC05BAD3DDDF0892617CC1517517DCD37E6499AA896D73
    [customer_id] => customer_id20240507173540
    [order_notes] => 20123456789
    [card_number] => 411111***1111
    [card_type] => Visa
    [card_country] => PL
    [quickpay_id] => 9ead3654-8f84-4d02-acab-6ac9dd10531f
    [quickpay_status] => 1
    [quickpay_details] =>1:Success
)

Embedded Creation

Note

Oceanpayment sends the payment result to your backUrl page. The backUrl must exactly match the current page URL, including the full path, to allow the CallBack() method to receive the payment response.

var oceanpaymentCallBack = function(data){}

1. When card information verification fails, the data.msg field returns an error message, for example:

//Incorrect card number
{"code":-1, "msg":"Your credit card number is incorrect."}

2. When data.msg is empty, it indicates that the card information verification has passed. Receive the card binding response:

var oceanpaymentCallBack = function(data){	
    if(data.msg){
       //Card information error processing
       console.log(data.msg);
    }else{
       //Processing order return
       //Receive the backUrl response and parse the returned XML.
       console.log(data);
    }	
}

3. Response Example:

<?xml version="1.0" encoding="UTF-8"?>
<response>
  <account>995149</account>
  <terminal>99514901</terminal>
  <signValue>d47e242d1a097fbb99a1f097fc94c30c67e8c480410b546b5244a79974b6a9ca</signValue>
  <customer_id>JSCSE-8879248308</customer_id>
  <order_notes>test</order_notes>
  <card_number>411111***1111</card_number>
  <card_type>VISA</card_type>
  <card_country>PL</card_country>
  <quickpay_id>06a0858b-d4db-425c-9f81-c75ff28d9bc8</quickpay_id>
  <quickpay_status>1</quickpay_status>
  <quickpay_details>1:Success</quickpay_details>
</response>

• Check the result to obtain the created QuickPay ID.
• The merchant should save the returned card information quickpay_id (in UUID format) for initiating future QuickPay or Recurring payments.

Signature

The signature (signValue) format differs depending on the Hosted Checkout redirect mode you choose. Refer the Signature and Verification section for detailed instructions.