Overview

Use getPrice to extract cost information for a product/subscription plan, based on a specific list of options. 

Parameters

Response

Request

<?php


function callRPC($Request, $hostUrl, $Debug = true) {
    $curl = curl_init($hostUrl);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($curl, CURLOPT_SSLVERSION, 0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Accept: application/json'));
    $RequestString = json_encode($Request);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $RequestString);


    if ($Debug) {
        $RequestString;
    }
    $ResponseString = curl_exec($curl);
    if ($Debug) {
        $ResponseString;
    }

    if (!empty($ResponseString)) {
        $Response = json_decode($ResponseString);
        if (isset($Response->result)) {
            return $Response->result;
        }
        if (!is_null($Response->error)) {
            var_dump($Request->method, $Response->error);
        }
    } else {
        return null;
    }
}

$host = 'https://api.2checkout.com/rpc/3.0/';

$merchantCode = "YOUR_MERCHANT_CODE";// your account's merchant code available in the 'System settings' area of the cPanel: https://secure.2checkout.com/cpanel/account_settings.php
$key = "YOUR_SECRET_KEY";// your account's secret key available in the 'System settings' area of the cPanel: https://secure.2checkout.com/cpanel/account_settings.php

$string = strlen($merchantCode) . $merchantCode . strlen(gmdate('Y-m-d H:i:s')) . gmdate('Y-m-d H:i:s');
$hash = hash_hmac('md5', $string, $key);

$i = 1; // counter for api calls
// call login
$jsonRpcRequest = new stdClass();
$jsonRpcRequest->jsonrpc = '2.0';
$jsonRpcRequest->method = 'login';
$jsonRpcRequest->params = array($merchantCode, gmdate('Y-m-d H:i:s'), $hash);
$jsonRpcRequest->id = $i++;

$sessionID = callRPC($jsonRpcRequest, $host);

$CartItem = new stdClass();

$CartItem->Code = 'my_subscription_1';
$CartItem->Quantity = 1;
$CartItem->PriceOptions = array();

/* $CartItem->Trial = new stdClass();
$CartItem->Trial->Period = 8;
$CartItem->Trial->Price = 0; */

$BillingDetails = NULL;
$Currency = 'USD';
$CouponCode = '123';
$PayType = 'CC';


$jsonRpcRequest = array (
'method' => 'getPrice',
'params' => array($sessionID, $CartItem, $BillingDetails, $Currency, $CouponCode, $PayType),
'id' => $i++,
'jsonrpc' => '2.0'
);

var_dump (callRPC((Object)$jsonRpcRequest, $host, true));

Overview

Use the setExternalRef method in conjunction with setSubscriptionUpgrade.

Parameters

Response

Request

<?php
$host   = "https://api.2checkout.com";
$client = new SoapClient($host . "/soap/3.0/?wsdl", array(
    'location' => $host . "/soap/3.0/",
    "stream_context" => stream_context_create(array(
        'ssl' => array(
            'verify_peer' => false,
            'verify_peer_name' => false
        )
    ))
));

function hmac($key, $data)
{
    $b = 64; // byte length for md5
    if (strlen($key) > $b) {
        $key = pack("H*", md5($key));
    }
    
    $key    = str_pad($key, $b, chr(0x00));
    $ipad   = str_pad('', $b, chr(0x36));
    $opad   = str_pad('', $b, chr(0x5c));
    $k_ipad = $key ^ $ipad;
    $k_opad = $key ^ $opad;
    return md5($k_opad . pack("H*", md5($k_ipad . $data)));
}
$merchantCode = "YOUR_MERCHANT_CODE";// your account's merchant code available in the 'System settings' area of the cPanel: https://secure.2checkout.com/cpanel/account_settings.php
$key = "YOUR_SECRET_KEY";// your account's secret key available in the 'System settings' area of the cPanel: https://secure.2checkout.com/cpanel/account_settings.php
$now          = gmdate('Y-m-d H:i:s'); //date_default_timezone_set('UTC')
$string = strlen($merchantCode) . $merchantCode . strlen($now) . $now;
$hash   = hmac($key, $string);
try {
    $sessionID = $client->login($merchantCode, $now, $hash);
}
catch (SoapFault $e) {
    echo "Authentication: " . $e->getMessage();
    exit;
}
$ExternalReference = '9F4154733C';
try {
    $extRef = $client->setExternalRef($sessionID, $ExternalReference);
}
catch (SoapFault $e) {
    echo "extRef: " . $e->getMessage();
    exit;
}
var_dump("extRef", $extRef);

Overview

Extract all subscriptions belonging to a customer. Use the getCustomerSubscriptions method to retrieve details about the subscriptions belonging to a specific customer.

Subscriptions can be retrieved starting with 5 minutes after their orders are generated in the 2Checkout system.

Parameters

Response

Request

<?php
 
 
function callRPC($Request, $hostUrl, $Debug = true) {
    $curl = curl_init($hostUrl);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($curl, CURLOPT_SSLVERSION, 0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Accept: application/json'));
    $RequestString = json_encode($Request);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $RequestString);
 
 
    if ($Debug) {
        $RequestString;
    }
    $ResponseString = curl_exec($curl);
    if ($Debug) {
        $ResponseString;
    }
 
    if (!empty($ResponseString)) {
        $Response = json_decode($ResponseString);
        if (isset($Response->result)) {
            return $Response->result;
        }
        if (!is_null($Response->error)) {
            var_dump($Request->method, $Response->error);
        }
    } else {
        return null;
    }
}
 
$host = 'https://api.avangate.com/rpc/3.0/';
 
$merchantCode = "YOUR_MERCHANT_CODE";// your account's merchant code available in the 'System settings' area of the cPanel: https://secure.avangate.com/cpanel/account_settings.php
$key = "YOUR_SECRET_KEY";// your account's secret key available in the 'System settings' area of the cPanel: https://secure.avangate.com/cpanel/account_settings.php
 
