WePay

API Customization and Themes

WePay allows you to customize the OAuth2 Authorization page, the iframe checkout, withdrawal flow, and API emails look, to match your site's design. You can either do this manually on your App dashboard or using the /app/modify API call.

Customization within the App Dashboard

The easiest way to change the colors and logo used for customization is through your App dashboard. Log into WePay and go to your App's dashboard. Click the "Configure" tab. Scroll down to Logo section and add an image. Scroll down to Colors section and click "Customize colors". You should be able to select primary, secondary, background and button colors. Save your changes.

The Theme Structure

The customization engine allows you to create themes that can be used by your API application and/or the accounts that you create. See the theme structure definition for more details.

Customize the OAuth2 Authorization page

If you want to set a theme on an authorization or registration page, you need to associate the theme with your API app. To facilitate this we have added /app and /app/modify calls. Pass the theme_object parameter (example below) to the /app/modify API call to set a theme to be used for the OAuth2 authorization page.

API Call:

  • PHP
  • cURL
  • Ruby
  • Python
<?php
    // WePay PHP SDK - http://git.io/mY7iQQ
    require 'wepay.php';

    // application settings
    $client_id = 123456789;
    $client_secret = "1a3b5c7d9";
    $access_token = "1a3b5c7d9";

    // create a theme
    $theme = array(
        'name'              => 'My Sample Theme',
        'primary_color'     => 'FFFFFF',
        'secondary_color'   => '000000',
        'background_color'  => '004C64',
        'button_color'      => '0084A0'
    );

    // change to useProduction for live environments
    Wepay::useStaging($client_id, $client_secret);

    $wepay = new WePay($access_token);

    // modify your application
    $response = $wepay->request('app/modify', array(
        'client_id'     => $client_id,
        'client_secret' => $client_secret,
        'theme_object'  => $theme
    ));

    // display the response
    print_r($response);
?>
curl https://stage.wepayapi.com/v2/app/modify \
	-H "Authorization: Bearer STAGE_8a19aff55b85a436dad5cd1386db1999437facb5914b494f4da5f206a56a5d20" \
	-d "client_id=123456789" \
	-d "client_secret=1a3b5c7d9" \
	-d "theme_object[name]=My Sample Theme" \
	-d "theme_object[primary_color]=FFFFFF" \
	-d "theme_object[secondary_color]=000000" \
	-d "theme_object[background_color]=004C64" \
	-d "theme_object[button_color]=0084A0"
				
# WePay Ruby SDK - http://git.io/a_c2uQ
require 'WePay_API_v2_Ruby_SDK.rb'

# application settings
client_id = 123456789
client_secret = '1a3b5c7d9'
access_token = '1a3b5c7d9'

# create a theme
theme = {
    :name               =>  'My Sample Theme',
    :primary_color      =>  'FFFFFF',
    :secondary_color    =>  '000000',
    :background_color   =>  '004C64',
    :button_color       =>  '0084A0'
}

# set _use_stage to false for live environments
wepay = WePay.new(client_id, client_secret, _use_stage = true)

# modify your application
response = wepay.call('/app/modify', access_token, {
    :client_id      => client_id,
    :client_secret  => client_secret,
    :theme_object   => theme
})

# display the response
p response
# WePay Python SDK - http://git.io/v7Y1jA
from wepay import WePay

# application settings
client_id = 123456789
client_secret = '1a3b5c7d9'
access_token = '1a3b5c7d9'
production = False

# create a theme
theme = {
    'name': 'My Sample Theme',
    'primary_color': 'FFFFFF',
    'secondary_color': '000000',
    'background_color': '004C64',
    'button_color': '0084A0'
}

# set production to True for live environments
wepay = WePay(production, access_token)

# modify your application
response = wepay.call('/app/modify', {
    'client_id': client_id,
    'client_secret': client_secret,
    'theme_object': theme
})

# display the response
print response

Response:

