8. Sample codes

Credit card order and payment information being added directly to the objects:

// Assigned pbtoken to the merchant account
 $PB.setMerchant("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

 $PB.setCard({
	"cc_prevsaved": "",
	"cc_holder": "joao da silva",
	"cc_number": "4984123412341234",
	"cc_expiration": "12/29",
	"cc_cvv": "123",
	"wallet_type": null,
	"wallet_payload": null,
	"soft_descriptor": "TEST",
	"cc_save": 0,
	"cc_auth": 0
 });

 $PB.setPayment({
	"payment_method": "C",
	"bol_expiration": null,
	"pec_expiration": null,
	"cc_installments": 1,
	"url_return": null
 });

 $PB.setCustomer({
	"customer_name": "José da Silva",
	"customer_taxid": "91051605962",
	"customer_email": "josedasilva@myemail.com.br",
	"customer_phone": "11 3328.9999",
	"address_street": "Av.Paulista, 100",
	"address_zip": "01311100",
	"address_city": "São Paulo",
	"address_state": "SP"
 });

 $PB.setOrder({
	"order": "order_123",
	"product_name": "Product Test (1 license)",
	"amount_brl": 39.50,
	"param_url": "customer_id=12345%26newsletter=yes"
 });

 var funcRetSuccessOrder = function(ret){
	console.log("Order submitted successfully", ret);
	switch(ret.order_status){
		case 'PC':
			alert("Payment authorized"); // Action when payment is authorized
			break;

		case 'PF':
		case 'PR':
			alert("Payment not authorized (error " + ret.error_code + ")"); // Action when payment is not authorized
			break;

		default:
			alert("Unexpected status"); // Action when there's an unexpected status in the callback
			break;
	}
 }

 var funcRetErrorOrder = function(ret){
	console.error("Error submitting order", ret); // Action when there's an unexpected response in the callback
	alert("Error submitting order");
 }

 try{
	$PB.doAddOrder(funcRetSuccessOrder, funcRetErrorOrder);
 }catch(e){
	if(typeof e.message != "undefined"){
		alert(e.message.msg); // Action for an exception with no message in the response
	}else{
		console.error(e);
		alert("Undefined error"); // Action for an exception when calling doAddOrder
	}
 }

Credit card order and payment information being automatically collected from HTML inputs with specific attribute names:

<!Doctype html>
<html>
<head>
	<script src="https://service.pagbrasil.com/js/pagbrasil.js">
</script>
</head>
<body>
	<div class="container">
		<br><br>
		<form method="POST">
			<input type="hidden" name="token" id="token" value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" PB_pbtoken>
			<input type="hidden" name="order" id="order" value="order_123" PB_order>
			<input type="hidden" name="soft_descriptor" id="soft_descriptor" value="TEST" PB_soft_descriptor>
			<input type="hidden" name="payment_method" id="payment_method" value="C" PB_payment_method>
			<input type="hidden" name="product_name" id="product_name" value="Product Test (1 license)" PB_product_name>
			<input type="hidden" name="amount_brl" id="amount_brl" value="39.50" PB_amount_brl>
			<input type="hidden" name="param_url" id="param_url" value="customer_id=12345%26newsletter=yes" PB_param_url>
			<div>
				<label for="cc_holder">cc_holder</label>
				<input type="text" name="cc_holder" id="cc_holder" PB_cc_holder>
			</div>
			<div>
				<label for="cc_number">cc_number</label>
				<input type="text" name="cc_number" id="cc_number" PB_cc_number>
			</div>
			<div>
				<label for="cc_expiration">cc_expiration</label>
				<input type="text" name="cc_expiration" id="cc_expiration" PB_cc_expiration>
			</div>
			<div>
				<label for="cc_cvv">cc_cvv</label>
				<input type="text" name="cc_cvv" id="cc_cvv" PB_cc_cvv>
			</div>
			<div>
				<label for="cc_installments">cc_installments</label>
				<input type="text" name="cc_installments" id="cc_installments" PB_cc_installments>
			</div>
			<div>
				<label for="customer_name">customer_name</label>
				<input type="text" name="customer_name" id="customer_name" PB_customer_name>
			</div>
			<div>
				<label for="customer_taxid">customer_taxid</label>
				<input type="text" name="customer_taxid" id="customer_taxid" PB_customer_taxid>
			</div>
			<div>
				<label for="customer_email">customer_email</label>
				<input type="text" name="customer_email" id="customer_email" PB_customer_email>
			</div>
			<div>
				<label for="customer_phone">customer_phone</label>
				<input type="text" name="customer_phone" id="customer_phone" PB_customer_phone>
			</div>
			<div>
				<label for="address_street">address_street</label>
				<input type="text" name="address_street" id="address_street" PB_address_street>
			</div>
			<div>
				<label for="address_zip">address_zip</label>
				<input type="text" name="address_zip" id="address_zip" PB_address_zip>
			</div>
			<div>
				<label for="address_city">address_city</label>
				<input type="text" name="address_city" id="address_city" PB_address_city>
			</div>
			<div>
				<label for="address_state">address_state</label>
				<select name="address_state" id="address_state" PB_address_state>
					<option value="AC">Acre</option>
					<option value="AL">Alagoas</option>
					<option value="AP">Amapá</option>
					<option value="AM">Amazonas</option>
					<option value="BA">Bahia</option>
					<option value="CE">Ceará</option>
					<option value="DF">Distrito Federal</option>
					<option value="ES">Espírito Santo</option>
					<option value="GO">Goias</option>
					<option value="MA">Maranhão</option>
					<option value="MT">Mato Grosso</option>
					<option value="MS">Mato Grosso do Sul</option>
					<option value="MG">Minas Gerais</option>
					<option value="PA">Pará</option>
					<option value="PB">Paraíba</option>
					<option value="PR">Paraná</option>
					<option value="PE">Pernambuco</option>
					<option value="PI">Piauí</option>
					<option value="RJ">Rio de Janeiro</option>
					<option value="RN">Rio Grande do Norte</option>
					<option value="RS">Rio Grande do Sul</option>
					<option value="RO">Rondônia</option>
					<option value="RR">Roraima</option>
					<option value="SC">Santa Catarina</option>
					<option value="SP">São Paulo</option>
					<option value="SE">Sergipe</option>
					<option value="TO">Tocantins</option>
				</select>
			</div>
			<div>
				<div class="offset-sm-2 col-sm-10">
					<button type="submit" class="btn btn-primary" onclick="submitinfo(event)">POST</button>
				</div>
			</div>
		</form>
	</div>
	<script language="javascript">
		function submitinfo(e){
			e.preventDefault();
			var funcRetSuccessOrder = function(ret){
				console.log("Order submitted successfully", ret);
				switch(ret.order_status){
					case 'PC':
						alert("Payment authorized"); // Action when payment is authorized
						break;
					case 'PF':
					case 'PR':
						alert("Payment not authorized (error " + ret.error_code + ")"); // Action when payment is not authorized
						break;
					default:
						alert("Unexpected status"); // Action when there's an unexpected status in the callback
						break;
				}
			}
			var funcRetErrorOrder = function(ret){
				console.error("Error submitting order", ret); // Action when there's an unexpected response in the callback
				alert("Error submitting order");
			}
			try{
				$PB.doAddOrder(funcRetSuccessOrder, funcRetErrorOrder);
			}catch(e){
				if(typeof e.message != "undefined"){
					alert(e.message.msg); // Action for an exception with no message in the response
				}else{
					console.error(e);
					alert("Undefined error"); // Action for an exception when calling doAddOrder
				}
			}
			return true;
		}
	</script>
</body>
</html>

Débito Flash^™ order and payment information being added directly to the objects:

$PB.setOrder({
	"order": "order_123",
	"product_name": "Product Test",
	"amount_brl": 1.99,
	"param_url": "customer_id=12345%26newsletter=yes"
});

// Assigned pbtoken to the merchant account
$PB.setMerchant({
	"pbtoken": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	"authentication": "3DS2",
	"authentication_onfailure": false
});

$PB.setPayment({
	"payment_method": "D",
	"cc_installments": 1
});

$PB.setCustomer({
	"customer_name": "José da Silva",
	"customer_taxid": "91051605962",
	"customer_email": "josedasilva@myemail.com.br",
	"customer_phone": "11 3328.9999",
	"address_street": "Av.Paulista, 100",
	"address_zip": "01311100",
	"address_city": "São Paulo",
	"address_state": "SP"
});

$PB.setCard({
	"cc_holder": "José da Silva",
	"cc_number": "4984123412341234",
	"cc_expiration": "12/29",
	"cc_cvv": "123",
});

var callbackSuccess = function(){

	console.log("Transaction authenticated");

	// When integrating using the API, you need to extract the authentication details to get the corresponding API parameters to authorize the transaction in the back-end
	var ret = $PB.getAuth3DS();

	/*
	// Returning values and their corresponding API parameters
	auth3ds_type = ret.type
	auth3ds_cavv = ret.cavv
	auth3ds_version = ret.version
	auth3ds_eci = ret.eci
	auth3ds_reference_id = ret.reference_id
	auth3ds_xid = ret.xid
	ret.token and ret.method are not used (PagBrasil.JS internal use only)
	*/
}

var callbackFail = function(){
	console.log("Transaction not authenticated");
}

$PB.setCallbackAuthenticateSuccess(callbackSuccess);
$PB.setCallbackAuthenticateFail(callbackFail);

function Authenticate(){

	try{
		$PB.doAuthenticate();
	}catch(e){
		console.error(e);
	}
}