$string = strlen($merchantCode) . $merchantCode . strlen(gmdate('Y-m-d H:i:s')) . gmdate('Y-m-d H:i:s');
$hash = hash_hmac('md5', $string, $key);
 
$i = 1; // counter for api calls
// call login
$jsonRpcRequest = new stdClass();
$jsonRpcRequest->jsonrpc = '2.0';
$jsonRpcRequest->method = 'login';
$jsonRpcRequest->params = array($merchantCode, gmdate('Y-m-d H:i:s'), $hash);
$jsonRpcRequest->id = $i++;
 
$sessionID = callRPC($jsonRpcRequest, $host);
 
var_dump($sessionID);
$customerReference = 260015052;

$jsonRpcRequest = array (
'method' => 'getCustomerSubscriptions',
'params' => array($sessionID, $customerReference),
'id' => $i++,
'jsonrpc' => '2.0');

var_dump (callRPC((Object)$jsonRpcRequest, $host, true));

Overview

Place a test order using dynamic product information.

Requirements

Set the Payment details type to TEST in order to create an order in a test environment.

Parameters 

Response 

 Request

<?php

require ('PATH_TO_AUTH');

$Order = new stdClass();
$Order->Currency = "USD";
$Order->Language = "EN";
$Order->Country = "US";
$Order->CustomerIP = '91.220.121.21';//"10.10.13.37";
$Order->Source = "sourceAPI.net";
$Order->LocalTime = date('Y-m-d H:i:s');
$Order->CustomerReference = 421820775;
$Order->Items = array();

/**
 * 1st Product
 */
$Order->Items[0] = new stdClass();
$Order->Items[0]->Code = null;
$Order->Items[0]->Quantity = 2;
$Order->Items[0]->PurchaseType = 'PRODUCT';
$Order->Items[0]->Tangible = false; // physical
$Order->Items[0]->IsDynamic = true;
$Order->Items[0]->Price = new stdClass();
$Order->Items[0]->Price->Amount = 100;
$Order->Items[0]->Price->Type = 'CUSTOM';
$Order->Items[0]->Name = 'Dynamic Product 1 '. date("Y-m-d H:i:s");
$Order->Items[0]->Description = 'Description Produs OTF';

$Order->Items[0]->PriceOptions = [];
$priceOption = new stdClass();
$priceOption->Name = 'Name';
$priceOption->Value = 'Value';
$priceOption->Surcharge = 10;
$Order->Items[0]->PriceOptions[] = $priceOption;

$priceOption1 = new stdClass();
$priceOption1->Name = 'Name';
$priceOption1->Value = 'Value123';
$priceOption1->Surcharge = 11;
$Order->Items[0]->PriceOptions[] = $priceOption1;

$priceOption2 = new stdClass();
$priceOption2->Name = 'Name1';
$priceOption2->Value = 'Value1';
$priceOption2->Surcharge = 12;
$Order->Items[0]->PriceOptions[] = $priceOption2;

$Order->Items[0]->RecurringOptions = new stdClass();
$Order->Items[0]->RecurringOptions->CycleLength = 1;
$Order->Items[0]->RecurringOptions->CycleUnit = 'MONTH';
$Order->Items[0]->RecurringOptions->CycleAmount = 1234;
$Order->Items[0]->RecurringOptions->ContractLength = 3;
$Order->Items[0]->RecurringOptions->ContractUnit = 'Year';

/*
 * 3rd Product - SHIPPING
 */

$Order->Items[2] = new stdClass();
$Order->Items[2]->Name = 'Shipping Item '. date("Y-m-d H:i:s");
$Order->Items[2]->PurchaseType = 'SHIPPING';
$Order->Items[2]->Quantity = 1;
$Order->Items[2]->Price = new stdClass();
$Order->Items[2]->Price->Amount = 123;
$Order->Items[2]->IsDynamic = true;

/**
 * 4th Product - TAX
 */
$Order->Items[3] = new stdClass();
$Order->Items[3]->Name = 'Tax Item '. date("Y-m-d H:i:s");
$Order->Items[3]->PurchaseType = 'TAX';
$Order->Items[3]->Quantity = 1;
$Order->Items[3]->Price = new stdClass();
$Order->Items[3]->Price->Amount = 456;
$Order->Items[3]->IsDynamic = true;
$Order->Items[3]->RecurringOptions = new stdClass();
$Order->Items[3]->RecurringOptions->CycleLength = 1;
$Order->Items[3]->RecurringOptions->CycleUnit = 'MONTH';
$Order->Items[3]->RecurringOptions->CycleAmount = 10.2;
$Order->Items[3]->RecurringOptions->ContractLength = 3;
$Order->Items[3]->RecurringOptions->ContractUnit = 'Year';

/**
 * 5th Product - COUPON
 */
$Order->Items[4] = new stdClass();
$Order->Items[4]->Name = 'Coupon Item '. date("Y-m-d H:i:s");
$Order->Items[4]->PurchaseType = 'COUPON';
$Order->Items[4]->Quantity = 1;
$Order->Items[4]->Price = new stdClass();
$Order->Items[4]->Price->Amount = 234;
$Order->Items[4]->IsDynamic = true;

/**/

$additionalField1 = new stdClass();
$additionalField1->Code = "additional_field_order_1";
$additionalField1->Text = "REST";
$additionalField1->Value = "1";


$Order->AdditionalFields = array();


$additionalField1 = new stdClass();
$additionalField1->Code = "REST";
$additionalField1->Text = "REST";
$additionalField1->Value = "REST";


$Order->MachineId = 'machineIdTest';
$Order->Discount = null;
$Order->ExternalReference = null;