{
    "client_id":12345,
    "status":"approved",
    "theme_object":
    {
        "theme_id":12345,
        "name":"API Theme for API App: My Sample Application",
        "primary_color":"FFFFFF",
        "secondary_color":"000000",
        "background_color":"004C64",
        "button_color":"0084A0"
    }
}

Customize the iframe checkout, API emails, and withdrawal flow

To customize an iframe checkout, you need to associate a theme with the account that is getting paid. To allow this we have added theme_object parameters to the /account/create and /account/modify calls.

Similar to above you will pass the theme_object parameter to the /account/modify call, which will associate that theme with that account and will be used on all subsequent iframe checkouts.

API Call:

  • PHP
  • Ruby
  • Python
<?php
    // WePay PHP SDK - http://git.io/mY7iQQ
    require 'wepay.php';

    // application settings
    $account_id = 123456789;
    $client_id = 123456789;
    $client_secret = "1a3b5c7d9";
    $access_token = "1a3b5c7d9";

    // create a theme
    $theme = array(
        'name'              => 'My Sample Theme',
        'primary_color'     => 'FFFFFF',
        'secondary_color'   => '000000',
        'background_color'  => '004C64',
        'button_color'      => '0084A0'
    );

    // change to useProduction for live environments
    Wepay::useStaging($client_id, $client_secret);

    $wepay = new WePay($access_token);

    // modify your account
    $response = $wepay->request('account/modify', array(
        'account_id'    => $account_id,
        'theme_object'  => $theme
    ));

    // display the response
    print_r($response);
?>
# WePay Ruby SDK - http://git.io/a_c2uQ
require 'WePay_API_v2_Ruby_SDK.rb'

# application settings
account_id = 123456789;
client_id = 123456789;
client_secret = '1a3b5c7d9';
access_token = '1a3b5c7d9';

# create a theme
theme = {
    :name               =>  'My Sample Theme',
    :primary_color      =>  'FFFFFF',
    :secondary_color    =>  '000000',
    :background_color   =>  '004C64',
    :button_color       =>  '0084A0'
}

# set _use_stage to false for live environments
wepay = WePay.new(client_id, client_secret, _use_stage = true)

# modify your account
response = wepay.call('/account/modify', access_token, {
    :account_id      => account_id,
    :theme_object   => theme
})

# display the response
p response
# WePay Python SDK - http://git.io/v7Y1jA
from wepay import WePay

# application settings
account_id = 123456789
access_token = '1a3b5c7d9'
production = False

# create a theme
theme = {
    'name': 'My Sample Theme',
    'primary_color': 'FFFFFF',
    'secondary_color': '000000',
    'background_color': '004C64',
    'button_color': '0084A0'
}

# set production to True for live environments
wepay = WePay(production, access_token)

# modify your account
response = wepay.call('/account/modify', {
    'account_id': account_id,
    'theme_object': theme
})

# display the response
print response

Response:

{
    "account_id":12345,
    "name":"My Sample Application",
    "description":"Account for My Sample Application",
    "account_uri":"https:\/\/stage.wepay.com\/account\/12345",
    "payment_limit":5000,
    "theme_object":
    {
        "theme_id":12345,
        "name":"API Theme for Group My Sample Application",
        "primary_color":"FFFFFF",
        "secondary_color":"000000",
        "background_color":"004C64",
        "button_color":"0084A0"
    }
}

Email Messages

Some calls such as /checkout/create have parameters that let you pass an email message (generally payer_email_message and payee_email_message). These parameters accept a whitelisted set of HTML tags so that you have limited layout/design control over your custom message. Here is the whitelist:

  • <strong>
  • <em>
  • <b>
  • <a>
  • <br>
  • <br />
  • <dl>
  • <dd>
  • <dt>
  • <em>
  • <span>
  • <table>
  • <tr>
  • <td>
  • <tbody>
  • <thead>
  • <tfoot>
  • <div>
  • <img>