Overview

With Oceanpayment's JS SDK, you can embed the payment form directly into your checkout page. Customers can complete payments without leaving your site, ensuring a seamless brand experience.

Embedded Payments

Embedded payments allow your customers to pay directly on your website, without redirection to a third-party page. This reduces checkout friction and increases conversion rates.

📈

Higher Conversion

Reduce user drop-off caused by page redirects; increase payment success rates by up to 30%.

🎨

Brand Consistency

Fully customizable payment form that matches your site design.

🚀

Smooth Experience

Seamless, app-like payment flow.

Start Integration

OP

Our Most Popular Payment Solution

Before You Start

Note

Embedded payments currently support Credit Card, GooglePay, and ApplePay only.

Flowchart

How It Works

Credit Card

1. Load the Oceanpayment JS SDK on your checkout page:

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

<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>

2. Add a container element for the payment UI:

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

3. Initialize the payment UI in the container:

• Pass true for sandbox environment
• leave empty for production

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

4. Submit payment:

• Call the payment method, ensure duplicate submissions are prevented when initiating payment.
• Required form parameters must be converted to JSON using transformToJson() before calling checkout().
• Then call checkout() to submit the required parameters to the Oceanpayment payment gateway.

//Submit parameters
<script>
  //Payment
  function pay() {
    //Get form elements
    var register = $("#payForm");
    //Serialize()
    var formData = register.serializeArray();
    //Submit parameter information to Oceanpayment
    Oceanpayment.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>

GooglePay

1. Load the Oceanpayment JS SDK on your checkout page:

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

<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>

2. Add a container element for the payment UI:

//Load GooglePay payment button
<div id="oceanpayment-googlepayelement"></div>

3. Initialize the payment UI in the container:

//Initialize Oceanpayment
<script>
   $(function() {
        //Passing `true` commits to the sandbox environment; passing '' commits to the production environment.
        onePageGooglePay.init(true, {
            cssUrl: '', /* Pass in the address of the online CSS style file to control the button size */
            transactionInfo: {
                //Enter the order amount, currency, and country.
                orderCurrency:ORDER_CURRENCY,/*Billing Currency*/
                orderAmount:ORDER_AMOUNT,/*Billing Amount*/
                billCountry:BILLING_COUNTRY,/*Billing Country*/
            },
            buttonStyle: {
                buttonColor:'',/*Button color*/
                buttonType:'',/*Button type*/
                buttonRadius:'',/*Rounded corners*/
                buttonSizeMode:'',/*Size*/
                buttonLocale:''/*Button language*/
            }
        });
  });
</script>

4. Submit payment:

• Call the payment method, ensure duplicate submissions are prevented when initiating payment.
• Required form parameters must be converted to JSON using transformToJson() before calling checkout().
• Then call checkout() to submit the required parameters to the Oceanpayment payment gateway.

//Submit parameters
<script>
//Payment
  function opGooglepay() {
    //Get form elements
    var register = $("#payForm");
    //Serialize()
    var formData = register.serializeArray();
    //Submit parameter information to Oceanpayment
    onePageGooglePay.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>

ApplePay

Before starting

When using ApplePay's embedded integration, merchants must first add an Oceanpayment hosting domain verification file for each of their domains verification.

1. Load the Oceanpayment JS SDK on your checkout page:

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

<script src="https://secure.oceanpayment.com/pub/js/jquery/jq.js"></script>

2. Add a container element for the payment UI:

//Load ApplePay payment button
<div id="oceanpayment-applepayelement"></div>

3. Initialize the payment UI in the container:

//Initialize Oceanpayment
<script>
   $(function() {
        //Passing `true` commits to the sandbox environment; passing '' commits to the production environment.
        onePageApplePay.init(true, {
            terminal: '', /* Oceanpayment’s terminal*/
            cssUrl: '',/* Pass in the address of the online CSS style file to control the button size */
            transactionInfo: {
                //Enter the order amount, currency, and country.
                orderCurrency:ORDER_CURRENCY,/*Billing Currency*/
                orderAmount:ORDER_AMOUNT,/*Billing Amount*/
                billCountry:BILLING_COUNTRY,/*Billing Country*/
                orderNumber:ORDER_NUMBER,/*Order Number*/
                billAddress:BILLING_ADDRESS /*Billing Address*/
            },
            buttonStyle: {
                buttonstyle:'', /*Button color*/
                type:'' /*Button type*/
            }
        });
  });
</script>

4. Submit payment:

• Call the payment method, ensure duplicate submissions are prevented when initiating payment.
• Required form parameters must be converted to JSON using transformToJson() before calling checkout().
• Then call checkout() to submit the required parameters to the Oceanpayment payment gateway.

//Submit parameters
<script>
//Payment
  function opApplepay() {
    //Get form elements
    var register = $("#payForm");
    //Serialize()
    var formData = register.serializeArray();
    //Submit parameter information to Oceanpayment
    onePageApplePay.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 Payment Results

• Frontend: Listen for payment result events to get immediate feedback.
• Backend: Use noticeUrl to receive asynchronous notifications and confirm the final payment status.

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.

Credit Card

var oceanpaymentCallBack = function(data){}

2. If card information fails validation, data.msg will contain an error message, for example:

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

3. If data.msg is empty, the card information is valid. In this case, handle the payment response and check the following scenarios:

• If xml->pay_url is empty, no 3D verification is required; he XML contains the payment result directly. An asynchronous notification will also be sent to noticeUrl.
• If xml->pay_url is present, redirect the customer to complete 3D verification. After verification, the payment result will be sent again to backUrl (default received via $_POST). An asynchronous notification will also be triggered via noticeUrl.

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);
    }	
}