$Order->BillingDetails = new stdClass();
$Order->BillingDetails->Address1 = 'Billing address 1';
$Order->BillingDetails->Address2 = 'Billing address 2';
$Order->BillingDetails->City = 'New York City';
$Order->BillingDetails->State = 'New York';
$Order->BillingDetails->CountryCode = 'US';
$Order->BillingDetails->Phone = 12345;
$Order->BillingDetails->Email = 'customer@email.com';
$Order->BillingDetails->FirstName = 'John';
$Order->BillingDetails->LastName = 'Doe';
$Order->BillingDetails->Company = 'ABC Company';
$Order->BillingDetails->Zip = '12345';
$Order->BillingDetails->FiscalCode = 13205628845;

/**/
$Order->DeliveryDetails = new stdClass();
$Order->DeliveryDetails->Address1 = 'Delivery address 1';
$Order->DeliveryDetails->Address2 = 'Delivery address 2';
$Order->DeliveryDetails->City = 'New York City';
$Order->DeliveryDetails->State = 'New York';
$Order->DeliveryDetails->CountryCode = 'US';
$Order->DeliveryDetails->Phone = '12345';
$Order->DeliveryDetails->Email = 'customer@email.com';
$Order->DeliveryDetails->FirstName = 'John';
$Order->DeliveryDetails->LastName = 'Doe';
$Order->DeliveryDetails->Zip = 12345;
/**/

$Order->PaymentDetails = new stdClass();
$Order->PaymentDetails->Type = "TEST";

$Order->PaymentDetails->Currency = "USD";
$Order->PaymentDetails->CustomerIP = '91.220.121.21';//"10.10.13.37";

$Order->PaymentDetails->PaymentMethod = new stdClass();


/**/
$Order->PaymentDetails->PaymentMethod->CardNumber = "4111111111111111";//4222222222222 //4111111111111111 //4984123412341234 - Installments
$Order->PaymentDetails->PaymentMethod->CardType = "VISA";/**/

/**/
$Order->PaymentDetails->PaymentMethod->ExpirationYear = "2020";
$Order->PaymentDetails->PaymentMethod->ExpirationMonth = "12";
$Order->PaymentDetails->PaymentMethod->CCID = "123";
$Order->PaymentDetails->PaymentMethod->HolderName = "John Doe";
$Order->PaymentDetails->PaymentMethod->RecurringEnabled = true;
$Order->PaymentDetails->PaymentMethod->HolderNameTime = 1;
$Order->PaymentDetails->PaymentMethod->CardNumberTime = 1;

try {
    $newOrder = $client->placeOrder($sessionID, $Order);
}
catch (SoapFault $e) {
    echo "newOrder: " . $e->getMessage();
    exit;
}

var_dump("newOrder", $Order);

Overview

Use the getNextRenewalPrice method to retrieve information on the costs customers incur on the next renewal for a subscription, per the recurring billing configuration.

Parameters

Request

<?php

require ('PATH_TO_AUTH');

$subscriptionReference = 'YOUR_SUBSCRIPTION_REFERENCE';
$Currency = 'eur';

try {
    $renewalDetails = $client->getNextRenewalPrice($sessionID, $subscriptionReference, $Currency);
}
catch (SoapFault $e) {
    echo "renewalDetails: " . $e->getMessage();
    exit;
}
var_dump("renewalDetails", $renewalDetails);

Response

Overview

Set up the 2Pay.js drop-in payments client to accept payments on your website. To collect payments you need to create a payment form, tokenize sensitive card information, and use that token to create a charge. 

Use the below method to set the language when generating the card component.

Use Case

1. Create a form with id="payment-form":

<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>
  <button class="btn btn-primary" type="submit">Generate token</button>
</form>

2. Inside the form, add an element with id="card-element". The form should now look like this: 

<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>

  <div id="card-element">
    <!-- A TCO IFRAME will be inserted here. -->
  </div>

  <button class="btn btn-primary" type="submit">Generate token</button>
</form>

3. Include the 2Pay.js drop-in payments client JavaScript:

<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>

4. Insert the following configuration JavaScript to set the language when adding the card component, and generate the token request:

window.addEventListener('load', function() {
  // Initialize the JS Payments SDK client.
  let jsPaymentClient = new  TwoPayClient('AVLRNG');
  
  // Set the desired language to be used inside the iframe.
  jsPaymentClient.setup.setLanguage('ro');
  
  // Create the component that will hold the card fields.
  let component = jsPaymentClient.components.create('card');
  
  // Mount the card fields component in the desired HTML tag. This is where the iframe will be located.
  component.mount('#card-element');

  // Handle form submission.
  document.getElementById('payment-form').addEventListener('submit', (event) => {
    event.preventDefault();
    
    // Extract the Name field value
    const billingDetails = {
      name: document.querySelector('#name').value
    };

    // Call the generate method using the component as the first parameter
    // and the billing details as the second one
    jsPaymentClient.tokens.generate(component, billingDetails).then((response) => {
      console.log(response.token);
    }).catch((error) => {
      console.error(error);
    });
  });
});

5. Place the order using the generated token.

Demo

After performing the steps above, your implementation should look like this:

Overview

E-wallets are online payment methods where the order is registered by 2Checkout, but the shopper has to reach a 3rd party's website in order to authenticate and finalize the payment. PayPal is one of the most used E-wallet solutions that dominate the eCommerce world, but other local players, especially in Asian countries, are starting to gain market share.

The following payment methods are supported for the E-wallet (online payment methods) flow PayPal, Alipay, Webmoney, WeChat, Giropay, iDeal.

Availability

Available to all 2Checkout accounts.

PayPal

Payment method Object structure

Request example

