Products
Our Platform
Developers
Sectors
Pricing
Consumers
Contact
About

Integrate Payments

Get up and running with fast, low-cost account-to-account payments today

DEMO

Try it out

Make a £1 donation to Shelter via Citizen

This is a one-off payment to UK nonprofit Shelter

Donate direct from your bank

Pay by simply selecting your bank using the email we send you, then approve the payment in your online banking

No need for your card or account number and sort code

No new accounts to create

Protected by your banks security

  • No need for your card or account number and sort code
  • No new accounts to create
  • Protected by your bank's security

1

2

3

Enter your email

Select your bank

Approve the payment in your online banking

What if I don't have my phone or bank app installed?

SINGLE DONATION:
£1

(to send you a secure link to select your bank)

Open the email on your phone to pay faster & easier via your bank app (recommended)

Thank you
Oops! Something went wrong while submitting the form.
Shelter help millions of people every year struggling with bad housing or homelessness through advice, support and legal services.

DEMO

Try it out

Make a £1 donation to Shelter via Citizen.

This is a one-off payment to UK nonprofit Shelter.

Donate direct from your bank

Pay by simply selecting your bank using the email we send you, then approve the payment in your online banking

  • No need for your card or account number and sort code
  • No new accounts to create
  • Protected by your bank's security

1

2

3

Enter your email

Select your bank

Approve the payment in your bank

SINGLE DONATION:
£1
Thank you
Oops! Something went wrong while submitting the form.

Open the email on your phone to link to your banks app

Shelter help millions of people every year struggling with bad housing or homelessness through advice, support and legal services.

Try it out

This will make a real payment of £1.
All money we receive will be donated to help those effected by the Australian bush fires.

Add our SDK

Add our payment SDK to the HTML header of your web page


<script src=https://sdk.citizen.is/v340/sdk/payment-sdk.js></script>

Initialise the SDK

Using your registered account, initialise the SDK with your entity API key.


<script>
	window.citizenAsyncInit = function () {
  CITIZEN_PAYMENT.init({
    publicApiKey: '[Your-entity-public-api-key]'
    })
  };
</script>

Create a payment

On your server, you can initialise a payment using a simple API call. This creates a payment transaction ID you pass to your front end.


   public class CitizenTransactionDetails implements Serializable {
    // This is just a Java class that represents the json object that you will need to send to the citizen backend.
    // These are required fields.
​
    private static final long serialVersionUID = 212345678976543210L;
​
    private String paymentGiro; //Either FPS or SEPA
    private String customerEmailAddress;
    private String merchantEmailAddress;
    private String amount;
    private String currency; // has to be a valid currency ISO code e.g. USD, EUR, GBP
    private String shortReference;
    private String detailedReference;
    private String customerIpAddress;
    private String customerDeviceOs;
​
​
    //Getters and Setters
}
​
@RestController
@RequestMapping(value = "my-payments-endpoint")
public class PaymentEndpoints {
​
    //Your backend will then make a request to the Citizen service to create a transaction.
    @RequestMapping(method = RequestMethod.POST, path = "/your-example-payment-endpoint")
    public Callable> createCitizenPaymentTransaction(TransactionDetails details) {
​
      CitizenTransactionDetails citizenPaymentDetails = new CitizenTransactionDetails();
      citizenPaymentDetails.setCustomerEmailAddress(DB.getCustomerEmail);
      citizenPaymentDetails.setmerchantEmailAddress("info@company.com");//should be the same as your entity.
      citizenPaymentDetails.setAmount(details.getAmount);
      citizenPaymentDetails.setCurrency("GBP");
      citizenPaymentDetails.setPaymentGiro(PaymentGiro.FPS);
      citizenPaymentDetails.setShortReference("MyShortReference123");
      citizenPaymentDetails.setDetailedReference("This is my detailed reference");
      citizenPaymentDetails.setCustomerIP(details.getIPAddress());//should be IPv4
      citizenPaymentDetails.setCustomerDeviceOs(details.getOS());
​
      RestTemplate restTemplate = new RestTemplate();
​
      HttpHeaders httpHeaders = new HttpHeaders();
      httpHeaders.set("AuthorizationCitizen", [YOUR_ENTITY_API_KEY]]);
​
      ResponseEntity paymentInitResponse = restTemplate
      .exchange("https://api.citizen.is/v1/tokens/payment-email-init", HttpMethod.POST,
      new HttpEntity<>(citizenPaymentDetails, httpHeaders), TextNode.class);
​
      String citizenPaymentTransactionId = paymentInitResponse.getBody().asText();
​
      return ResponseEntity.ok(new TextNode(citizenPaymentTransactionId)); //Return this to your front end
      }  
}

Start payment journey

Once you have your Citizen payment transaction ID you can use it with our SDK to start the payment journey.


<script>

// setup callbacks for the payment journey
let citizenSuccessCallback = function (response) {
     window.location.replace('/success.html');
  }
let citizenFailCallback = function (response) {
     window.location.replace('/fail.html');
  }

// transactionId - from the previous step
// userEmail - your customer's email
// successCallback - a callback which is called on successful payment
// failCallback - a callback which is called on payment failure

  let sendPayment = function (transactionId, userEmail) {
    window.CITIZEN_PAYMENT.startPaymentJourney(transactionId, userEmail, {
      successCallback: citizenSuccessCallback,
      failCallback: citizenFailCallback
    });
    
</script>