GooglePay

var oceanpaymentGooglePayCallBack = function(data){}

2.If data.code == 2, it means the Google Pay button loaded successfully. In the else block, receive the payment response and determine the following two scenarios:

• If the xml->pay_url field is empty, then the xml file contains the returned payment result. In this case, an asynchronous noticeUrl notification will also be triggered.
• If the xml->pay_url field is not empty, a redirect is needed to open the pay_url to complete 3D validation. The payment result will then be sent back to backUrl, which by default uses $_POST to receive the return. This will also trigger an asynchronous notification via noticeUrl.

var oceanpaymentGooglePayCallBack = function(data){	
   if (data.code == 2) {
      
      opGooglepay();
   }else{
      //Handle order return.
      //console.log(data) 
}

3. When data.code == 3, it means the user has closed the Google Pay payment pop-up. The data returned format is:

{"code":3,"msg":"","method":"GooglePay"}

ApplePay

var oceanpaymentApplePayCallBack = function(data){}

2. If data.code == 2, it means the Apple Pay button loaded successfully. In the else block, receive the payment response and determine the following two scenarios:

• If the xml->pay_url field is empty, then the xml file contains the returned payment result. In this case, an asynchronous noticeUrl notification will also be triggered.
• If the xml->pay_url field is not empty, a redirect is needed to open the pay_url to complete 3D validation. The payment result will then be sent back to backUrl, which by default uses $_POST to receive the return. This will also trigger an asynchronous notification via noticeUrl.

var oceanpaymentApplePayCallBack = function(data){	
   if (data.code == 2) {
      //The button is activated to initiate the payment process.
      opApplepay();
   }else{
      //Handle order return.
      //console.log(data);
   }
}

3. When data.code == 3, it means the user has closed the Apple Pay payment pop-up. The data returned format is:

{"code":3,"msg":"","method":"GooglePay"}

4. Payment Response Example：

3D scene

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <notice_type>transaction</notice_type>
    <push_dateTime>2025-09-03 10:21:14</push_dateTime>
    <account>995149</account>
    <terminal>99514901</terminal>
    <signValue>924347D8E9C9BAC2EC91449C70540FF49E0DD5711F03E8A871DCA34CED023AB6</signValue>
    <methods>Credit Card</methods>
    <order_number>JSCSE-3128790866</order_number>
    <card_country>PL</card_country>
    <order_currency>USD</order_currency>
    <order_amount>0.01</order_amount>
    <order_notes></order_notes>
    <card_number>411111***1111</card_number>
    <card_type>Visa</card_type>
    <payment_country></payment_country>
    <payment_id>250902111334242179639</payment_id>
    <payment_authType>2</payment_authType>
    <payment_status>-1</payment_status>
    <payment_details>80093:3D Authorized Service not completed</payment_details>
    <payment_solutions></payment_solutions>
    <payment_risk></payment_risk>
    <payment_amount></payment_amount>
    <payment_exchangeRate></payment_exchangeRate>
    <auth_reason></auth_reason>
    <auth_code></auth_code>
    <pay_userId></pay_userId>
    <pay_url>https://secure.oceanpayment.com:443/gateway/direct/redirect?pay_id=af5e28ee57061f4fd1dd307a7bc56c7289d9041d0b5494195d91b7c5166b6e30</pay_url>
</response>

• Merchants redirect users to pay_url:

HTTP/1.2 301 Moved Permanently
Location: {pay_url}

Non-3D scenes

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <notice_type>transaction</notice_type>
    <push_dateTime>2025-09-03 10:21:14</push_dateTime>
    <account>995149</account>
    <terminal>99514901</terminal>
    <signValue>6E48108837603DF6758BD6CE81C9F8AEE6FDC40D14D056C41EBCC1B28B1F2A0D</signValue>
    <methods>Credit Card</methods>
    <order_number>JSCSE-3128790866</order_number>
    <card_country>PL</card_country>
    <order_currency>USD</order_currency>
    <order_amount>0.01</order_amount>
    <order_notes></order_notes>
    <card_number>411111***1111</card_number>
    <card_type>Visa</card_type>
    <payment_country>-</payment_country>
    <payment_id>250903102114589130422</payment_id>
    <payment_authType>0</payment_authType>
    <payment_status>1</payment_status>
    <payment_details>80000:Transaction Approved</payment_details>
    <payment_solutions>None required.</payment_solutions>
    <payment_risk></payment_risk>
    <payment_amount></payment_amount>
    <payment_exchangeRate></payment_exchangeRate>
    <auth_code></auth_code>
    <pay_userId></pay_userId>
</response>

5. Check payment status, and verify the final transaction status using asynchronous notifications sent to noticeUrl.

Signature

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

API Reference

👉Explore our to get started immediately.