{
   "Language":"en",
   "Country":"US",
   "CustomerIP":"10.10.10.10",
   "Source":"Website",
   "ExternalCustomerReference":"externalCustomerId",
   "Currency":"USD",
   "MachineId":"123456789",
   "Items":[
      {
         "Code":"DD996A4DB3",
         "Quantity":1
      }
   ],
   "BillingDetails":{
      "FirstName":"Customer First Name",
      "LastName":"Customer Last Name",
      "CountryCode":"US",
      "State":"New York",
      "City":"New York",
      "Address1":"Example Street",
      "Zip":"10005",
      "Email":"customer@email.com"
   },
   "PaymentDetails":{
      "Type":"PAYPAL",
      "Currency":"USD",
      "PaymentMethod":{
         "RecurringEnabled":false,
         "ReturnURL":"http:\/\/mywebsite.com\/order\/",
         "Email":"customer@email.com"
      }
   }
}

Redirecting shoppers to PayPal

If the order is placed successfully, the 2Checkout API responds with the complete order information. Inside the PaymentDetails node, you will find the PaymentMethod node that contains the RedirectURL. 

The shopper needs to be redirected to this URL that takes them to the PayPal website to finalize the payment. Once the payment is finalized, shoppers are redirected back to the ReturnURL. 

PayPal Express - Alternative Flow

In some checkout flows, the user experience might require some details filled in by the shopper on PayPal's side. In order to streamline the checkout experience, this information can be used when placing orders by using the PayPal Express payment method. 

These are the required steps for the PayPal Express flow:

1. First, you must retrieve the RedirectURL from PayPal by calling the getPayPalExpressCheckoutRedirectURL method for JSON-RPC and SOAP, or by making a PUT request to /paymentmethods/PAYPAL_EXPRESS/redirecturl/ on REST.
2. The body of the request must contain the order object with, at a minimum, the product information as well as the payment details: the customer's email address and a ReturnURL, the page on the shop's side where the shopper is redirected after the flow is completed on the PayPal's side. 
3. The ReturnURL parses the response that PayPal sends in order to fetch the needed information and finalize the payment. 
4. The getPayPalExpressCheckoutRedirectURL method will return a URL where the shopper needs to be redirected in order to complete the payment.
5. Once the shopper completes the payment, PayPal returns the shopper to the URL provided in the ReturnURL. The information provided by the shopper on PayPal's side is available in the GET parameters of the ReturnURL (all information is MIME base64 encoded):

• billing details (under the billingDetails key)
• delivery details (under the deliveryDetails key)
• a token in the URL.

6. If the shopper cancels their payment, then the cancel key will be returned in the URL. 

7. The information provided in the billing and delivery details must be filled in the order object. 

The payment method object will look like this:

In JSON, this looks like:

    "PaymentDetails": {
        "Type": "PAYPAL_EXPRESS",
        "Currency": "EUR",
        "CustomerIP": "91.220.121.21",
        "PaymentMethod": {
            "Email": "customer@email.com",
            "Token": "EC-470284976K7901234",
            "ReturnURL": "http://shop.com/place_order_api_json_paypal_express_response.php",
            "CancelURL": "http://shop.com/place_order_api_json_paypal_express_response.php?cancel=true"
        }
    }

Alipay

Payment method object structure

Alipay does not require any mandatory fields to be sent in the PaymentDetails node of the request.

Request example

{
   "Language":"en",
   "Country":"HK",
   "CustomerIP":"10.10.10.10",
   "Source":"Website",
   "ExternalCustomerReference":"externalCustomerId",
   "Currency":"CNY",
   "MachineId":"123456789",
   "Items":[
      {
         "Code":"DD996A4DB3",
         "Quantity":1
      }
   ],
   "BillingDetails":{
      "FirstName":"Customer First Name",
      "LastName":"Customer Last Name",
      "CountryCode":"HK",
      "State":"Hong Kong",
      "City":"Hong Kong",
      "Address1":"Example Street",
      "Zip":"999077",
      "Email":"example@email.com"
   },
   "PaymentDetails":{
      "Type":"ALIPAY",
      "Currency":"CNY",
      "PaymentMethod":{
         "RecurringEnabled":false
      }
   }
}

Redirecting shoppers to Alipay

If the order is placed successfully, the 2Checkout API responds with the complete order information. Inside the PaymentDetails node, you will find the PaymentMethod/Redirect node that contains the URL. 

The shopper needs to be redirected to this URL. This takes them to the Alipay website, where they can finalize the payment. 

Webmoney

Payment method object structure

Webmoney does not require any mandatory fields to be sent in the PaymentDetails node of the request.

Request example

{
   "Language":"en",
   "Country":"RU",
   "CustomerIP":"10.10.10.10",
   "Source":"Website",
   "ExternalCustomerReference":"externalCustomerId",
   "Currency":"EUR",
   "MachineId":"123456789",
   "Items":[
      {
         "Code":"DD996A4DB3",
         "Quantity":1
      }
   ],
   "BillingDetails":{
      "FirstName":"Customer First Name",
      "LastName":"Customer Last Name",
      "CountryCode":"RU",
      "State":"Central",
      "City":"Moscow",
      "Address1":"Example Street",
      "Zip":"105005",
      "Email":"example@email.com"
   },
   "PaymentDetails":{
      "Type":"WEBMONEY",
      "Currency":"EUR",
      "PaymentMethod":{
         "RecurringEnabled":false
      }
   }
}

Redirecting shoppers to Webmoney

If the order is placed successfully, the 2Checkout API responds with the complete order information. Inside the PaymentDetails node, you will find the PaymentMethod/Redirect node that contains the URL, Method, and Params node. 

The shopper needs to be redirected to this URL, using the Method mentioned in the API response. Additionally, the parameters in the Params node need to be sent as key-value pairs in the body of the request.

This will take shoppers to the Webmoney website, where they can finalize the payment. 

WeChat

Payment method object structure

Request example

{
   "Language":"en",
   "Country":"CN",
   "CustomerIP":"10.10.10.10",
   "Source":"Website",
   "ExternalCustomerReference":"externalCustomerId",
   "Currency":"USD",
   "MachineId":"123456789",
   "Items":[
      {
         "Code":"DD996A4DB3",
         "Quantity":1
      }
   ],
   "BillingDetails":{
      "FirstName":"Customer First Name",
      "LastName":"Customer Last Name",
      "CountryCode":"CN",
      "State":"Beijing",
      "City":"Beijing",
      "Address1":"Example Street",
      "Zip":"102629",
      "Email":"example@email.com"
   },
   "PaymentDetails":{
      "Type":"WE_CHAT_PAY",
      "Currency":"USD",
      "PaymentMethod":{
         "RecurringEnabled":false,
         "ReturnURL":"http:\/\/yourreturnurl.com",
         "CancelURL":"http:\/\/yourcancelurl.com"
      }
   }
}

Redirecting shoppers to WeChat

If the order is placed successfully, the 2Checkout API responds with the complete order information. Inside the PaymentDetails node, you will find the PaymentMethod/Authorize node that contains the Href, Method, and Params node. 

The shopper needs to be redirected to this Href, using the Method mentioned in the API response. Additionally, the parameters in the Params node need to be sent as key-value pairs in the request.

This takes shoppers to the WeChat website, where they can finalize the payment. 

Giropay

Payment method object structure

Giropay does not require any mandatory fields to be sent in the Payment Details node of the request.

Request example

{
   "RefNo":null,
   "Currency":"EUR",
   "Country":"DE",
   "Language":"EN",
   "CustomerIP":"10.5.22.197",
   "ExternalReference":"REST_API_AVANGTEAS01",
   "Source":null,
   "AffiliateId":null,
   "CustomerReference":null,
   "Items":[
      {
         "Code":"DD996A4DB3",
         "Quantity":1
      }
   ],
   "BillingDetails":{
      "FirstName":"John",
      "LastName":"Doe",
      "CountryCode":"DE",
      "State":"Berlin",
      "City":"Berlin",
      "Address1":"Test street ",
      "Zip":"10247",
      "Email":"john.doe@2checkout.com",
      "Phone":"0123456789"
   },
   "PaymentDetails":{
      "Type":"GIROPAY",
      "Currency":"EUR",
      "CustomerIP":"10.5.22.197",
      "PaymentMethod":{
         "RecurringEnabled":false
      }
   }
}

Redirecting shoppers to Giropay

If the order is placed successfully, the 2Checkout API responds with the complete order information. Inside the PaymentDetails node, you will find the PaymentMethod/Redirect node that contains the URL, Method, and Params node. 

The shopper needs to be redirected to this URL, using the Method mentioned in the API response. Additionally, the parameters in the Params node need to be sent as key-value pairs in the request.

This takes shoppers to the Giropay website, where they can finalize the payment. 

iDeal

iDeal is a standardized online banking-based payment method tailored to users in the Netherlands. iDEAL supports online payments via secure online transfers directly between bank accounts. 

To place an order with iDeal, the shopper needs to select the bank that they use. The full list of supported banks can be queried via API by calling the getIdealIssuerBanks method (SOAP and JSON-RPC) or making a GET request /paymentmethods​/IDEAL​/issuerbanks​/ on REST.

The output of this API call is the list of supported banks, as code (to be used when placing the order), and the user-readable name of the bank.

[
   {
      "Code":"ABNANL2A+ABN",
      "Name":"ABN AMRO"
   },
   {
      "Code":"RABONL2U+RAB",
      "Name":"Rabobank"
   },
   {
      "Code":"INGBNL2A+ING",
      "Name":"ING"
   }
]

Payment method Object structure

 Request example

{
   "Language":"en",
   "Country":"NL",
   "CustomerIP":"10.10.10.10",
   "Source":"Website",
   "ExternalCustomerReference":"externalCustomerId",
   "Currency":"EUR",
   "MachineId":"123456789",
   "Items":[
      {
         "Code":"DD996A4DB3",
         "Quantity":1
      }
   ],
   "BillingDetails":{
      "FirstName":"Customer First Name",
      "LastName":"Customer Last Name",
      "CountryCode":"NL",
      "State":"North Holand",
      "City":"Amsterdam",
      "Address1":"Example Street",
      "Zip":"1183",
      "Email":"example@email.com"
   },
   "PaymentDetails":{
      "Type":"IDEAL",
      "Currency":"EUR",
      "PaymentMethod":{
         "ReturnURL":"http:\/\/yourreturnurl.com",
         "CancelURL":"http:\/\/yourcancelurl.com",
         "BankCode":"RABONL2U+RAB"
      }
   }
}

Redirecting shoppers to finalize the payment

Once the order has successfully been placed, in the response in the PaymentDetails/PaymentMethod/Authorize node, you have the information needed to compose the URL where the shopper needs to finalize the payment.

The shopper needs to reach the Href via the Method HTTP method, with the key-values in the Params in the request parameters.

 "PaymentDetails":{
      "Type":"IDEAL",
      "Currency":"eur",
      "PaymentMethod":{
         "Authorize":{
            "Href":"https:\/\/api.avangate.com\/6.0\/scripts\/ideal\/authorize",
            "Method":"GET",
            "Params":{
               "avng8apitoken":"ukaiuljobm84jmt3"
            },
            "AvangateId":null
         },
         "ReturnURL":"http:\/\/yourreturnurl.com",
         "CancelURL":"http:\/\/yourcancelurl.com",
         "BankCode":"RABONL2U+RAB",
         "RecurringEnabled":false
      },
      "CustomerIP":"5.12.32.22"
   },

Once the shopper has finalized the payment, the order will be marked with 'status = Complete'.

Integration test cases

1. Build a request in order to place a new order, with all the relevant information. Make sure that when the order is sent in the API, the response contains an order object (order was placed successfully).
2. Make sure that you handle the redirect to the 3rd party site.
3. If you have any additional webhook integrations, make sure that the webhooks are correctly configured and that the notifications are received and processed successfully. 

Overview

The 2Pay.js payment form can be customized and styled by providing an object as the second argument when calling the create method from component service in the TwoPayClient JavaScript SDK.

Before moving on to the payment form customization, let's take a look at how the elements work and how they are rendered by the browser.

To implement the documentation below, you need to have a 2Pay.js client already set up and a payment form already working inside your web page. If not, read this article to see the basic implementation of 2Pay.js.

Merchant’s Web Page and the 2Pay.js Form

As you probably noticed, the payment form renders inside an iFrame so the merchant’s page CSS will have to be written separately from the payment form. For example, you have a Full name field which is on the merchant’s page and the credit card, CVV and expiration date fields that are in the iFrame. However, the entire form will have to look and behave the same and the only way to customize the iFrame is by using the style configuration.

Payment Form Elements and Behavior

Rendering the payment form with the default styling (no styles applied) will consist of the following structure.

Generic elements

You can use generic elements as high-level HTML elements.

<body>
  <div>
    <form class="form">
      <div class="row">
        <div class="col">
        
          <!-- Credit card number field content goes here -->
          
        </div>
      </div>
      <div class="row">
        <div class="col">
        
          <!-- Expiration date field content goes here -->
        
        </div>
        <div class="col">
        
          <!-- CVV field content goes here -->
        
        </div>
      </div>
    </form>
  </div>
</body>

The Payment Form <body> Element

The payment form is rendered inside an iFrame and it needs to have an HTML, a <body> and a <head> tag.

CSS rules such as font, color, and background can be applied to the <body> by providing styles in the style object, as shown in the example below.

let component = jsPaymentClient.components.create('card', {
    margin                      : 0,
    fontFamily                  : 'Helvetica, sans-serif',
    fontSize                    : '1rem',
    fontWeight                  : '400',
    lineHeight                  : '1.5',
    color                       : '#212529',
    textAlign                   : 'left',
    backgroundColor             : '#ffffff'
});

HTML Elements <div class=”row”> and <div class=”col”>

The purpose of these two elements is to offer a way to divide the payment form content. For example, using rows and columns by applying CSS rules for them. Below is an example of how the payment form can display with the credit card number field on a row and expiration date field and CVV field on another row with two columns.

var component = twoPayClient.components.create('card', {
    '.row': {
        display : 'flex',
        flexWrap: 'wrap'
    },
    '.col': {
        flexBasis: '0',
        flexGrow : '1',
        maxWidth : '100%',
        padding  : '0',
        position : 'relative',
        width    : '100%'
    },
});

Card number field 

The card number field will be rendered together with several other HTML elements that are represented and explained below.

 <body>
  <div>
    <form class="form">
      <div class="row">
        <div class="col">
        
          <!-- Credit card number field START -->
          <div class="field-container card-number">
            <div class="field-wrapper form-group is-error is-empty is-required">
              <label for="card-number" class="label control-label">Card number</label>
              
              <div class="input-wrapper">
                <input type="text" autocomplete="cc-number" id="card-number" name="card-number" class="field form-control">
                <i class="card-icon"></i>
                <i class="lock-icon"></i>
                <!-- default state of the error or valid icon -->
                <i class="" style="display: none;"></i>
              </div>
            </div>
            
            <span class="validation-message">Enter a valid card number.</span>
          </div>
          <!-- Credit card number field END -->
    ...

The field container <div class=”field-container card-number”>

It holds all the card number field elements and it can customizable, as shown in the example below.

 var component = twoPayClient.components.create('card', {
    '.field-container': {
        paddingBottom: '14px'
    }
});

The field wrapper <div class=”field-wrapper”>

It contains the label, input, and icons and offers support for different states (validation or transition):

• default → Contains the base class names “field-wrapper form-group is-error is-empty is-required“. Usually, you will apply only some spacing to this element:

var component = twoPayClient.components.create('card', {
    '.field-wrapper': {
        paddingRight: '25px'
    }
});

• focus → Offers support for when the input is focused by adding the class name “is-focused” to this element.
• error → Offers support for when there is a validation error and adds the class name “is-error“ to this element.
• valid → Offers support for when the field validation passes and adds the class name ”is-valid” to this element.

The field’s label <label class="label control-label">

Styling the field’s label:

var component = twoPayClient.components.create('card', {
    label: {
        display     : 'inline-block',
        marginBottom: '9px',
        color       : '#313131',
        fontSize    : '14px',
        fontWeight  : '300',
        lineHeight  : '17px'
    }
});

Styling the field’s label on focus:

var component = twoPayClient.components.create('card', {
    '.is-focused label': {
        color: '#83ddeb'
    }
}); 

Styling the field’s label on error: 

var component = twoPayClient.components.create('card', {
    '.is-error label': {
        color: '#D9534F'
    }
});

Styling the field’s label when valid: 

var component = twoPayClient.components.create('card', {
    '.is-valid label': {
        color: '#1BB43F'
    }
});

The input wrapper <div class="input-wrapper">

Offers support for absolute positioning of the icons:

 var component = twoPayClient.components.create('card', {
    '.input-wrapper': {
        position: 'relative'
    }
});

The input <input type=”text” class=”field form-control”>

This is the actual input field where the user types in the data.

Styling the input:

var component = twoPayClient.components.create('card', {
    'input': {
        fontSize: '18px'
    }
});

 Styling the input on focus:

var component = twoPayClient.components.create('card', {
    'input:focus': {
        border         : '1px solid #5D5D5D',
        backgroundColor: '#FFFDF2'
    }
});

Styling the input on error:

 var component = twoPayClient.components.create('card', {
    '.is-error input': {
        border: '1px solid #D9534F'
    }
});

 Styling the input when valid:

var component = twoPayClient.components.create('card', {
    '.is-valid input': {
        border: '1px solid #1BB43F'
    }
});

The card icon <i class="card-icon"></i> or <i class="card-type-icon"></i> (card number specific element)

This element represents the card icon which appears by default in the card number field. The “card-icon” class name changes into “card-type-icon“ after the credit card auto-detection returns a card type.

This element’s style can also be customized:

var component = twoPayClient.components.create('card', {
    '.card-icon': {
      left: '10px'
    },
    '.card-type-icon': {
      right: '30px'
    }
});

The lock icon <i class="lock-icon"></i> (available for card number and CVV fields)

This element can be customized the same way as the card icon or it can be hid.

var component = twoPayClient.components.create('card', {
    '.lock-icon': {
      display: 'none'
    }
});

The lock icon <i class="error-icon"></i> or <i class="valid-icon"></i>

This element represents the error of valid icons. When an error is present, the element will have the class name “error-icon“, or if the field is valid, the element will have the “valid-icon“ class name. There is no class name on default state.

The example below shows how to style the error and valid icons:

var component = twoPayClient.components.create('card', {
    '.valid-icon': {
      right: '-25px'
    },
    '.error-icon': {
      right: '-25px'
    }
});

The validation message element <span class="validation-message">

This element displays only whether an error is present for the current field.

Here's how you can customize the validation message element:

var component = twoPayClient.components.create('card', {
    '.validation-message': {
        color       : '#D9534F',
        fontSize    : '10px',
        fontStyle   : 'italic',
        marginTop   : '6px',
        marginBottom: '-5px',
        display     : 'block',
        lineHeight  : '1'
    }
});

The above styling can be applied to all payment form fields with some exceptions: card-icon, card-type-icon – are only available for the card number field; lock-icon – is only available for the card number and CVV fields; you cannot pass any URL references in the style object. The following example will NOT work:

// Non working example
var component = twoPayClient.components.create('card', {
    '.valid-icon': {
        backgroundImage: 'url("https://my-web-site.com/some-valid-image.png")'
    }
});

The Style Object

Default style object

The default style object used, if no other style object has been provided, is the one below:

{
  margin: 0,
  fontFamily: 'Helvetica, sans-serif',
  fontSize: '1rem',
  fontWeight: '400',
  lineHeight: '1.5',
  color: '#212529',
  textAlign: 'left',
  backgroundColor: '#ffffff',
  '*': {
    'boxSizing': 'border-box'
  },
  '.no-gutters': {
    marginRight: 0,
    marginLeft: 0
  },
  '.row': {
    display: 'flex',
    flexWrap: 'wrap'
  },
  '.col': {
    flexBasis: '0',
    flexGrow: '1',
    maxWidth: '100%',
    padding: '0',
    position: 'relative',
    width: '100%'
  },
  'div': {
    display: 'block'
  },
  '.field-container': {
    paddingBottom: '14px'
  },
  '.field-wrapper': {
    paddingRight: '25px'
  },
  '.input-wrapper': {
    position: 'relative'
  },
  label: {
    display: 'inline-block',
    marginBottom: '9px',
    color: '#313131',
    fontSize: '14px',
    fontWeight: '300',
    lineHeight: '17px'
  },
  'input': {
    overflow: 'visible',
    margin: 0,
    fontFamily: 'inherit',
    display: 'block',
    width: '100%',
    height: '42px',
    padding: '10px 12px',
    fontSize: '18px',
    fontWeight: '400',
    lineHeight: '22px',
    color: '#313131',
    backgroundColor: '#fff',
    backgroundClip: 'padding-box',
    border: '1px solid #CBCBCB',
    borderRadius: '3px',
    transition: 'border-color .15s ease-in-out,box-shadow .15s ease-in-out',
    outline: 0
  },
  'input:focus': {
    border: '1px solid #5D5D5D',
    backgroundColor: '#FFFDF2'
  },
  '.is-error input': {
    border: '1px solid #D9534F'
  },
  '.is-error input:focus': {
    backgroundColor: '#D9534F0B'
  },
  '.is-valid input': {
    border: '1px solid #1BB43F'
  },
  '.is-valid input:focus': {
    backgroundColor: '#1BB43F0B'
  },
  '.validation-message': {
    color: '#D9534F',
    fontSize: '10px',
    fontStyle: 'italic',
    marginTop: '6px',
    marginBottom: '-5px',
    display: 'block',
    lineHeight: '1'
  },
  '.card-expiration-date': {
    paddingRight: '.5rem'
  },
  '.is-empty input': {
    color: '#EBEBEB'
  },
  '.lock-icon': {
    top: 'calc(50% - 7px)',
    right: '10px'
  },
  '.valid-icon': {
    top: 'calc(50% - 8px)',
    right: '-25px'
  },
  '.error-icon': {
    top: 'calc(50% - 8px)',
    right: '-25px'
  },
  '.card-icon': {
    top: 'calc(50% - 10px)',
    left: '10px',
    display: 'none'
  },
  '.is-empty .card-icon': {
    display: 'block'
  },
  '.is-focused .card-icon': {
    display: 'none'
  },
  '.card-type-icon': {
    right: '30px',
    display: 'block'
  },
  '.card-type-icon.visa': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.mastercard': {
    top: 'calc(50% - 14.5px)'
  },
  '.card-type-icon.amex': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.discover': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.jcb': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.dankort': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.cartebleue': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.diners': {
    top: 'calc(50% - 14px)'
  },
  '.card-type-icon.elo': {
    top: 'calc(50% - 14px)'
  }
}

Allowed CSS Properties

[
    // orphan properties
    'bottom',
    'clear',
    'clip',
    'color',
    'cursor',
    'direction',
    'display',
    'float',
    'height',
    'left',
    'letterSpacing',
    'opacity',
    'position',
    'right',
    'top',
    'verticalAlign',
    'visibility',
    'width',
    'zIndex',

    // align
    'alignContent',
    'alignItems',
    'alignSelf',

    // background
    'backgroundBlendMode',
    'backgroundClip',
    'backgroundColor',
    'backgroundPosition',
    'backgroundRepeat',
    'backgroundSize',
    'background',

    // border
    'borderBottomColor',
    'borderBottomLeftRadius',
    'borderBottomRightRadius',
    'borderBottomStyle',
    'borderBottomWidth',
    'borderBottom',
    'borderCollapse',
    'borderColor',
    'borderLeftColor',
    'borderLeftStyle',
    'borderLeftWidth',
    'borderLeft',
    'borderRadius',
    'borderRightColor',
    'borderRightStyle',
    'borderRightWidth',
    'borderRight',
    'borderSpacing',
    'borderStyle',
    'borderTopColor',
    'borderTopLeftRadius',
    'borderTopRightRadius',
    'borderTopStyle',
    'borderTopWidth',
    'borderTop',
    'borderWidth',
    'border',

    // box
    'boxDecorationBreak',
    'boxShadow',
    'boxSizing',

    // break
    'breakAfter',
    'breakBefore',
    'breakInside',

    // flex
    'flex',
    'flexBasis',
    'flexDirection',
    'fontFeatureSettings',
    'flexFlow',
    'flexGrow',
    'flexShrink',
    'flexWrap',

    // font
    'fontFamily',
    'fontKerning',
    'fontLanguageOverride',
    'fontSizeAdjust',
    'fontSize',
    'fontStretch',
    'fontStyle',
    'fontSynthesis',
    'fontVariant',
    'fontVariantAlternates',
    'fontVariantCaps',
    'fontVariantEastAsian',
    'fontVariantLigatures',
    'fontVariantNumeric',
    'fontVariantPosition',
    'fontWeight',
    'font',

    // justify
    'justifyContent',
    'justifyItems',
    'justifySelf',

    // line
    'lineBreak',
    'lineHeight',

    // list
    'listStylePosition',
    'listStyleType',
    'listStyle',

    // margin
    'marginBottom',
    'marginLeft',
    'marginRight',
    'marginTop',
    'margin',

    // max
    'maxHeight',
    'maxWidth',

    // min
    'minHeight',
    'minWidth',

    // outline
    'outlineColor',
    'outlineOffset',
    'outlineStyle',
    'outlineWidth',
    'outline',

    // overflow
    'overflow',
    'overflowWrap',
    'overflowX',
    'overflowY',

    // padding
    'paddingBottom',
    'paddingLeft',
    'paddingRight',
    'paddingTop',
    'padding',

    //text
    'textAlign',
    'textAlignLast',
    'textDecoration',
    'textDecorationColor',
    'textDecorationLine',
    'textDecorationSkip',
    'textDecorationStyle',
    'textIndent',
    'textOverflow',
    'textShadow',
    'textTransform',
    'textUnderlinePosition',

    // transform
    'transform',
    'transformOrigin',
    'transformStyle',
    'transition',
    'transitionDelay',
    'transitionDuration',
    'transitionProperty',
    'transitionTimingFunction',

    // word
    'wordBreak',
    'wordSpacing',
    'wordWrap'
]

Allowed CSS Pseudo-classes

 [
    ':hover',
    ':focus',
    ':active',
    ':disabled',
    '::placeholder',
    '::after',
    '::before'
]

Overview

Use the getProductUpgradeOptions method to retrieve the possible upgrade options for a subscription.

Parameters

Response

Request

<?php

require ('PATH_TO_AUTH');

$subscriptionReference = 'YOUR_SUBSCRIPTION_REFERENCE';

$jsonRpcRequest = array (
'method' => 'getProductUpgradeOptions',
'params' => array($sessionID, $subscriptionReference),
'id' => $i++,
'jsonrpc' => '2.0');

var_dump (callRPC((Object)$jsonRpcRequest, $host, true));

Overview

Use the setExternalRef method in conjunction with setSubscriptionUpgrade.

Parameters

Response

Request

<?php
$host   = "https://api.2checkout.com";
$client = new SoapClient($host . "/soap/4.0/?wsdl", array(
    'location' => $host . "/soap/4.0/",
    "stream_context" => stream_context_create(array(
        'ssl' => array(
            'verify_peer' => false,
            'verify_peer_name' => false
        )
    ))
));

function hmac($key, $data)
{
    $b = 64; // byte length for md5
    if (strlen($key) > $b) {
        $key = pack("H*", md5($key));
    }
    
    $key    = str_pad($key, $b, chr(0x00));
    $ipad   = str_pad('', $b, chr(0x36));
    $opad   = str_pad('', $b, chr(0x5c));
    $k_ipad = $key ^ $ipad;
    $k_opad = $key ^ $opad;
    return md5($k_opad . pack("H*", md5($k_ipad . $data)));
}
$merchantCode = "YOUR_MERCHANT_CODE";// your account's merchant code available in the 'System settings' area of the cPanel: https://secure.2checkout.com/cpanel/account_settings.php
$key = "YOUR_SECRET_KEY";// your account's secret key available in the 'System settings' area of the cPanel: https://secure.2checkout.com/cpanel/account_settings.php
$now          = gmdate('Y-m-d H:i:s'); //date_default_timezone_set('UTC')
$string = strlen($merchantCode) . $merchantCode . strlen($now) . $now;
$hash   = hmac($key, $string);
try {
    $sessionID = $client->login($merchantCode, $now, $hash);
}
catch (SoapFault $e) {
    echo "Authentication: " . $e->getMessage();
    exit;
}
$ExternalReference = '9F4154733C';
try {
    $extRef = $client->setExternalRef($sessionID, $ExternalReference);
}
catch (SoapFault $e) {
    echo "extRef: " . $e->getMessage();
    exit;
}
var_dump("extRef", $extRef);